![]()
참고자료 https://post.naver.com/viewer/postView.nhn?volumeNo=29116858&memberNo=10070839 https://velog.io/@diclfn42/Next.js-Shallow-routing-%EC%9D%B4%EB%9E%80 https://nextjs.org/docs/pages/building-your-application/routing/linking-and-navigating 시작하기 앞서 상태에 대한 부분들을 URL 값 파라미터에 반영되는 방식을 구현하고자 했다. 이렇게 했을 때 장점은 아래와 같다. 모든 사용자들의 동작들이 URL 파라미터로 기록된다. 그래서, 그 URL을 누군가에게 공유했을 때, 내가 보고있었던 페이지 그대로 볼 수 있을 것이다. ..
![]()
📄 참고자료 원본 게시글 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..
![]()
📄 참고자료 Toss 환경 고민없이 개발하기 📌 SSR Server Side Rendering 은 렌더링 일부를 서버에게 위임하는 방식 서버에서 HTML 을 생성하고 브라우저에게 보여준다 렌더링과정에 서버가 개입되면서 생소한 에러들을 경험할 수 있다. 그 중 하나를 소개해볼까 한다. 🤬 Server Error XXX is not defined. function App() { // 쿼리 파라미터로 전달받은 유저의 이름을 얻어온다. const name = new URL(location.href).searchParams.get(name); // 유저의 이름을 화면에 출력한다. return {name} } 쿼리파라미터로 전달받은 유저의 이름을 화면에 출력하는 코드이다. 코드를 살펴보면 문제없이 동작할 것 같지만..
