Chunho’s DevLife

Next/Image를 사용하여 이미지 최적화를 하기위해 Next.js로 프로젝트를 진행하고 있지만, 게임 특성 상 Loaing  상태일 경우 loading indicator가 보여지는게 더 적합할 것 같아 프로젝트 전체적으로 CSR을 사용하고 있었다. 이 때, 적합한 페이지는 SSR을 적용해봐도 좋지 않을까 고민하다 상점 페이지에 SSR을 적용해본 뒤 CSR을 했을때와 어느정도의 성능 차이가 있고, 어떤 방식이 더 효율적일지 테스트를 해봐야겠다고 생각했다. 상점은 API에서 특히 더 많은 양의 데이터를 받고 있으며 렌더되는 이미지의 양도 많았다. 우선 React-Query를 사용하고 있는 환경에서 SSR을 적용하기 위해 공식문서에 나와있는 대로 SSR을 위한 초기 설정을 해주었다.https://tanst..

학부시절 처음 React로 프로젝트를 진행할 때 디자인 패턴에 대해 정확하게 인지하지 못하고 있었다. 그 때 당시 잡았던 구조와 작성했던 코드를 다시 보면 딱히 디자인 패턴이라고 할 만한 부분이 없었지만 굳이 정하자면 MVC 패턴에 가까웠던 것 같다... 서버 상태 관리 또한 이루어지지 않고 있던 상태였다. MVC 패턴의 경우 프로젝트의 규모가 커지거나 복잡해질수록 컨트롤러가 비대해진다는 문제가 있었다. 이후 어느정도 여러가지 부분들에 대한 개념이 잡힌 후 Redux, Context API를 사용하여 전역 상태 관리와 서버 상태 관리를 하며, Flux 패턴을 사용하여 당시의 프로젝트들을 진행했다. Action -> Dispathcer -> store -> view 위와 같이 단방향으로 데이터가 흘러갔기에..

NextJS 환경에서 Google Analytics는 다음과 같이 적용할 수 있다. 1. lib폴더에 gtag.js 파일을 생성한다. export const GA_TRACKING_ID = `${process.env.NEXT_PUBLIC_GA_TRACKING_ID}` // https://developers.google.com/analytics/devguides/collection/gtagjs/pages export const pageview = (url) => { window.gtag('config', GA_TRACKING_ID, { page_path: url }) } // https://developers.google.com/analytics/devguides/collection/gtagjs/events..

NextJS에서 SSR을 하는 중, 서버사이드에서 데이터를 받아올 때 url에 있는 id값을 사용해 서버에 요청을 해야했다. 이 때 getServerSideProps가 제공하는 context 파라미터를 사용하여 query 정보를 가져올 수 있었다. context 파라미터에는 query 데이터를 제외하고도 여러가지 정보가 포함되어 있다. url에 있는 query를 가져오기 위해서는 context.query를 사용하면 된다. export async function getServerSideProps(context: GetServerSidePropsContext) { const cookie = getServerSidePropsUserCookie(context) const props: IProps = { data..

최근 NextJS로 SSR을 적용한 회사 프로젝트를 진행하며, Session 인증 방식을 사용하여 로그인을 할 때, 클라이언트에 쿠키 정보가 저장되지 않아 getServerSideProps 함수를 사용하여 SSR를 할때 문제가 생기는 Issue가 있었다. [문제 발생] API 호출시 사용자 로그인 여부 확인 불가 (클라이언트에 쿠기값이 없음) getServerSideProps 사용자 정보가 필요한 API 호출시 사용자 정보 없음 -> 오류 -> 특정 정보 안내려옴 / 클라이언트쪽에서만 호출 가능 [문제 원인 파악] 문제 1. 클라이언트에서 api 호출시 브라우저에 저장된 쿠키 정보를 자동으로 가져와서 넣어준다. (withCredentials) -> getServerSideProps는 서버측에서 실행되므로..