[TASK-43] setting: MSW 설정 추가 및 axios client 추가 #8

SangWoo9734 · 2024-12-16T02:42:08Z

📝 작업 내용

MSW 사용을 위한 세팅이 추가되었습니다.
API 요청에 활용할 axios client를 추가하였습니다.

public/mockServiceWorker 의 경우 init CLI로 작성된 파일이기 때문에 리뷰할때 참고 바랍니다.
handler 내 추가되어 있는 코드는 해당 스크린샷에 사용된 로직으로 참고 부탁드리며, 이후 충돌이 걱정 되시면 삭제 요청 부탁드립니다.

📸 스크린샷

현재 구현해둔 이메일 유효성 검사 api로 테스트한 결과입니다.

💬 리뷰 요구사항

axios client 관련해서 리뷰 부탁드립니다!
api 사용관련해서 앞으로 쓸 것 같아 이번 PR에 포함시켰습니다..! 부적절한 것 같다고 하시면 리뷰 후 제거해서 pr 올리겠습니다!

dahyeo-n

mocks 폴더 내 파일들은 리뷰 패스했습니다!
달리 제가 알아야 하는 것이 있거나 리뷰가 필요한 부분이 있으시면 얘기해주셔요 :)

dahyeo-n · 2024-12-16T14:25:46Z

public/mockServiceWorker.js

예시로 올려주신 거라면 그래도 PR 올리셔도 좋을 것 같아요! API 작업할 때 참고하겠습니다 :)

dahyeo-n · 2024-12-16T14:32:22Z

src/app/providers/MSWProvider.tsx

NextUI는 다른 Provider처럼 작성해야 하는 코드가 긴 건 아니라서 AppShell.tsx 에 아래와 같이 직접적으로 주입해줬습니다.

이번 PR에서 MSWProviders.tsx의 주입으로 providers 폴더가 새로 생겼는데, NextUI Provider도 따로 빼는 게 좋다고 생각하시는지 궁금합니다 :)

MSWProvider 만 이번에 추가되긴했는데 이후 oauth 관련해서 또 provider가 추가되는 것들이 있었습니다.
provider를 원래 컴포넌트에서 관리할까 하다가 생각보다 종류가 다양해지는 느낌이라 provider 폴더를 따로 두었습니다..!
NextUI도 provider의 성격이 강하면 provider로 분리해도 좋다고 생각합니다!

설명 감사해요 :)
음.. 그럼 이번에 올린 commit 저 상태 그대로인데, 따로 빼야 할지 좀 더 고민해보고 빼야 할 것 같으면 다음 PR에 반영하겠습니다!

dahyeo-n · 2024-12-16T14:37:26Z

src/app/providers/MSWProvider.tsx

+
+import { ReactNode, useEffect, useState } from 'react';
+
+export default function MSWProvider({ children }: { children: ReactNode }) {


크게 중요한 건 아니지만 rafce 로 함수 코드 스니펫을 통일하기로 했었는데, 이 코드처럼 진행하는 게 편하실까요? 🤔 궁금해서 여쭤봅니당

통일하는 거라면 ReactQueryProvider.tsx 도 반영해서 수정해야 하고, 다른 것도 rafce 에 맞게 적용돼 있는지 확인봐야 할 것 같아요. <메인 페이지>도 rafce 로 작성 안 돼있어서 다음 PR 올릴 때 반영하려고 수정해두었습니다!

아 저희 통일하기로 한 부분이 있으니 그렇게 변경하겠습니다! 우선 MSWProvider에 대해서 만 수정하겠습니다!

dahyeo-n · 2024-12-16T14:38:55Z

src/app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import React from 'react';
 import '../styles/globals.css';
 import ReactQueryProvider from './ReactQueryProvider';
+import MSWProvider from './providers/MSWProvider';


import 띄어쓰기 반영 안 되는 게 아직도 맘 아프네요,,, import 구문 종류에 맞춰 띄어쓰기 한 번 부탁드립니당

제 vscode 로컬 옵션이랑 충돌이 뭔가 있는건지... import 정렬은 되는 것 같은데... 제 설정값 한번 확인하겠습니다.!

dahyeo-n · 2024-12-16T14:41:20Z

src/app/layout.tsx

@@ -16,7 +17,9 @@ export default function RootLayout({
  return (
    <html lang="ko">


헉 .prettierrc 에 "jsxSingleQuote": true, 반영이 안 된 것 같습니다.
많은 파일의 충돌을 피하기 위해 반영해서 PR 부탁드려요..!

dahyeo-n · 2024-12-16T14:43:22Z

src/app/providers/MSWProvider.tsx

+import { ReactNode, useEffect, useState } from 'react';
+
+export default function MSWProvider({ children }: { children: ReactNode }) {
+  const [mswReady, setMswReady] = useState(false);


그냥 넘어갈 수 있는 부분이긴 한데, 요기 한 칸 띄어쓰기 ㅎ.. 부탁드립니다

const [ mswReady, setMswReady ] = useState(false); 이렇게 일까요?

엇 그게 뭔가요? 코드 그대로 복사 붙여넣기 해주신 걸로 보여요
저는 useState 코드와 useEffect 코드 사이의 한 줄 띄어쓰기를 의미한 거였어요 :)

아ㅋㅋㅋㅋ 저는 대괄호랑 mswReady 사이에도 한칸띄워야하는지 여쭤봤습니다 ㅎㅎ 말씀하신 부분은 빈줄 추가해두었습니다!

dahyeo-n · 2024-12-16T14:45:08Z

src/app/providers/MSWProvider.tsx

+      init();
+    }
+  }, [mswReady]);
+  return <>{children}</>;


그냥 넘어갈 수 있는 부분이긴 한데, 요기 한 칸 띄어쓰기 ㅎ.. 부탁드립니다 22,,

dahyeo-n · 2024-12-16T15:04:26Z

src/apis/index.ts

+import axios from 'axios';
+
+const defaultClient = axios.create({
+  baseURL: process.env.NEXT_PUBLIC_API_BASE_URL,


NEXT_PUBLIC_API_BASE_URL 은 추후에 저에게도 따로 공유 부탁드려요 :)

이부분은 아래 노션 문서에서 공유드리겠습니다!

https://www.notion.so/13be6db7d47045948ffbbba27f43f1fe

dahyeo-n

답글 추가했습니다 :)

dahyeo-n · 2024-12-17T09:36:13Z

src/app/providers/MSWProvider.tsx

설명 감사해요 :)
음.. 그럼 이번에 올린 commit 저 상태 그대로인데, 따로 빼야 할지 좀 더 고민해보고 빼야 할 것 같으면 다음 PR에 반영하겠습니다!

