개발 기록 남기기✍️

Next.js 13버전을 사용하면서 Server Component와 Client Component의 존재에 대해서 알게 되었는데, SSR, CSR 등과의 지식이 섞이니까 헷갈린다..! 파이널 프로젝트 시작 전 확실히 짚고 넘어가보자.🏃‍♀️ 📌 클라이언트 컴포넌트란? 클라이언트 사이드 컴포넌트는 클라이언트(브라우저)에서 렌더되고 fetch되는 컴포넌트이다. 클라이언트 컴포넌트는 브라우저의 자바스크립트 번들을 포함하고 있는 일반적인 리액트 컴포넌트이다. 클라이언트 컴포넌트는 다음과 같은 특징을 갖는다. 클라이언트 컴포넌트는 onClick 같은 상호작용성(인터랙션)을 포함한다. 클라이언트 컴포넌트는 클라이언트라고 불리는 브라우저에서 렌더된다. 클라이언트 컴포넌트는 "use client"라고 선언함으로써 클라..

🗂️ 용어 정리 ❓렌더링이란? 렌더링이란 렌더링 엔진에 의해 HTML 문서 요소를 실제 화면에 그리는 작업을 의미하기도 한다. 하지만, 해당 글에서의 렌더링은 화면에 보일 HTML 문서를 완성하는 작업을 의미한다. ❓TTV & TTI TTV : Time To View ➡️ 유저가 사이트를 볼 수 있는 시간 TTI : Time To Interact ➡️ 유저가 인터랙션을 할 수 있는 시간 화면이 그려지고 유저가 확인할 수 있는 상태가 되는 시간을 TTV라고 하며, 클릭을 비롯한 브라우저에서의 상호작용이 가능해지는 시간을 TTI라고 한다. 웹 개발시 중요한 포인트 중 하나가 바로 TTV와 TTI를 줄이는 것이다. ❓SEO Search Engine Oprimization: 검색 엔진 최적화 웹 사이트 제작 시..

⚙️ SSR(Server Side Rendering) SSR은 서버에서 사용자에게 보여줄 페이지를 모두 구성하여 사용자에게 페이지를 보여주는 방식이다. JSP/Servlet의 아키텍처에서 이 방식을 사용했다. SSR을 사용하면 모든 데이터가 매핑된 서비스 페이지를 클라이언트(브라우저)에게 바로 보여줄 수 있다. 서버를 이용해서 페이지를 구성하기 때문에 클라이언트에서 구성하는 CSR(client-side rendering)보다 페이지를 구성하는 속도는 늦어지지만 전체적으로 사용자에게 보여주는 콘텐츠 구성이 완료되는 시점은 빨라진다는 장점이 있다. 더불어 SEO(search engine optimization) 또한 쉽게 구성할 수 있다. 🔄 SSR 동작 과정 먼저 클라이언트가 초기 화면을 로드하기 위해 서..