joycie416 님의 블로그

Zustand 공식 문서를 확인하면 Next.js와 같이 사용하는 방법에 대해 별도로 안내하고 있다. 이를 확인하면 React의 Context API와 함께 사용하라고 하는데, 그 이유가 무엇일까? 이에 대해 정리한 후, 실제 사용방법에 대해 정리하려고 한다. 1. Next.js의 SSR과 zustand storeNext.js는 서버와 클라이언트 측에서 모두 실행되므로, 전역 변수의 동작이 zustand의 가정과 다르다. 즉 zustand는 하나의 store에서 모든 상태를 관리하지만, Next.js는 서버와 클라이언트 상태가 분리될 수 있다는 것이다. 그래서 Next.js 서버의 상태를 클라이언트와 공유하기 위해서 별도의 과정이 필요하다. 이때 아래 상황들을 고려해야 한다. 1. Per-request ..

추석 연휴를 제외하고 약 일주일간 아웃소싱 프로젝트를 진행했다. 우리 팀은 각종 공연 정보를 제공하고, 공연에 대한 간략한 글과 공연에 대한 후기를 작성할 수 있는 사이트를 만들었다. 처음에 공연 정보를 불러오기 위해 공공 api인 KOPIS API를 사용하기 위해 엄청 고군분투했다. CORS 오류가 생겨 데이터가 불러와지지 않았고 우리는 결국 확장 프로그램을 이용해 임시로 해결하여 진행했다. 먼저 우리 조는 인터파크 티켓에서 큰 디자인을 차용해왔다. 1. 메인 페이지메인 페이지에서는 오늘 진행 중인 공연에 대해서 KOPIS에 등록된 순서대로 공연을 나열하면서 캐러셀로 랜덤 선택된 8개 공연을 보여준다. 이를 위해서 먼저 공연 정보를 불러와야 한다. 처음에는 캐러셀을 위한 컴포넌트와 하단 장르별 데이터를..