명절 후 폭풍

클럽 99 Next.js 스터디 4주차 현황

( ...이라하고 트러블 모음집이라고 부르기 ) 

 

명절 기간에 많이 뒤쳐진 것 같아서 따라잡으려고 달렸는데, 다들 비슷했나보다. 인원이 작기도 한데, 지금 진도율에 1등이라니이 확실히 상태관리 내용이 나오니앞 주차보다 진도가 뎌디다. 4주차 강의는 바로 이해가 안되어서 여러번 돌려보았다. 이번 스터디 강사님은 설명할 때 같은 개념을 다른 말로 여러 번 끊어서 말하는 스타일인데 처음에는 귀에 쏙쏙 들어온다는 생각했는데, 뒤로 갈 수록 오히려 흐름도 같이 끊기는 느낌이었다 ㅠㅠ 

 

4주차 강의 중 Zustand 로 next에서 상태관리하는 법 강의 듣고 있다. 넥스트에서 서버 컴포넌트와 클라이언트 컴포넌트를 구분하는 방식이 너무 좋아보였다. 유지관리하기 훨씬 깔끔해진 느낌? 이전부터 리액트 프로젝트를 하면서 비동기로 서버에 요청을 보내는 코드를 분리하고 싶다는 생각을 계속 했었다. 리액트 프로젝트 때도 Zustand로 상태관리를 하였지만 쓰는 방법은 명확히 못 익혔던 느낌이라 이번에야 말로 완전히 익히자는 마음을 잡고 실습했다.

 

근데 실습 따라가보니 문제는 서버/클라이언트 컴포넌트 분리해서 다루는 것이었다. ZustandProvider를 쓸 때는 'use client'를 명시하고 비동기 요청을 보내는 코드를작성할 수 있었다. 근데 해당 코드를 가져와서 쓰는 클라이언트 컴포넌트에서 아래 에러가 발생했다.

async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding `'use client'` to a module that was originally written for the server.

The above error occurred in the <CartPage> component. It was handled by the <ReactDevOverlay> error boundary.

 

해당 에러인데 분명 Provider로 감싸면 children안에서 렌더링되는 컴포넌트는 클라이언트 컴포넌트로 사용 가능하다했는데, 뭐가 문제인지 콘솔에러에서 명시된 CartPage말고도 'use client'가 명시된 페이지를 하나씩 주석을 쳐가며 확인했다.

 

 

오늘 에러 다 잡고 잔다 ㅠㅠ

[ Server ] TypeError: Cannot read properties of undefined (reading 'amount')