Redux 서버를 위한 데이터베이스

지난 수업에서 우리는 msw를 설치했습니다, 이는 우리 애플리케이션의 서버 작업을 모방하는 데 도움을 줄 것입니다. 그리고 먼저 애플리케이션을 시작할 때 서버에 이미 있는 데이터를 불러오고 싶습니다.

제품 애플리케이션을 열고, 그 안에 있는 server.js 파일을 열어 봅시다. 여기에는 지난 수업에서 이미 만든 몇 줄의 코드가 있습니다.

그리고 우리가 먼저 스스로에게 물어봐야 할 점: 보통 데이터는 어디에 저장될까요? 네, 물론 데이터베이스에요, 라고 우리는 주저 없이 대답할 것입니다. 따라서 우리의 데이터 모델을 만들고, 우리가 진짜 SQL 데이터베이스를 다루는 것처럼 만들어 줄 또 다른 훌륭한 도구를 사용해 봅시다.

이것을 도와줄 도구는 @mswjs/data 라이브러리입니다. 설치하려면 터미널에 다음 명령어를 입력하세요:

npm install @mswjs/data --save-dev

이제 server.js 파일에서 필요한 것들을 불러옵니다:

import { factory, oneOf, manyOf, primaryKey } from '@mswjs/data'

그리고 우리의 임시 데이터베이스를 생성합니다. 이를 위해 우리는 factory 함수를 사용할 것입니다. 이 작업을 불러오기 구문 아래, 워커 내보내기 구문 앞에 해줍니다:

export const db = factory({})

그리고 우리는 어떤 데이터를 여기에 저장할까요? 서버로부터 우리는 제품들, 판매자들, 그리고 사용자 반응을 받아와야 합니다. 따라서 우리 데이터베이스에는 factory가 객체 형태로 받는 세 개의 모델을 생성해야 합니다:

export const db = factory({
	product: {},
	seller: {},
	reaction: {},
})

진짜 SQL 데이터베이스에서처럼, 우리의 각 모델은 primary key를 가져야 합니다. 관례적으로, 우리는 id 필드를 이런 용도로 지정할 것이며, 이를 생성할 때는 똑같이 nanoid 라이브러리를 사용할 것입니다:

export const db = factory({
	product: {
		id: primaryKey(nanoid),
	},
	seller: {
		id: primaryKey(nanoid),
	},
	reaction: {
		id: primaryKey(nanoid),
	},
})

파일 시작 부분의 불러오기 구문에 nanoid를 추가하는 것을 잊지 마세요:

import { nanoid } from '@reduxjs/toolkit'

다음 수업에서 우리 모델에 필요한 필드들을 추가할 것입니다.

여러분의 학생 관리 애플리케이션을 열어보세요. 이번 수업 자료를 확인한 후, 여러분의 애플리케이션에 @mswjs/data를 설치하세요.

그런 다음 factory 함수를 사용하여 데이터베이스 모델 db를 생성하세요. 수업에서 보여준 것과 유사하게 세 개의 객체(student, teacher, vote)를 여러분의 데이터를 위해 전달하세요.