Redux와 함께 서버 작업을 위한 msw 설치

지난 수업에서 우리는 애플리케이션에 몇 가지 추가 변경 사항을 만들었습니다. 이제 애플리케이션이 데이터를 교환할 서버를 다루어야 합니다.

실제 서버는 없을 것이므로, 우리는 멋진 도구인 Mock Service Worker를 사용하여 그것의 작동을 시뮬레이션하기만 하면 됩니다. Mock Service Worker (MSW)는 네트워크 수준에서 요청을 가로채도록 설계된 표준화된 Service Worker API를 사용하는 API 모킹을 위한 도구입니다. MSW는 우리의 요청(requests)에 대해 모의 응답(responses)을 생성할 것입니다. 게다가, 개발자들이 주장하듯이, 이 도구는 매우 효과적이고 유연해서 (애플리케이션에서 특별히 생성할 필요가 없는) 목(mock)으로 디버깅한 후, 애플리케이션을 이미 실제 외부 서버와 함께 작업하도록 배포할 수 있습니다. 이에 대한 문서는 상당히 광범위하며, MSW에 관심이 생기면 공식 웹사이트에서 읽어볼 수 있습니다.

이제 msw 설치로 넘어가겠습니다. 이를 위해 제품 프로젝트를 열고 터미널에 다음을 입력하세요:

npm install msw --save-dev

msw가 작동하려면 또한 mockServiceWorker.js를 생성하고 공개 디렉토리로 복사해야 합니다. 종종 이것은 public 폴더입니다. 우리에게는 빈 폴더 public가 있으니, 거기에 복사해 넣겠습니다. 이렇게 하려면 터미널에서 명령을 실행한 후 public 사용에 동의하세요:

npx msw init public

이제 public를 살펴보면, 생성된 스크립트 mockServiceWorker.js가 나타나 있어야 합니다. 이제 제품 애플리케이션을 실행하고 브라우저 주소 표시줄에 http://localhost:5173/mockServiceWorker.js를 입력하세요 (우리 애플리케이션이 5173 포트에서 실행 중이므로). 브라우저 창에 mockServiceWorker.js 파일 내용이 표시되나요? 그렇다면 훌륭합니다, 계속 진행하겠습니다.

다음으로 src 폴더 안에 api 폴더를 생성하고, 그 안에 서버 코드를 작성할 server.js 파일을 만들겠습니다. 이제 server.js를 열고 설치된 msw 라이브러리에서 setupWorker 함수를 가져오겠습니다:

import { setupWorker } from 'msw/browser'

파일 아래에서 worker 변수를 생성하고 내보내겠습니다:

export const worker = setupWorker()

이제 main.jsx 파일을 열고 우리의 워커를 가져오겠습니다:

import { worker } from './api/server'

이제 그것을 우리 애플리케이션에 연결하겠습니다. 이를 위해 React 애플리케이션의 루트를 생성하는 코드를 함수로 감싸고, 그것을 main이라고 부르며, 첫 번째 줄에 워커 시작 함수를 추가하겠습니다. 물론 main 자체를 호출하는 것을 잊지 않겠습니다. 모든 가져오기 줄 이후의 전체 코드는 이제 다음과 같이 보일 것입니다:

async function main() {
	await worker.start({ onUnhandledRequest: 'bypass' })

	ReactDOM.createRoot(document.getElementById('root')).render(
		<React.StrictMode>
			<Provider store={store}>
				<App />
			</Provider>
		</React.StrictMode>
	)
}

main()

이제 우리는 애플리케이션이 워커가 시작되기 전에 (그리고 요청을 보내기 시작하기 전에 ;) ) 작동하지 않을 것이라고 확신합니다.

애플리케이션을 실행하고 브라우저에서 개발자 콘솔을 열어보세요. 만약 거기에 '[MSW] Mocking enabled.' 텍스트가 보인다면, 여러분은 잘했고 모든 것을 올바르게 설치한 것입니다!!!

학생 애플리케이션을 열어보세요. 이번 강의의 자료를 익힌 후, 애플리케이션에 Mock Service Worker를 설치하세요.

server.js 파일을 생성하고, 그 안에 워커를 만드세요. 강의에서 보여준 대로 main.js에서 worker를 애플리케이션에 연결하세요. 모든 것이 작동하는지 확인하세요.