Next.js

🖼️ 문제 상황React와 Next.js, 그리고 Typescript을 기반으로 한 프로젝트입니다.마이 페이지의 프로필 편집 기능에서 서버에 patch 요청을 보낼 때, body에 소개글을 제외한 프로필 이미지와 닉네임 값이 필수로 들어가야 했습니다.그리고 api는 이미지 파일을 미리 서버에 업로드하여 url을 응답으로 받고, 해당 url을 닉네임 및 소개글과 함께 담아 최종적인 프로필 편집 patch 요청을 보내는 방식이었습니다.사용자가 프로필 사진을 따로 지정하지 않은 경우도 있기 때문에 이미지 파일이 선택되지 않았다면 로컬에서 임포트 해 온 'defaultProfileImage'를 담아 요청을 보낼 계획이었습니다. 그러나 생각했던 것보다 다양한 이미지의 타입으로 인해 타입 오류가 발생하였습니다.로..

🐝 SSR(server side rendering)서버 사이드 렌더링은 사용자가 요청을 보낼 때마다 서버가 직접 렌더링을 마친 html 파일을 보내주는 방식입니다. 동작 과정은 다음과 같습니다.사용자가 웹 페이지에 접속하면 브라우저는 해당 url을 서버에게 요청합니다.서버는 받은 url을 기준으로 어떤 페이지를 렌더링할 지 결정합니다.서버에서 웹 페이지를 완성하고, 그 결과를 브라우저에게 응답으로 전달합니다.이후에는 클라이언트 사이드 렌더링(CSR)과 마찬가지로 브라우저는 받은 html 파일을 해석하여 DOM을 생성하고 hydration을 수행합니다.여기에서 중간에 있는 hydration이란 무엇일까요? 🐝 Hydrationhydration(하이드레이션)의 사전적인 의미는 '수분 공급', '수화'입니..

🌿 Next.js란next.js란 풀스택 웹 애플리케이션을 구축하기 위한 리액트 프레임워크로, 리액트를 더욱 강화하여 사용할 수 있게 한 리액트의 확장판이라고 할 수 있습니다.사용자 인터페이스를 구축하기 위해 리액트 컴포넌트를 사용하고, 추가 기능 및 최적화를 위해 페이지 라우팅과 빌트인 최적화 및 다양한 렌더링 전략을 제공합니다.아래에서 넥스트와 리액트를 비교하여 넥스트의 사용 이유에 대해 알아보겠습니다. 🌿 다양한 렌더링 전략리액트는 기본적으로 클라이언트 사이드 렌더링(CSR, client side rendering)으로 동작합니다.따라서 서버가 아닌 클라이언트인 브라우저에서 모든 것을 처리하기 때문에초기 접속 요청을 보내고, 사용자가 화면에 있는 콘텐츠와 상호작용 할 수 있기까지 어느 정도의 시..