dahyeo-n · 2024-12-17T09:38:36Z

src/app/providers/MSWProvider.tsx

+import { ReactNode, useEffect, useState } from 'react';
+
+export default function MSWProvider({ children }: { children: ReactNode }) {
+  const [mswReady, setMswReady] = useState(false);


엇 그게 뭔가요? 코드 그대로 복사 붙여넣기 해주신 걸로 보여요
저는 useState 코드와 useEffect 코드 사이의 한 줄 띄어쓰기를 의미한 거였어요 :)

SangWoo9734 added 2 commits December 16, 2024 11:32

setting : MSW 사용 관련 환경 세팅

3f917a6

feat: axios client 추가

ae4a684

SangWoo9734 requested a review from dahyeo-n December 16, 2024 02:42

SangWoo9734 self-assigned this Dec 16, 2024

setting : MSW 버전 수정

7edc7a2

dahyeo-n reviewed Dec 16, 2024

View reviewed changes

SangWoo9734 added 2 commits December 17, 2024 18:05

chore: 따옴표 수정

5b0921f

chore: 컴포넌트 함수 포멧 수정

3b5caba

dahyeo-n reviewed Dec 17, 2024

View reviewed changes

SangWoo9734 and others added 3 commits December 17, 2024 20:19

docs: auto_labeling.yml 추가

132ba7f

setting : MSW 버전 수정

355d124

chore: Import 구분 공백 추가

0b95acc

dahyeo-n approved these changes Dec 17, 2024

View reviewed changes

setting : MSW 버전 수정 2.6.9 -> 2.7.0

81aeb04

SangWoo9734 merged commit 5d424d2 into dev Dec 18, 2024
0 of 2 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[TASK-43] setting: MSW 설정 추가 및 axios client 추가 #8

[TASK-43] setting: MSW 설정 추가 및 axios client 추가 #8

SangWoo9734 commented Dec 16, 2024

dahyeo-n left a comment

dahyeo-n Dec 16, 2024

dahyeo-n Dec 16, 2024

SangWoo9734 Dec 17, 2024

dahyeo-n Dec 17, 2024

dahyeo-n Dec 16, 2024

SangWoo9734 Dec 17, 2024

dahyeo-n Dec 16, 2024

SangWoo9734 Dec 17, 2024

dahyeo-n Dec 16, 2024

dahyeo-n Dec 16, 2024

SangWoo9734 Dec 17, 2024

dahyeo-n Dec 17, 2024

SangWoo9734 Dec 17, 2024

dahyeo-n Dec 16, 2024

dahyeo-n Dec 16, 2024

SangWoo9734 Dec 17, 2024

dahyeo-n left a comment

dahyeo-n Dec 17, 2024

dahyeo-n Dec 17, 2024


		import { ReactNode, useEffect, useState } from 'react';

		export default function MSWProvider({ children }: { children: ReactNode }) {

		@@ -16,7 +17,9 @@ export default function RootLayout({
		return (
		<html lang="ko">

[TASK-43] setting: MSW 설정 추가 및 axios client 추가 #8

[TASK-43] setting: MSW 설정 추가 및 axios client 추가 #8

Conversation

SangWoo9734 commented Dec 16, 2024

📝 작업 내용

📸 스크린샷

💬 리뷰 요구사항

dahyeo-n left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dahyeo-n left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment