Mokup: Vite, Webpack, Node.js 및 Workers용 빌드 도구 친화적인 시각적 목킹 도구

Source: Dev.to

번역을 진행하려면 실제 번역이 필요한 텍스트(예: 기사 본문)를 제공해 주시겠어요?
본문을 알려주시면 그대로 마크다운 형식과 코드 블록을 유지하면서 한국어로 번역해 드리겠습니다.

Mokup이란

Mokup은 파일 기반 HTTP 목킹 도구입니다.
모의 파일을 mock/ 디렉터리에 넣으면, Mokup이 자동으로 파일을 스캔하고, 일치하는 라우트를 생성하며, 응답을 반환합니다.

그 목표는 간단합니다: 기존 프론트엔드 프로젝트 안에서 목(mock)들을 빠르게 실행하도록 돕고, API 협업을 위해 별도의 서비스를 구축하는 비용을 줄이는 것입니다.

주요 기능

• 빌드‑툴 친화적 – Vite와 Webpack 모두에서 작동하며 프로젝트를 다시 작성할 필요가 없습니다.
• 시각적 디버깅 – 내장 Playground가 라우트 상태를 한눈에 보여줍니다.
• 우수한 개발자 경험 – mock 파일 및 설정 업데이트가 자동으로 새로 고쳐져, 빈번한 재시작이 필요 없습니다.
• 다중 환경에 배포 가능 – 로컬 개발, Node.js 서버, Workers, Service Workers 등에 배포할 수 있습니다.

Why I built it

For many teams, the pain is not writing mocks; it’s the surrounding workflow:

1. Too many setup steps and re‑configuration whenever the build tool changes.
2. Poor visibility during local debugging – people end up guessing by reading files.
3. Slow feedback loops when every mock change requires a restart or manual verification.

Mokup solves these three issues: lighter setup, stronger visualization, and faster feedback.

Build‑tool friendly

Vite integration

// vite.config.ts
import mokup from 'mokup/vite'

export default {
  plugins: [
    mokup({
      entries: { dir: 'mock', prefix: '/api' },
    }),
  ],
}

mock/ 디렉터리에 파일을 추가하면 Mokup이 이를 스캔해 자동으로 라우트를 생성합니다.
CLI 출력에서 Mokup Playground 를 열어 시각적으로 디버깅할 수도 있습니다.

Webpack integration

// webpack.config.js
const { mokupWebpack } = require('mokup/webpack')

const withMokup = mokupWebpack({
  entries: { dir: 'mock', prefix: '/api' },
})

module.exports = withMokup({})

기존 빌드 파이프라인에 별도의 비즈니스 로직 구조를 변경하지 않고도 모킹 기능을 추가할 수 있습니다.

시각화: 플레이그라운드

Mokup은 스캔된 라우트, 메서드, 경로 및 설정 체인을 검사할 수 있는 내장 플레이그라운드를 제공합니다.

Vite 개발 환경에서 기본 엔트리:

http://localhost:5173/__mokup

온라인 데모:

왜 중요한가 – 엔드포인트가 작동하지 않을 때, 전체 코드를 grep으로 찾아볼 필요가 없습니다. 플레이그라운드 페이지를 열면 라우트가 스캔되었는지, 비활성화되었는지, 그리고 어떤 설정이 매치되었는지를 즉시 확인할 수 있습니다.

개발자 경험: 핫‑리로드 지원

Vite 개발 환경에서 Mokup은 mock 디렉터리를 감시하고 라우트 테이블을 자동으로 새로 고칩니다. 핫 리로드를 트리거하는 일반적인 변경 사항은 다음과 같습니다:

• 추가 / 수정 / 삭제 라우트 파일, 예시
  • mock/users.get.ts
  • mock/messages.get.json
  • mock/orders/[id].patch.ts
• 디렉터리 설정 파일 수정 – mock/**/index.config.ts
• 디렉터리 구조 변경 – 폴더 이동, 이름 변경, 혹은 중첩 폴더 생성

