16 에 대한 구현작업을 진행했습니다.

작업내용

기존 assets폴더에서 필요한 데이터를 객체로 불러와서 사용하던 부분을 테스트 API를 이용해서 구현하는 방법으로 대체하기 위해 작업했습니다.

[x] MSW 2.2.1 버전을 설치하고 /api/membership-information 의 요청에 대해 데이터를 반환하도록 구현했습니다.
[x] 기존 방식을 사용하고 있던 컴포넌트들을 테스트API를 사용하도록 수정했습니다.

문제 및 해결

MSW 2 버전의 Next.js App router 미지원 문제

MSW이 Next.js의 App router 방식을 아직 완벽하게 지원하지 않아서 @mswjs/http-middleware를 사용해서 테스트용 express 서버를 따로 실행하는 방법을 사용해서 구현했습니다. 테스트용 서버를 만들지 않고 사용하는 방법은 예제를 참고했지만 왜인지 RSC로 구현한 컴포넌트도 RCC 컴포넌트처럼 초기에 로딩이 되지 않아서 1번 방법으로 진행했습니다.

JSON.Parse 오류

정상적으로 구현했는데 계속 json의 parse 에러가 나는 문제가 있었습니다. msw에서 전달되는 데이터가 짤려서 들어오는 현상을 확인했고 해당 현상이 mock 데이터에 한글이 포함되면 일어나는 것까지 확인했습니다.

위 이슈들에서 비슷한 내용을 찾을 수 있었는데 '한글'이 포함되면 content-length이 다르게 측정되는 문제는 해결이 되지 않은 상태인걸 확인할 수 있었습니다.

따라서 전달하려는 객체를 JSON.stringify로 JSON 문자열로 변환하고 new TextEncoder().encode().byteLength로 정확한 Content-Length의 길이를 header에 전달하는 방법으로 오류를 해결했습니다.

WonhyeongLee / lwh-membership-page

[Feat] MSW의 테스트API를 사용해서 구현하도록 추가 #17

16 에 대한 구현작업을 진행했습니다.

작업내용

문제 및 해결

MSW 2 버전의 Next.js App router 미지원 문제

JSON.Parse 오류