[공통] 검색 API 모킹

[kimeodml]

[#110 ] request

• msw를 활용해 shops/ api 모킹 했습니다.
• 추가적으로 검색의 useSearchForm을 전역 상태 관리로 변경하여 검색쪽 코드를 조금 수정했습니다.
• 그 외에 불필요한 console.log 및 주석 제거했습니다.

Please check if the PR fulfills these requirements

• It's submitted to develop branch, not the main branch
• The commit message follows our guidelines
• There are no warning message when you run yarn lint
• Docs updated for breaking changes

Screenshot

[D0Dam]

안녕하세요! 대의님은 거의 처음 리뷰해 보는 것 같네요! ㅎㅎ

msw가 도입되기로 했었나요..? 험험.. 제가 오기 전에 이야기가 나왔었나보네요.🙃
물론 msw 대환영입니다! 저도 msw 이 참에 적용해 놔야겠어요! ㅎㅎ

msw 2.0 버전을 사용해 주셨네요! 정말 최신걸 사용해 주셨네요. 덕분에 저도 한 번 더 되짚어보고 갑니다!
뭔가 노드 버전 올린것도 msw 때문일까요? 아무튼.. msw 로직 관련해서 리뷰 남겨 놓았습니다! 확인 부탁드려요~!

[D0Dam]

1. mocking 된 api 이기 때문에 앞에 굳어 API_PATH 를 명시해주지 않아도 될 것 같습니다.
2. assertion 보다는 제네릭을 사용해 보면 좋을 것 같네요!
3. 제네릭을 쓰면 PathParams 도 명시해 줄 수 있답니다!

Suggested change

	http.post(`${API_PATH}/shops`, async ({ request }) => {
	const body = await request.json() as RequestBody;
	interface PathParams {
	keyword: string;
	}
	... // 중략
	http.post<PathParams, RequestBody>('/shops', async ({ request }) => {
	const body = await request.json();

[kimeodml]

이 부분 경로를 API_PATH로 명시해 주지 않으면 Service Worker랑 서버 api랑 동시에 발생돼서 수정하지 못 했습니다. 혹시 이유가 뭔지 알 수 있을까요...?

[D0Dam]

음... 우선 지금 axios.create 를 사용해서 API_PATH를 base url 로 받고 있는게 문제 같네요. 그래서 상대 경로가 안먹히는 것 같습니다 ㅠㅜ 확인 해보고 남겨둘 걸 그랬네요..🥲
전용 MSW 환경이 없어서 지금 API_PATH 를 위에서 지워버리게 되면 msw handler에서는 가로채지만, axios.create 로 만들어진 새 요청이 생겨버려요.
msw 환경을 이제 별도로 둘 수 있다고 하면 msw 환경에서는 API_PATH 를 '/' 로 두고 제가 전 코멘트에서 말한것처럼 삭제하고 쓰면 됩니다.

그런데 지금 문제가.. msw 코드가 이것 밖에 없다보니 절대 경로를 명시해줄 수 밖에 없는 것 같네요..
그래서 msw 전용으로 axios create 해 두는것도 좋을 것 같고, 우선 대의님이 기존에 하신대로 진행해도 괜찮을 것 같아요!
아래 예시도 첨부합니다.

[D0Dam]

혹시 search text 를 전역 상태로 분리한 이유를 들어 볼 수 있을까요?

[kimeodml]

이전 코드에서 useSearchForm을 여러 파일에서 호출하거나 props로 넘겨준 컴포넌트에서 또 호출하는지 등 재사용성이 있을 것 같아서 전역 상태 관리로 변경했습니다.

[D0Dam]

아하! 그렇군요. 설명 감사합니다~!

[kimeodml]

@D0Dam 요거 노드 버전을 올려도 계속 오류가 나는 것 같은데 다시 낮추는 게 나을까요?

[MinGu-Jeong]

@kimeodml CI로 등록되어있는 Github Action workflow파일을 수정하면 될 것 같아요! 지금 16버전 쓰고있네여 😄

[D0Dam]

밑에 민구 형님 말씀대로 가면 될 것 같습니다 ㅎㅎ

[D0Dam]

잘 반영해 주셔서 감사합니다~! 코멘트 다시 남긴것만 확인 부탁드려요~!

[D0Dam]

음... 우선 지금 axios.create 를 사용해서 API_PATH를 base url 로 받고 있는게 문제 같네요. 그래서 상대 경로가 안먹히는 것 같습니다 ㅠㅜ 확인 해보고 남겨둘 걸 그랬네요..🥲
전용 MSW 환경이 없어서 지금 API_PATH 를 위에서 지워버리게 되면 msw handler에서는 가로채지만, axios.create 로 만들어진 새 요청이 생겨버려요.
msw 환경을 이제 별도로 둘 수 있다고 하면 msw 환경에서는 API_PATH 를 '/' 로 두고 제가 전 코멘트에서 말한것처럼 삭제하고 쓰면 됩니다.

그런데 지금 문제가.. msw 코드가 이것 밖에 없다보니 절대 경로를 명시해줄 수 밖에 없는 것 같네요..
그래서 msw 전용으로 axios create 해 두는것도 좋을 것 같고, 우선 대의님이 기존에 하신대로 진행해도 괜찮을 것 같아요!
아래 예시도 첨부합니다.

[D0Dam]

아하! 그렇군요. 설명 감사합니다~!

[kimeodml]

오호! 친절한 설명 감사합니다! 기존 코드로 진행하겠습니다.

[D0Dam]

@kimeodml
오호... 제 환경에서는 lint가 안뜨는데 ci를 할 때는 계속 lint 에러가 뜨네요.
확인을 좀 더 해보니까 eslint 버전이 해당 플러그인하고 맞지 않을 때 이런 에러가 뜬다고 해요.
혹시 eslint 버전을 올리고 플러그인 삭제 후 다시 깔아보는 게 어떨까요??