[FE] [email protected]를 [email protected] 으로 마이그레이션

[wzrabbit]

[FE] [email protected]를 [email protected] 로 마이그레이션

이슈번호

close #970

PR 내용

본 PR에서는 [email protected]를 [email protected] 로 마이그레이션하였으며, 마이그레이션을 위해 필요한 작업들을 같이 수행하였다.

참고자료

작업한 과정을, 크게 네 가지로 나누어서 설명해 볼게.

1️⃣ 라이브러리 설치 및 서비스워커 파일 생성

• 5240d26, 3ca53ee, 623c28b

1. [email protected]을 [email protected] 로 업데이트했고, msw-storybook-addon을 Breaking Changes가 있는 2버전으로 업데이트했어.
2. mockServiceWorker.js 파일을 생성했어.

Q. msw-storybook-addon은 왜 업데이트했는지?
A. [email protected] 와 peerDependencies 충돌이 있었어. 그래서 msw-storybook-addon 도 2버전으로 업그레이드했어.

2️⃣ 지금까지의 모킹 로직들을 마이그레이션

• 1bf533b

친절하게도 마이그레이션 가이드가 있었어! 다만 우리는 msw의 모든 기능을 사용하고 있던 것은 아니니, 실제로 사용한 부분만 공유해 줄게.

1. 서비스워커는 이제 msw가 아닌 msw/broswer 에서 import해, 그리고 우리가 매번 쓰던 rest 객체는 이제 http 객체로 바꿔야 해. 매번 단골마냥 쓰던 (req, res, ctx) 는 이제 쓰이지 않아. 이제 하나의 객체에서 프로퍼티를 빼내는 방식을 써.

• 🔗 링크
  

2. searchParams 의 사용법 변경

• 🔗 링크
  

3. 요청 시 보낸 body를 처리하는 방법 변경

• 이제 request.json 을 써야 해.
• 문제는 이렇게만 작성할 경우 TypeScript를 사용하는 환경에서는 타입 에러가 날 수 있는데, 후술할게
• 🔗 링크
  

4. params의 사용법 변경

• 🔗 링크
  

5. 응답 방법의 변경

• 응답에는 이제 res 대신 HttpResponse 객체를 사용해. 여러 방법이 있는데 나는 json 데이터를 응답하는 방법과 아닌 방법으로 나누어 마이그레이션 했어.

• json 데이터로 응답해야 하는 경우 -- HttpResponse의 static 메서드인 HttpResponse.json() 를 사용했어. static 메서드니 new 는 붙이지 않아. 아래는 사용 예시야.

// { myValue: 1 } json 데이터를 응답, status code는 200(명시되지 않았으므로)
return HttpResponse.json({ myValue: 1 });

// { myValue: 1 } json 데이터를 응답, status code는 404
return HttpResponse.json({ myValue: 1 }, { status: 404 });

// { myValue: 1 } json 데이터를 응답, status code는 404, 그리고 추가 헤더 사용
return HttpResponse.json(
  { myValue: 1 }, 
  { 
    status: 404,
    headers: { ... }
  }
);

• json 데이터로 응답하지 않는 경우 -- HttpResponse를 new 키워드를 이용해 생성하고, 그 생성한 객체를 그대로 쓰면 돼

// 'Hello World'를 응답, status code는 200(명시되지 않았으므로)
return new HttpResponse('Hello World');

// 아무 데이터도 응답하지 않음, status code는 201(명시되지 않았으므로)
return new HttpResponse(null, { status: 201 });

6. 딜레이를 주는 방법의 변경

• ctx.delay()는 사용하지 않아. 이제 delay 를 직접 msw에서 import하고 그대로 사용하면 돼.
• 🔗 링크
  

3️⃣ index.tsx를 수정해 setupWorker가 렌더링 전 실행하도록 변경

• c4eb6f1

이 작업을 수행해 주지 않았을 때 간헐적인 에러가 발생하면서 전반적인 모킹 프로세스가 제대로 동작하지 않는 문제가 있었어. 이 부분은 구글링을 해서 적절한 코드로 바꿨어.

4️⃣ response.json() 사용 후 반환된 객체에 대한 타입 에러 해결

• 8b6dac2
• 타입스크립트 마이그레이션 가이드 를 읽는 게 제일 좋을듯?

1버전에서는 res.json()의 반환값이 any 로 추론되어 에러 없이 로직을 구현할 수 있었어.

2버전에서는 그게 안 돼. DefaultBodyType 으로 추론돼.

따라서 이 문제를 해결해야 하는데, http 객체에는 제네릭을 사용할 수 있어서, 제네릭을 이용하면 response.json()의 타입을 narrow시킬 수 있어.

response.json()에 해당하는 타입은 두 번째 제네릭 파라미터로 오는지라, 이 경우 params에 대응하는 첫 번째 파라미터를 사용해야 했는데, param을 사용하는 경우에는 사용처가 많지 않아 타입을 하드코딩했고, 사용되지 않는 경우 never 타입으로 지정해줬어.

설명은 여기까지야. 최대한 같이 따라가려고 자세히 적어보았고, 이해 안 되는 거 있으면 적어줘~ 화이팅!

[wzrabbit]

현재 아래의 문제가 발생하고 있어. 이 에러는 브라우저에 팀바팀 탭을 2개 이상 띄울 경우 그 이후부터 매 새로고침마다 에러가 발생해

에러 자체는 로직에 큰 영향을 주지 않는 것으로 보이고, 이에 따라 이 창을 닫고 계속 디버깅을 진행한다면 모킹은 여전히 가능한 것으로 보여, 하지만 많이 거슬리는 것이 사실이고 완성도도 떨어져 보일 것 같아

안타깝게도 이 에러는 이슈만 있을 뿐, 공인된 해결 방법이 나오지 않은 것 같아.

• 'Cannot read properties of undefined (reading 'url')' when multiple browser tabs are open mswjs/msw#2146

[email protected] 이하에서는 이 에러가 발생하지 않아 [email protected] 로 마이그레이션하려는 시도도 해 보았는데, 그럴 수는 없는 것이 우리가 msw를 굳이 2 버전으로 마이그레이션 시킨 가장 큰 이유가 웹소켓을 모킹하기 위해서인데 웹소켓은 [email protected] 부터 사용이 가능해

일단 지금 작업 시점은 상기의 에러가 발생하는 상황이야

[hafnium1923]

아이고 작업량 많은거 봐 고생했슈!! 에러 관련한건 뭐 msw쪽에서도 지속적으로 업데이트 해둘거니까 상황 지켜보다가 한번 더 업그레이드 하자! 어차피 메인 버전이 바뀌는거 아니면 기존 사용하던 문법이 잘못될일도 없으니까. 수고많았어!!! 나도 1월1일부터 빠르게 작업해볼게..ㅠㅠ