이번 프로젝트의 클라이언트 상태관리는 zustand로 결정 (스테픈 2km완료)

in sct-kr •  3 months ago 

와이프의 아이디어를 받아 대강 ui를 정했네요

이런느낌으로 만들고

image.png

여기에 맞게 내용을 채워넣을 생각입니다.

image.png

타입 지정중에 partial 타입을 처음 사용해봤는데요

이전에 옵션으로 반복시켰던것과 내부가 동일하게 작성되어있군요?

내부 키가 있어도 되고 없어도 되는 형식을 뜻하는데

생각보다 유용한 타입입니다.

image.png

일단 이런 형태로 만들긴 했는데

api를 만들어서 서버에서 데이터를 입출력 받는 방식으로

변경해야하긴 한다.

여기에 react-query 도입이 안되어있는데

이것도 추가하고..

클라이언트 상태값도 관리해야해서

이번 프로젝트에는 zustand로 만들까 생각중이다

다만 zustand 를 next.에서 사용하는건 이번이 처음인데

기존처럼 persist 와 함께 사용할 생각인데

어떤 문제가 발생할지 모르니 일단 사용해봐야겠다.

image.png

오랜만에 설치하려니 또다시 공식문서를 참고했다.

image.png

읽어보니 persist도 지원한다고 쓰여잇는 부분을 찾았다.

next에서 사용하려면 필수로 설치하는게 좋을듯 하다.

image.png

타입스크립트를 활용해서 사용하는 부분도 있다.

일단 설치하고 세팅부터 해야할듯하다.

image.png

스토어를 만들고

스토어를 호출했는데 오류가 발생했다.

image.png

스토어를 use client 컴포넌트에서만 사용이 가능하다는 뜻으로 보이는데

서버에서 store를 쓸수 없으니 당연한 이야기 같다.

이 부분을 좀 수정해야할듯하다.


스테픈 2km완료

image.png

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE BLURT!