νλ‘ νΈμλ κ°λ°μ νλ©΄μ ꡬνμ΄μΈμ λΆνΈνλ μ λ€μ λ°±μλ κ°λ°μ΄ λλμΌ νλ‘ νΈμλ κ°λ°μ ν μ μλ€λ μ μ΄μλ€. κ·Έλ¦¬κ³ νλ‘ νΈμλλ λ νΌμμκ³ , 3λͺ
μ λ°±μλ κ°λ°μλ€κ³Ό ν¨κ» νμ¬μ ν λ²μ APIκ° λ§μ΄ μ
λ°μ΄νΈ λλ©΄ κ·Έλ§νΌ λͺ°μμ ν΄μΌνλ€.
λν λ‘λ©, μλ¬λ± λ€μν μλ΅μ λν μ²λ¦¬λ₯Ό ν λ λ΄κ° μ§μ κ°κ°μ ν΄λΉνλ μν©μ λ§λ€μ΄μΌνλ€λ μ μμ μ΄λ €μμ΄ μμλ€.
μ΄λ¬ν λ¬Έμ λ€μ ν΄κ²°νκ³ νλ‘ νΈμλ κ°λ°μ μμ°μ±μ λμ΄κΈ° μν΄κ³ λ―Όνλ λμ€, Mocking λν΄ μκ²λμλ€.
Mockingμ΄λ μ€μ APIμμ λ°μμ¨ κ°μ μ¬μ©νλ κ²μ΄ μλλΌ κ°μ§ κ°μ μ¬μ©ν μ μλλ‘ νκ² ν΄μ£Όλ κ²μ΄λ€.
Mockingλ μμ λ΄κ° λ§ν μν©λΏλ§ μλλΌ APIλ₯Ό νΈμΆν λ λΉμ©μ΄ λ°μνλ κ²½μ°μλ μ μ©νλ€.
Mocking λ°©λ²μλ μ¬λ¬κ°μ§κ° μλ€. νλ©΄μ νμν λ°μ΄ν°μ μνλ₯Ό μ ν리μΌμ΄μ
μ λ΄λΆ λ‘μ§μ μ§μ Mockingμμ νλ λ°©λ²μ ꡬνμ΄ μ¬μ λΉ λ₯΄κ² μ μ©ν μ μμ§λ§ HTTP λ©μλμ λ€νΈμν¬ μλ΅ μνμ λ°λΌ λμνκΈ°κ° μ½μ§μκ³ , Mock μλ²λ₯Ό μ§μ λ§λλ λ°©λ²μ 곡μκ° λ λ λ€λ μ μ΄ μλ€.
λν μμ λ§ν λ°©λ²λ€μ λ‘λ©, μλ¬λ± λ€μν μλ΅μ λν μ²λ¦¬λ₯Ό ν λ μμ΄μ μνλ₯Ό λ§λ€μ΄ 보면μ κ°λ°νκ±°λ λλ²κΉ
νλλ° μ΄λ €μμ΄ μλ€.
μ΄λ¬ν μμ λ¬Έμ λ₯Ό ν΄κ²°ν΄ μ€ μ μκ³ , μ€μ APIλ₯Ό μ¬μ©νλ κ²μ²λΌ Mockingν μ μλ λΌμ΄λΈλ¬λ¦¬λ‘ MSWκ° μλ€. MSWλ₯Ό μ¬μ©ν΄λ³΄λ €κ³ νλ€.
MSW λΌμ΄λΈλ¬λ¦¬λ λ€νΈμν¬ μμ€μμ μμ²μ κ°λ‘μ±μ λͺ¨μ μλ΅μ 보λ΄μ£Όλ μν μ νλ€. λ°λΌμ Mock μλ²λ₯Ό μ§μ ꡬμΆνμ§ μμλ APIλ₯Ό λ€νΈμν¬ μμ€μμ Mocking ν μ μλ€.
Request flowλ₯Ό 보면,
λΈλΌμ°μ μμ μ μ‘νλ Requestλ₯Ό Service Workerκ° κ°λ‘μ±μ΄ μμ²μ 볡μ¬νμ¬ MSWμκ² ν΄λΉ μμ²κ³Ό μΌμΉνλ Mocked Responseμ μ 곡λ°κ³ μ΄λ₯Ό λΈλΌμ°μ μκ² μ λ¬νκ² λλ€.
- ν¨ν€μ§ μ€μΉ
npm install msw --save-dev
# or
yarn add msw --dev
- λλ ν 리 μμ±
mkdir μμ±ν ν΄λ μ΄λ¦
λ mkdir src/mocks
λ‘ ν΄μ£Όμλ€.
Mock Service Workerλ μ΄λ₯Ό μ§μνλ μ μ© CLIλ₯Ό μ 곡νλ€.
- mockServiceWorker μμ±
npx msw init <PUBLIC_DIR> --save
λ₯Ό μ
λ ₯νλ©΄ mockServiceWorker.jsκ° μμ±λλ€.
CRAλ‘ νλ‘μ νΈλ₯Ό μμ±ν κ²½μ°
npx msw init public/ --save
νλ©΄ λ¨.
- src/mocks/handlers.js νμΌ μμ±
κ°μ μνλ λ€νΈμν¬ μμ²μ λν΄ λͺ¨μ API μμ±νλ©΄λλ€.
λ questionsμ κ°μ Έμ€λ λͺ¨μ APIμ λν΄ μμ±νλ€.
import { PAGINATION_SIZE } from '@/constants/paginationSize';
import { rest } from 'msw';
export const handlers = [
rest.get(`${process.env.NEXT_PUBLIC_API_PREFIX}/questions?page=0&size=${PAGINATION_SIZE.MAIN_QUESTION}&type='total'`, (req, res, ctx) => {
return res(
ctx.status(200), // μλ΅ μν
ctx.delay(0), // μλ΅ μκ°
ctx.json({ // μλ΅ κ²°κ³Ό
data: {
questions: [
{ questionId: 1, title: 'title1', content: 'content1' },
{ questionId: 2, title: 'title2', content: 'content2' },
{ questionId: 3, title: 'title3', content: 'content3' },
],
}
})
);
}),
];
- src/mocks/browser.js νμΌ μμ±
λͺ¨μ μλ΅μ μν νΈλ€λ¬λ₯Ό MSWμμ μ¬μ©ν μ μλλ‘ import νλ€.
import { setupWorker } from 'msw'
import { handlers } from './handlers'
export const worker = setupWorker(...handlers)
- λ§μ§λ§ start worker
κ°λ°νκ²½μμλ§ MSWλ₯Ό μ€νμν¬μ μλλ‘ μ½λλ₯Ό μΆκ°νλ€.
if (process.env.NODE_ENV === 'development') {
const { worker } = require('./mocks/browser')
worker.start()
}
μμ μ¬μ§μ²λΌ μ½μμ Mock Service Workerμ [MSW] Mocking enabled λ©μμ§κ° νμλμ΄μΌ νλ€.
μ±κ³΅!
μ¬μ©λ°©λ²λ κ°λ¨νκ³ , 곡μλ¬Έμμλ μ λμμμ΄ μ μ©νκΈ°μλ ν° μ΄λ €μμ μμλ€.
λν κ°μ₯ μ’μ μ μ βοΈλλ λ°±μλ κ°λ°μμκ² μ¬μ΄νμ§ μκ³ , μμ‘΄μ μ΄μ§ μκ³ μ£Όλμ μΌλ‘ κ°λ°ν μ μμ΄ λ무 μ’μλ€.βοΈ (μκ·Ό μ€νΈλ μ€μλ€.)
API λ¬Έμκ° λμ€λ©΄ λ°±μλ κ°λ°μλ₯Ό κΈ°λ€λ¦¬μ§ μκ³ λ λλ νλ‘ νΈ κ°λ°μ νκ³ , λμ€μ μΆκ° μμ
λ§ νλ©΄ λλ κ°λ° μ 체 μμ μκ°λ μ€μ΄λ€ κ² κ°κ³ , λν λ€μν μν©μ κ³ λ €ν΄μ λ³΄λ€ μ½κ² κ°λ°ν μλ μμκ³ , νλ‘ νΈ κ°λ° μ체μ μκ°λ μ€μ΄λ¦μ κ²½ννλ€. λͺ¨λμκ² μΆμ²ν΄μ£Όκ³ μΆκ³ , μ μ§κΈμμμΌ νλμ§ ... μμ½λ€!