🌳Frontend/etc

velog를 탐방하다가 정말 정말 좋은 게시글이 발견했다. 대부분이 모르는 Next에서 SSG가 작동하는 방식 | 리팩토링을 통해 서비스 최적화하기 2편 해당 내용을 읽고 재 정리한 것이니(내용은 동일해요 !!!!) 한번쯤 꼭 읽어보길 추천합니다. CSR (클라이언트사이드 렌더링) CSR 이전의 웹 사이트 CSR 이전의 사이트들은 페이지마다 HTML로 그려진 파일이 있었다. 그 페이지를 이동할 때 마다 서버에서 HTML를 요청했고 화면에서는 서버에서 받아온 HTML을 그렸었다. 1. 사이트 접속 2. 서버에 HTML 요청 3. HTML을 화면에 그림 4. 사이트에서 다른 페이지로 이동 5. 그 페이지에 맞는 HTML 을 서버에 또 요청 6. HTML 을 화면에 그림 .. 무한반복 즉, 사용자가 한 사이트..

🤔 쿠키와 세션을 사용하는 이유 HTTP는 인터넷에서 데이터를 주고받기 위한 약속(프로토콜) 이다. HTTP는 몇가지 단점이 있는데, 바로 `비연결성`, `무상태성` 이다 비연결성(Connectionless) 클라이언트가 요청을 한 후 응답을 받으면 연결을 끊어버리는 특징 무상태성(Stateless) 통신이 끝나면 상태를 유지하지 않는 특징 쿠키와 세션은 위의 두가지 특징을 해결하기 위해 사용한다. (쿠키와 세션을 이용하지 않으면, 웹사이트에 로그인을 했음에도 페이지를 이동할 때 마다 로그인을 해야 한다.) 🍪 쿠키 (Cookie) 클라이언트(브라우저)에 저장되는 key와 value값이 들어있는 작은 데이터 파일 단점 보안에 취약하다 용량제한이 있다 브라우저간 공유가 불가능하다 사이즈가 커질수록 네트워크..

📄 참고자료 원본 게시글 How To Optimize Your Site With GZIP Compression 번역 게시글 [WEB, 번역] Gzip 압축으로 사이트 최적화하는 방법 압축은 사이트의 속도를 높일 수 있는 단순한 효과적인 방법이다. 📌 콘텐츠 인코딩 만약, `http://www.yahoo.com/index.html` 을 요청할 때, 브라우저와 웹서버는 다음과 같은 대화를 나눈다. Browser: Hey, GET me /index.html Server: Ok, let me see if index.html is lying around… Server: Found it! Here’s your response code (200 OK) and I’m sending the file. Browser: 1..

Hydration 서버에서 생성한 HTML은 단순 마크업이므로 사용자 인터렉션이 불가능하다. 따라서 React 는 이벤트리스너, 상태관리와 같은 클라이언트 로직을 전달받은 HTML과 통합하여 애플리케이션으로 작동할 수 있도록 한다. 이과정을 `Hydration` 이라 한다. 다시 설명하면, 서버에서 생성한 HTML을 클라이언트에게 전달하고, 클라이언트는 전달받은 HTML에 이벤트리스너와 상태관리와 같은 클라이언트 로직을 연결시킨다. 이것이 `Hydration`이다. 이때 중요한건 연결하는 과정인데, React는 Element와 로직 정보가 담긴 가상 DOM 을 생성한 뒤 이를 전달받은 HTML과 비교한다. 즉, 서버와 클라이언트 렌더링 결과가 같은 경우에만 `Hydration`을 수행할 수 있다. fun..