변경이 발생하면 Playground가 라우트 목록을 자동으로 새로 고쳐 디버깅 속도를 크게 향상시킵니다.

파일 감시가 필요하지 않은 경우 entries에 watch: false를 설정하세요.

빠른 예시: 파일에서 응답까지

// mock/users.get.ts
import { defineHandler } from 'mokup'

export default defineHandler({
  handler: c => c.json([{ id: 1, name: 'Ada' }]),
})

개발 서버를 시작하고 /api/users( prefix: '/api' 라고 가정) 를 방문하세요. 모의 데이터를 받을 수 있습니다.

@faker-js/faker와 빠른 통합

Mokup 핸들러는 일반 TS/JS 함수이므로, 별도의 어댑터 레이어 없이 @faker-js/faker와 직접 통합할 수 있습니다.

// mock/users.get.ts
import { faker } from '@faker-js/faker'
import { defineHandler } from 'mokup'

export default defineHandler(c => {
  const size = Number(c.req.query('size')) || 5
  const users = Array.from({ length: size }).map(() => ({
    id: faker.datatype.uuid(),
    name: faker.person.fullName(),
    email: faker.internet.email(),
  }))
  return c.json(users)
})

이제 /api/users?size=10에 대한 요청은 무작위로 생성된 10명의 사용자 목록을 반환합니다.

Mokup을 사용해 보세요!

• GitHub:
• Docs / Playground:

즐거운 목킹!

const size = Number(c.req.query('size') ?? 10)
const count = Number.isNaN(size) ? 10 : Math.min(Math.max(size, 1), 50)
const list = Array.from({ length: count }, () => ({
  id: faker.string.uuid(),
  name: faker.person.fullName(),
  email: faker.internet.email(),
  city: faker.location.city(),
  createdAt: faker.date.recent({ days: 30 }).toISOString(),
}))

return c.json({
  list,
  total: 200,
  page: 1,
  pageSize: count,
})

목록, 검색 및 상세 페이지 통합에 매우 유용합니다.

재현 가능한 결과가 필요하면, 핸들러 상단에 faker.seed(123)를 추가하세요.

여러 환경에 배포 가능

Node.js 개발 모드 예시

import { createFetchServer, serve } from 'mokup/server/node'

const app = await createFetchServer({ entries: { dir: 'mock' } })
serve({ fetch: app.fetch, port: 3000 })

Cloudflare Worker 예시

import { createMokupWorker } from 'mokup/server/worker'
import mokupBundle from 'virtual:mokup-bundle'

export default createMokupWorker(mokupBundle)

Note: virtual:mokup-bundle는 @cloudflare/vite-plugin이 포함된 Vite에서만 사용할 수 있습니다.
Node.js 개발 모드에서는 createFetchServer를 직접 사용하세요; 해당 가상 모듈이 필요하지 않습니다.

핵심 아키텍처

사용 사례 및 경계

적합한 경우

• 기존 Vite/webpack 프로젝트를 보유하고 저비용 목(mock) 통합을 원하는 팀
• 시각적 라우트 진단이 필요한 프로젝트
• 목 업데이트 후 빠른 피드백을 중시하는 워크플로

덜 적합한 경우

• 복잡한 동적 프록시 체인에 크게 의존하는 시나리오
• 빌드‑time이나 플러그인‑기반 통합을 원하지 않는 매우 가벼운 설정

Mokup은 모든 목 솔루션을 대체하려는 것이 아닙니다. 목을 더 쉽게 채택하고, 디버깅하기 쉬우며, 일상적인 개발 워크플로에 더 잘 맞도록 설계되었습니다.

마무리

Mokup은 아직도 빠르게 진화하고 있습니다. 기능 요청, DX 피드백, 문서 개선 등을 포함한 피드백을 매우 환영합니다.

이것이 여러분의 워크플로우에 유용하다면, 피드백 및 기능 요청을 환영합니다.