joycie416 님의 블로그

애플리케이션을 만들다보면 전역 상태를 관리해야 할 때가 있다. Prop drilling을 피하기 위해서는 전역 상태로 관리하는 것이 편하다. 오늘 비교해볼 새 클라이언트 상태 관리 도구인 Recoil, Jotai, Zustand는 기본적으로 React와 사용할 것을 전제로해 호환이 잘 된다. Redux는 유명하고, 이미 redux-toolkit을 정리한 적이 있기 때문에 생략하려고 한다. Zustand 또한 이전에 Next.js와 사용하는 방법을 정리했으므로 생략한다.  각 상태 관리 라이브러리를 사용해 count를 관리하는 샘플 애플리케이션을 만들어 보았으니 하나하나 따라하면서 하기 번거롭다면 clone해서 사용해도 좋다. GitHub - joycie416/recoil_jotai_zustand: Pra..

애플리케이션을 만들다보면 전역 상태를 관리해야 할 때가 있다. Prop drilling을 피하기 위해서는 전역 상태로 관리하는 것이 편하다. 오늘 비교해볼 새 클라이언트 상태 관리 도구인 Recoil, Jotai, Zustand는 기본적으로 React와 사용할 것을 전제로해 호환이 잘 된다. Redux는 유명하고, 이미 redux-toolkit을 정리한 적이 있기 때문에 생략하려고 한다. Zustand 또한 이전에 Next.js와 사용하는 방법을 정리했으므로 생략한다. 각 상태 관리 라이브러리를 사용해 count를 관리하는 샘플 애플리케이션을 만들어 보았으니 하나하나 따라하면서 하기 번거롭다면 clone해서 사용해도 좋다. GitHub - joycie416/recoil_jotai_zustand: Prac..

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개 공연을 보여준다. 이를 위해서 먼저 공연 정보를 불러와야 한다. 처음에는 캐러셀을 위한 컴포넌트와 하단 장르별 데이터를..