성장을 위한 기록

서버 사이드(SSR) 렌더링이란? Next.js를 알아보다 서버 사이드 렌더링이라는 말을 들었다. 서버 사이드 렌더링이란 무엇일까 ? 말 그대로 서버에서 렌더링을 한다는 것이다. 더 자세히 얘기해보자면, 서버에서 페이지를 그려 클리이언트로 보낸 후 화면을 표시하는 기법이다. 이 반대대는 개념이 클라이언트 사이드 렌더링이고 대표적으로 내가 사용하는 React이다. 서버 사이드 렌더링 , SSR 동작과정 장단점 장점 SEO, 검색엔진 최적화의 좋다. 여기서 SEO란 검색엔진이 웹을 크롤링 하면서 페이지에 컨턴츠 색인을 생성하는 과정인데, 모든 데이터가 이미 HTML에 담겨진채로 서버에서 받기 때문에, 어플리케이션을 구성하는 모든 페이지를 가지고 있게되고 이로 인해 seo 효과가 좋다. 빠른 초기 로딩 서버에..

나는 왜 토큰을 localStorge에 저장하는 방식만 생각했나 ? 혼자서 firebase를 이용한 로그인을 구현할 때에는 로컬 스토리지에 정보를 저장했다.( 토큰 비슷하게 로그인 유무와 닉네임만 파악할 수 있게) 그리고 이번 백엔드와 협업하면서 자연스럽게 토큰을 로컬 스토리지에 저장을 했다. 그리고 다른 프론트엔드와 얘기하는 도중 대부분의 사람들이 쿠키에 저장을 한 것을 보고 이유를 물었는데, 대부분이 그냥 쿠키로 하는 코드를 봤다는 대답에 궁금해서 알아보고 정리해보고자 이 글을 쓰려한다. 세션 스토리지 vs 로컬 스토리지 vs 쿠기 vs 세션 웹 스토리지 클라이언트에 데이터를 저장할 수 있도록 HTML5부터 추가된 저장소이다. 데이터 형테는 Key-value 스토리지 형태로 구성된다. 오직 문자형 데..

브라우저 동작 과정 기본 동작 과정은 다음과 같다. HTML 파일과 CSS 파일을 파싱해 render tree 만들기 (Parsing / Style) Render tree에서 각 노드의 위치와 크기를 계산한다. (Layout) 계산된 값을 이용해 화면 상의 픽셀로 변환하고 레이어를 만든다. (Paint) 레이어를 합성하여 실제 화면을 띄운다(Composite) 다음은 각 과정을 조금 더 세부적으로 알아보자. 1. HTML 파일과 CSS 파일을 파싱해 render tree 만들기 (Parsing / Style) 위 사진은 각각 DOM, CSSOM, Render Tree 이해를 돕기 위한 예시 사진이다. 만들어지는 과정을 쪼개보면 이렇다 브라우저 주소창에 특정 주소를 입력 해당 주소의 서버를 찾아가고 DNS..