시작하며..."우주윗미" 프로젝트 개발을 다 마치고 리팩토링 기간 때, Lighthouse 를 돌려봤는데 74, 64 라는 처참한 결과가 나왔다 😅 오히려 좋아 웹 사이트의 성능을 개선할 수 있는 좋은 기회인데 완전 럭키비키자낭~🤭🍀 그래서 성능을 개선하기 위해 적용한 내용이나 수정한 내용에 대한 여정을 글로 작성하게 되었다. (참고로 dev 환경 아니고 빌드환경에서 시크릿 모드창을 켜서 Lighthouse 돌렸다.) 자유게시판 페이지 - 성능 개선하기 📈1. 데이터 패칭 CSR → SSR 로 변경CSR 은 브라우저에서 자바스크립트가 실행돼야 페이지에 내용이 렌더링이 되는 방식이다. 그래서 초기 로딩 시간이 길다. 반면 SSR 은 서버에서 HTML 을 완성하여 클라이언트한테 전달하는 방식으로 서버..

시작하며...이번 프로젝트에서 Next.js App Router 를 사용하면서 TanStack Query 를 사용하기로 했다. 그런데 Next.js 에서는 데이터 패칭을 할 땐 Server Sider Rendering 을 사용하는데 이걸 TanStack query 와 함께 사용하는 방법이 없을까? 하고 찾아보다가 공식문서에서 이에 관한 내용을 발견하였다. Advanced Server Rendering | TanStack Query React DocsWelcome to the Advanced Server Rendering guide, where you will learn all about using React Query with streaming, Server Components and the Next.j..

시작하며...게시물 수정 페이지 같은 경우 해당 게시글을 작성한 사용자만 수정이 가능하다. 그래서 작성자에게만 수정 버튼이  렌더링 되지만 만약 그렇지 않은 사용자가 주소창을 통해 강제로 수정 페이지로 이동하였을 때, 해당 게시글의 작성자가 아니면 접근을 하지 못하게 막아야 된다. Next.js Server Side Rendering 에서 이를 구현하는 방법에 대해 알아볼 것이다. 구현 방식현재 로그인한 유저의 user id 와 게시물을 작성한 user id 를 비교해서, 다르면 not found 페이지로 이동시킨다. 로컬 스토리지서버 사이드 렌더링은 서버에서 페이지를 렌더링하며, 브라우저 API 인 document, window 등 객체에 접근할 수 없다. 그래서 로컬 스토리지 같은 경우 브라우저에서 ..

시작하며...현재 프로젝트의 상태 관리 라이브러리로 Zustand 를 사용하기로 했다.사용하기 간편한 상태 관리 라이브러리 중에서 꾸준히 업데이트되면서 다운로드 수가 많은 Zustand 를 선택하게 되었다.  내용이 좀 빈약하지만 블로그에 간단하게 Zustand 를 사용하는 방법에 대해 글을 작성했었다.https://jjang-j.tistory.com/57 [React] Zustand 상태 관리 라이브러리 사용 방법시작하며...React 에서 다른 컴포넌트로 데이터를 전달하기 위해 props 를 사용한다.그러나 React 의 상태인 state 는 자식 컴포넌트한테만 전달할 수 있어 만약 컴포넌트가 많고 잘 분리되어 있을 경jjang-j.tistory.com persist 사용하게 된 이유아래 코드와 같이..