GET 요청을 통해 서버에서 데이터 전송하기 in Redux

자, 우리에게는 데이터베이스가 있습니다. 우리 Redux 애플리케이션을 시작할 때 가장 먼저 할 일은 서버에서 제품 데이터를 받아오는 것입니다. 이를 위해 우리 애플리케이션에서 GET 요청을 보내야 합니다. 서버 측에서 이 요청을 처리해 봅시다.

제품 애플리케이션을 열고, 그 안에 있는 server.js 파일을 엽니다. HTTP 요청을 다루기 위해서는 msw에서 몇 가지 도구를 파일로 가져와야 합니다. 이를 수행해 봅시다:

import { http, HttpResponse, delay } from 'msw'

또한 실제 상황, 즉 네트워크 지연 가능성을 바로 고려해 봅시다. 데이터가 어떻게 로드되는지 볼 수 있도록 우리의 인공 지연 값을 2초로 설정합시다. const PRODS_PER_SELLER = 2 뒤에 작성해 봅시다:

const ARTIFICIAL_DELAY_MS = 2000

이제 파일 끝에서 worker를 익스포트하기 전에 API 요청 핸들러를 위한 배열을 만들어 봅시다:

export const handlers = []

그런 다음 대괄호 안에 제품 GET 요청을 가로채는 첫 번째 핸들러를 작성해 봅시다:

export const handlers = [http.get()]

http.get의 첫 번째 매개변수로 예를 들어 '/fakeServer/products'와 같은 가짜 주소를 전달하고, 두 번째 매개변수로 비동기 콜백을 전달해 봅시다:

export const handlers = [http.get('/fakeServer/products', async () => {})]

이제 이 콜백에 대한 코드를 작성해 봅시다. 이를 사용하여 데이터베이스에서 모든 제품을 추출할 것입니다. 여기서 우리는 또한 지난 수업에서 작성한 serializeProduct 함수를 사용할 것입니다. 이를 map에 전달해 봅시다. 그런 다음 지연을 만들고(마치 네트워크가 느린 것처럼) response에 JSON 형태의 제품 데이터 객체를 반환해 봅시다:

export const handlers = [
	http.get('/fakeServer/products', async () => {
		const products = db.product.getAll().map(serializeProduct)
		await delay(ARTIFICIAL_DELAY_MS)
		return HttpResponse.json(products)
	}),
]

마지막으로. 우리 worker를 위한 첫 번째 handler를 작성했으니, 이 worker에 handlers 배열을 전달해 봅시다. 이를 위해 파일의 마지막 코드 줄을 다음과 같이 수정합니다:

export const worker = setupWorker(...handlers)

학생 애플리케이션을 열고, 그 안에 있는 server.js 파일을 엽니다. msw에서 지정된 도구들을 파일로 가져오십시오. 이번 강의 자료를 학습한 후, 요청 가로채기를 위한 빈 핸들러 배열을 생성하십시오. 그 안에 학생 GET 요청 핸들러 코드를 작성하십시오. 경로는 '/fakeServer/students'로 하십시오.

파일 끝에서 핸들러 배열 handlers를 worker에 전달하는 것을 잊지 마십시오.