CS23 4/16 HTML/CSS 1. 웹이란? 전 세계적으로 연결된 컴퓨터 네트워크를 통해 정보를 공유하는 공간, 웹 1.0이 개인이 사이트를 운영하고, 1:1로 접속했다면 웹 2.0은 하나의 거대한 플랫폼 기업이 사용자들에게 정보를 제공, 1:다 웹 3.0은 인공지능과 블록체인을 기반으로 맞춤형 정보를 제공하고 데이터 소유를 개인화하는 3세대 인터넷 기존에 사용하던 서비스에서 인공지능을 통해 개인 맞춤형 정보를 얻고, 블록체인을 통해 개인의 정보 소유 및 보안을 강화하는 지능형 웹 기술 Web 2.0에서 플랫폼이 소유하고 있던 정보들을 Web 3.0에서는 개인이 소유하게 됩니다(탈중앙화) 웹 1.0 2.0 3.0 에 대한 설명은 -> (https://velog.io/@sweet_sumin/%EC%9B%B9-1.0-%EC%9B%B9-2.. 2024. 4. 18. [React] React Hook 정의 함수형 컴포넌트에서도 life cycle, state 관리를 할 수 있게 해주는 함수 이전의 React는 class형 컴포넌트로 life cycle, state 관리를 해왔다. Hook이 도입되며 함수형 컴포넌트에서도 state, life cycle 관리를 할 수 있게 되었으며 React는 개념적으로 함수에 더 가깝기 때문에, class 대신 함수형 + hook을 권장하고 있다(공식문서) 동기 (기존의 문제점) 1. 컴포넌트들 사이에서 상태로직 재사용하기 이전에 class형 컴포넌트에 상태 로직이 종속적이었기 때문에 (constructor, componentDidMount 등) 컴포넌트의 계층이 깊어질수록 코드가 복잡해졌음. => useState 같은 React Hook은 계층의 변화 없이 상태 관.. 2024. 3. 12. CSRF, XSS, CORS https://evan-moon.github.io/2020/05/21/about-cors/ 사용자가 피싱 링크 클릭 -> 사용자의 계정(자동 로그인)으로 은행에게 돈 송금하라는 요청 보냄 대응 기법 Refferer: 백엔드 단에서 승인된 도메인으로만 요청시에 처리하도록 함 Safety token: 사용자 세션에 임의의 난수값을 지정하고 요청이 들어오면 대조해본다 XSS (Cross Site Scripting) 관리자가 아닌 권한이 없는 사용자가 웹 사이트에 스크립트를 삽입하는 공격 기법 ex) 해커가 웹사이트에 악의적인 스크립트 삽입(ex. 전자 게시판) -> 게시판을 열람한 사용자의 브라우저에서 스크립트가 실행되어 쿠키 탈취 -> 세션 하이재킹 CSRF는 인증된 세션이 필요하고 그걸 가지고 공격을 하지.. 2024. 3. 12. 프로그레시브 웹 앱(PWA, Progressive Web App) 정의 똑같이 모바일 기기에서 네이티브 경험을 제공한다는 점에서는 웹 앱과 동일함 그러나 오프라인(캐싱) 접속, 푸시 알람 등 기존의 웹 앱이 할 수 없었던 네이티브 기능까지 수행할 수 있는 웹 앱 웹 앱과의 차이점 1. 웹 앱 매니페스트(Web App Manifest), 홈 화면 추가 앱 스토어를 거치지 않고 홈 화면에 설치할 수 있는 웹사이트 기존의 웹 앱은 브라우저를 켜서 접속해야 했음 2. Service Worker를 통한 캐싱 가능 -> 이를 통해 오프라인에서도 동작 가능 3. 푸시 알림 + 카메라, 마이크 등 모바일 기기 자체 기능도 사용 가능 장점 1. 네이티브 수준의 개발 가능 - 물론 모든 기능은 구현할 수 없지만 유사한 경험까진 가능 - 네이티브 언어를 알지 못해도 네이티브의 기능을 구현.. 2024. 3. 11. 네이티브 앱, 하이브리드 앱, 웹 앱 네이티브 앱 안드로이드 SDK나 iOS SDK로 제작한 앱 ex. 카카오톡, 유튜브, 인스타그램 장점 성능이 좋음. (가장 플랫폼에 밀착, 모바일 전용 언어로 개발) 네이티브 API 호출 가능 단점 플랫폼이 제한적 플랫폼 마다 따로따로 개발해야 함 -> 시간, 비용 많이 듦 언어 고정 웹 앱 모바일 브라우저로 열어서 쓰는 앱, 모바일웹보다 모바일에 최적화되어있음 SPA로 네이티브 앱의 느낌을 줄 수 있음 장점 다운받지 않아도 쉽게 접근 가능 모든 기기와 브라우저에서 접근 가능(운영체제 상관 X) 별도로 설치 / 승인이 필요없어 유지보수가 용이함 단점 플랫폼 API 사용 불가능, 브라우저 API만 가능 친화적 터치 X 아무래도 웹으로 개발하는 거다 보니 네이티브보다는 좀 떨어짐 하이브리드 앱 기본 기능은 .. 2024. 3. 11. CSR (Client Side Rendering) & SSR (Server Side Rendering) 정의와 특징SSR(Server Side Rendering)사용자가 요청할 때마다 서버에서 렌더링, 페이지(html) 다 생성해서 보내줌 -> 새로고침 필수페이지 별로 구분 가능(link 다 다름)CSR(Client Side Rendering)서버는 빈 페이지(html)만 제공해주고, 나머지는 javascript로 클라이언트 단에서 직접 렌더링SPA(Single Page Application)최초의 페이지만 로딩한 이후에는 데이터만 변환해서 쓸 수 있는 애플리케이션필요한 데이터를 가져와서 필요한 부분만 재렌더링새로고침 없이 페이지 전환 가능, 네이티브 앱의 느낌을 줄 수 있음차이점SEO (Search Engine Optimization) (SSR > CSR)SE.. 2024. 3. 8. JWT(Json Web Token) 정의 JSON 객체에 인증에 필요한 정보들을 담은 후 비밀 키로 서명한 토큰, 인터넷 표준 인증 방식 인증(Authentication) & 권한 허가(Authorization) 방식 구조 header alg typ payload 사용자 정보(claim) sub, aud, iat, exp signature header+payload를 alg과 secret key로 암호화 signature는 secret key가 있어야 복호화할 수 있고, 이때문에 토큰이 중간에 악의적으로 수정되어도 판별할 수 있음 프로세스 토큰 생성 사용자 ---로그인---> 서버 서버: 확인 후 secret key로 JWT 생성 사용자 2024. 3. 8. OAuth 아래 글 내용들을 정리한 것, 원문이 더 자세함 https://hudi.blog/oauth-2.0/ https://gyoogle.dev/blog/web-knowledge/OAuth.html 등장배경 기존에는 A 사이트(ex. 개인 프로젝트 사이트)에서 B 사이트(ex. 구글)의 정보를 조회하려고 하면, B 사이트의 ID/PW를 조회해야 했었다. - ex. 네이버 계정의 이름, 성별, 생년월일로 계정 가입하기 이 방식은 보안에 취약할 수 밖에 없음. A 사이트에서 ID/PW를 해킹 당하면 B 사이트의 계정까지 다 뚫리는 것 .. 그래서 ID/PW를 직접 건네주지 않고도 Open API를 활용해서 B 사이트의 정보를 A 사이트에서 볼 수 있게 하는 것이 OAuth이다. (Open Authorization) .. 2024. 3. 4. Web Server와 WAS https://gmlwjd9405.github.io/2018/10/27/webserver-vs-was.html을 정리한 https://gyoogle.dev/blog/web-knowledge/Web%20Server%EC%99%80%20WAS%EC%9D%98%20%EC%B0%A8%EC%9D%B4.html을 정리한 글 1. 정적 페이지와 동적 페이지 정적 페이지: 이미 저장된(만들어진) 페이지 동적 페이지: 서버가 DB조회 등등 페이지를 그때 그때 만들어서 제공 ex. user_id에 따라 다르게 보여줘야 하는 경우에는 모든 정적 페이지를 만들어 놓을 수 없음 .. 2. Web Server 1) 정의 하드웨어: 웹 서버가 설치되어 있는 컴퓨터 소프트웨어: HTTP 요청을 받고, 정적인 컨텐츠(html, css.. 2024. 3. 1. 이전 1 2 3 다음
