"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", blockquote: "blockquote", br: "br", code: "code", div: "div", figure: "figure", h2: "h2", h3: "h3", h4: "h4", li: "li", line: "line", p: "p", path: "path", pre: "pre", span: "span", strong: "strong", svg: "svg", ul: "ul", ..._provideComponents(), ...props.components }, {MDXImage} = _components; if (!MDXImage) _missingMdxReference("MDXImage", true); return _jsxs(_Fragment, { children: [_jsx(_components.h2, { children: "여는 글" }), "\n", _jsx(_components.p, { children: "프론트엔드 개발에서 일정 관리에 어려움을 겪는 이유중에 하나로 API 개발 일정 지연을 뽑을 수 있는데, 그 이유는 API 개발 일정과 밀접하게 연관되어 있기 때문일 거에요.\n현업에서 프론트엔드 개발하면서 일정 지연을 경험했던 케이스들은 이런 것들이 있었어요." }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: "정적인 UI 구현을 완료한 시점에 필요한 API 개발이 되지 않은 경우" }), "\n", _jsx(_components.li, { children: "개발된 API로 특정 기능을 구현할 때 API에서 에러가 발생하는 경우" }), "\n", _jsx(_components.li, { children: "개발하는 도중에 API 스펙이 변경되는 경우" }), "\n", _jsx(_components.li, { children: "등등..." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["이런 상황에서 더 효율적인 개발, 협업을 하기 위해 API 모킹(mocking) 라이브러리를 도입하려고 해요.", _jsx(_components.br, {}), "\n", "API를 모킹하게 되면 응답 결과를 미리 작성하고 실제 API 요청 결과 대신 작성된 응답 결과를 받아 API 개발 일정과 상관없이 개발 할 수 있어요."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "msw" }), "는 서비스 워커 API를 사용해서 네트워크 수준에서 API 요청을 가로채는 API 모킹(mocking) 라이브러리 중 하나예요."] }), "\n", _jsx(_components.div, { children: _jsxs(_components.blockquote, { className: "callout", style: { borderLeftColor: "#448aff" }, children: ["\n", _jsxs(_components.div, { className: "callout-title note", style: { backgroundColor: "#448aff1a" }, children: [_jsx(_components.span, { style: { color: "#448aff" }, className: "callout-icon", children: _jsxs(_components.svg, { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide-pencil", children: [_jsx(_components.line, { x1: "18", y1: "2", x2: "22", y2: "6" }), _jsx(_components.path, { d: "M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z" })] }) }), _jsx(_components.strong, { children: _jsx(_components.p, { children: "Service Worker API?" }) })] }), "\n", _jsx(_components.div, { className: "callout-content", style: {}, children: _jsxs(_components.p, { children: ["서비스 워커는 연관된 웹 페이지/사이트를 통제하여 탐색과 리소스 요청을 가로채 수정하고, 리소스를 굉장히 세부적으로 캐싱할 수 있습니다. 이를 통해 웹 앱이 어떤 상황에서 어떻게 동작해야 하는지 완벽하게 바꿀 수 있습니다. (제일 대표적인 상황은 네트워크를 사용하지 못할 때입니다.)", _jsx(_components.br, {}), "\n", _jsx(_components.a, { href: "https://developer.mozilla.org/ko/docs/Web/API/Service_Worker_API", children: "MDN Service Worker API" })] }) }), "\n"] }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "msw" }), "는 다음과 같은 특징이 있어요:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["브라우저와 Node.js 환경에서 ", _jsx(_components.code, { children: "fetch" }), ", ", _jsx(_components.code, { children: "Axios" }), ", ", _jsx(_components.code, { children: "React Query" }), "와 같은 모든 요청을 모킹할 수 있어요."] }), "\n", _jsx(_components.li, { children: "서비스 워커 API를 통해 네트워크 수준에서 요청을 가로채기 때문에 실제 서버와 통신하는 것과 동일한 환경에서 개발할 수 있어요." }), "\n", _jsx(_components.li, { children: "API 모킹을 독립적인 레이어로 처리해서 테스트, Storybook 과 같은 환경에서도 동일한 모킹을 수행할 수 있어요." }), "\n"] }), "\n", _jsxs(_components.p, { children: ["이제 이러한 ", _jsx(_components.code, { children: "msw" }), "에 대해 알아보면서 프로젝트에 도입해볼게요.", _jsx(_components.br, {}), "\n", "이 글은 다음과 같은 기준으로 작성됐어요:"] }), "\n", _jsxs(_components.ul, { children: ["\n", _jsx(_components.li, { children: _jsx(_components.code, { children: "react@19.0.0" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.code, { children: "vite@6.2.0" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.code, { children: "msw@2.7.3" }) }), "\n", _jsx(_components.li, { children: _jsx(_components.code, { children: "ky@1.5.5" }) }), "\n"] }), "\n", _jsx(_components.h2, { children: "초기 설정" }), "\n", _jsx(_components.h3, { children: "1. 설치하기" }), "\n", _jsxs(_components.p, { children: ["먼저 ", _jsx(_components.code, { children: "msw" }), "를 설치해줄게요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "bash", "data-theme": "github-dark", children: _jsx(_components.code, { "data-language": "bash", "data-theme": "github-dark", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "npm" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " install" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " msw@latest" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " --save-dev" })] }) }) }) }), "\n", _jsxs(_components.p, { children: ["브라우저에서 ", _jsx(_components.code, { children: "msw" }), "를 사용하기 위해서는 서비스 워커 API에 등록하는 과정이 필요해요.", _jsx(_components.br, {}), "\n", "등록을 위해 다음 명령어를 실행해서 서비스 워커 스크립트 파일인 ", _jsx(_components.code, { children: "mockServiceWorker.js" }), "를 생성할게요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "bash", "data-theme": "github-dark", children: _jsx(_components.code, { "data-language": "bash", "data-theme": "github-dark", style: { display: "grid" }, children: _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "npx" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " msw" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " init" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " public/" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " --save" })] }) }) }) }), "\n", _jsx(_components.h3, { children: "2. 핸들러 작성하기" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "get" }), " 요청 API와 요청을 가로채서 모의 응답을 반환할 핸들러를 작성해볼게요.", _jsx(_components.br, {}), "\n", "페이지가 로드되면 서버에서 네비게이션바의 메뉴 구성을 전달받는 ", _jsx(_components.code, { children: "Get" }), " 요청 API를 먼저 작성할게요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "typescript", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "typescript", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// src/features/navigationbar/api/navigationApi.ts" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ky " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"ky\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "interface" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " NavigationResponse" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FFAB70" }, children: " items" }), _jsx(_components.span, { style: { color: "#F97583" }, children: ":" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " NavigationItem" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "[];" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "type" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " NavigationItem" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FFAB70" }, children: " id" }), _jsx(_components.span, { style: { color: "#F97583" }, children: ":" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " string" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FFAB70" }, children: " name" }), _jsx(_components.span, { style: { color: "#F97583" }, children: ":" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " string" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#FFAB70" }, children: " path" }), _jsx(_components.span, { style: { color: "#F97583" }, children: ":" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " string" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "};" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " api" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ky." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "create" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " prefixUrl: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"http://localhost:5173\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "});" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " navigationApi" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " getNavigation" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ": () " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " api." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "get" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"navigation\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ")." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "json" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "<" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "NavigationResponse" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">()," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "};" }) })] }) }) }), "\n", _jsx(_components.p, { children: "이제 요청을 가로채서 모의 응답을 반환하는 핸들러를 작성할게요." }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "typescript", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "typescript", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// src/features/navigationbar/api/mocks/handlers.ts" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { http, HttpResponse } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"msw\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " navigationHandlers" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " http." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "get" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"/navigation\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", () " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " HttpResponse." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "json" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " items: [" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " id: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"1\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " name: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"Home\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " path: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"/\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " id: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"2\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " name: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"Login\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " path: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"/login\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " id: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"3\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " name: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"Dashboard\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " path: " }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"/dashboard\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ]," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " });" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " })," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "];" }) })] }) }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "msw" }), "에 등록하기 위해 작성한 핸들러들을 모아주는 ", _jsx(_components.code, { children: "handlers.ts" }), " 파일도 추가할게요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "typescript", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "typescript", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// src/shared/api/mocks/handlers.ts" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// 기작성된 loginHandlers" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { loginHandlers } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"../../../features/login/api/mocks/handlers\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { navigationHandlers } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"../../../features/navigationbar/api/mocks/handlers\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// 작성한 각각의 핸들러를 하나의 handlers로 통합해 export" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " handlers" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " [" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "loginHandlers, " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "navigationHandlers];" })] })] }) }) }), "\n", _jsx(_components.h3, { children: "3. msw 환경설정 파일 생성" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "msw" }), "를 어떤 환경(브라우저, Node.js)에서 사용할지 결정해줘야 하는데, 우리는 브라우저 환경에서 사용할 수 있도록 설정할게요.\n먼저 모든 핸들러를 모아서 관리하는 ", _jsx(_components.code, { children: "handlers.ts" }), " 파일과 브라우저 환경 설정을 위한 ", _jsx(_components.code, { children: "browser.ts" }), " 파일을 만들어줄게요."] }), "\n", _jsx(_components.div, { children: _jsxs(_components.blockquote, { className: "callout", style: { borderLeftColor: "#448aff" }, children: ["\n", _jsxs(_components.div, { className: "callout-title note", style: { backgroundColor: "#448aff1a" }, children: [_jsx(_components.span, { style: { color: "#448aff" }, className: "callout-icon", children: _jsxs(_components.svg, { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide-pencil", children: [_jsx(_components.line, { x1: "18", y1: "2", x2: "22", y2: "6" }), _jsx(_components.path, { d: "M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z" })] }) }), _jsx(_components.strong, { children: _jsx(_components.p, { children: "MSW 환경 설정 파일" }) })] }), "\n", _jsxs(_components.div, { className: "callout-content", style: {}, children: [_jsx(_components.p, { children: "MSW는 실행 환경에 따라 다른 설정이 필요해요:" }), _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: ["브라우저 환경: ", _jsx(_components.code, { children: "browser.ts" }), " (setupWorker 사용)"] }), "\n", _jsxs(_components.li, { children: ["Node.js 환경: ", _jsx(_components.code, { children: "node.ts" }), " (setupServer 사용)"] }), "\n"] }), _jsx(_components.p, { children: "환경 설정 파일은 프로젝트당 각각 하나씩만 있으면 돼요." })] }), "\n"] }) }), "\n", _jsxs(_components.p, { children: ["브라우저 환경을 위한 ", _jsx(_components.code, { children: "browser.ts" }), " 파일은 이렇게 작성해요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "typescript", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "typescript", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// src/shared/api/mocks/browser.ts" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { setupWorker } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"msw/browser\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { handlers } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"./handlers\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " worker" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " setupWorker" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "handlers);" })] })] }) }) }), "\n", _jsxs(_components.p, { children: ["Node.js 환경을 위한 ", _jsx(_components.code, { children: "node.ts" }), " 파일은 이렇게 작성해요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "typescript", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "typescript", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// src/shared/api/mocks/node.ts" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { setupServer } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"msw/node\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { handlers } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"./handlers\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: " server" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " setupServer" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "..." }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "handlers);" })] })] }) }) }), "\n", _jsxs(_components.p, { children: ["이제 애플리케이션의 진입점에 ", _jsx(_components.code, { children: "msw" }), " 활성화를 위한 코드를 추가해줄게요.", _jsx(_components.br, {}), "\n", "현재 프로젝트에서는 ", _jsx(_components.code, { children: "main.tsx" }), "이지만 ", _jsx(_components.code, { children: "index.tsx" }), ", ", _jsx(_components.code, { children: "app.tsx" }), " 등의 진입점에 추가하면 돼요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { StrictMode } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"react\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { createRoot } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"react-dom/client\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " Router " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"./ui/Router.tsx\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"./global.css.ts\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// msw 활성화 코드 작성" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "if" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (process.env." }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "NODE_ENV" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " ===" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"development\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " if" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "typeof" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " window " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "===" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"undefined\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "server" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " await" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"../shared/api/mocks/node\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " server." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "listen" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "();" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "else" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "worker" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " await" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"../shared/api/mocks/browser\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " worker." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "start" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "();" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: "createRoot" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(document." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "getElementById" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"root\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ")" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "!" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ")." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "render" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "StrictMode" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "Router" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " />" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["작성한 ", _jsx(_components.code, { children: "msw" }), " 활성화 코드에 대해서 자세히 살펴볼게요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "typescript", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "typescript", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "if" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (process.env." }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "NODE_ENV" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " ===" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"development\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // MSW 활성화 코드" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.p, { children: "이 코드는 현재 애플리케이션이 개발 환경에서 실행되는지 확인하는 조건문이에요." }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "Node.js" }), "환경에서 환경 변수에 접근할 수 있게 해주는 ", _jsx(_components.code, { children: "process.env" }), " 객체를 통해 현재 어떤 환경인지 확인할 수 있는데,\n", _jsx(_components.code, { children: "Vite" }), ", ", _jsx(_components.code, { children: "Next.js" }), "와 같은 개발 도구는 ", _jsx(_components.code, { children: "npm run dev" }), "와 같은 명령어를 실행할 때 ", _jsx(_components.code, { children: "NODE_ENV" }), "의 값을 ", _jsx(_components.code, { children: "development" }), "로 설정해요."] }), "\n", _jsxs(_components.p, { children: ["그래서 작성한 코드는 개발환경에서만 ", _jsx(_components.code, { children: "msw" }), "를 활성화해서 API 요청을 가로채고 그 외의 경우에는 비활성화하는 코드라고 볼 수 있어요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "typescript", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "typescript", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "if" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "typeof" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " window " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "===" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"undefined\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // 서버 환경 (SSR)" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "} " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "else" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: " // 브라우저 환경 (CSR)" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }), "\n", _jsxs(_components.p, { children: ["현재 애플리케이션 실행 환경이 ", _jsx(_components.code, { children: "development" }), " 개발 환경인 것을 확인한 뒤에, 서버(SSR) 환경인지 브라우저(CSR) 환경인지 확인해야하는데,\n그 이유는 ", _jsx(_components.code, { children: "msw" }), " 에서는 각 실행 환경별로 다른 API를 사용하기 때문이에요."] }), "\n", _jsxs(_components.p, { children: ["SSR인 경우에서는 ", _jsx(_components.code, { children: "window" }), " 객체가 존재하지 않기 때문에 ", _jsx(_components.code, { children: "window === \"undefined\"" }), "가 성립되고 반대로,\n브라우저 환경에서는 ", _jsx(_components.code, { children: "window" }), " 객체가 항상 존재해서 ", _jsx(_components.code, { children: "false" }), "가 성립하기 때문에 이 조건문을 사용해 환경에 맞는 API를 호출할 수 있어요."] }), "\n", _jsx(_components.div, { children: _jsxs(_components.blockquote, { className: "callout", style: { borderLeftColor: "#448aff" }, children: ["\n", _jsxs(_components.div, { className: "callout-title note", style: { backgroundColor: "#448aff1a" }, children: [_jsx(_components.span, { style: { color: "#448aff" }, className: "callout-icon", children: _jsxs(_components.svg, { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "lucide-pencil", children: [_jsx(_components.line, { x1: "18", y1: "2", x2: "22", y2: "6" }), _jsx(_components.path, { d: "M7.5 20.5 19 9l-4-4L3.5 16.5 2 22z" })] }) }), _jsx(_components.strong, { children: _jsx(_components.p, { children: "window 객체" }) })] }), "\n", _jsxs(_components.div, { className: "callout-content", style: {}, children: [_jsxs(_components.p, { children: ["Window 인터페이스는 DOM 문서를 담은 창을 나타냅니다. document 속성이 창에 불러온 DOM 문서를 가리킵니다. ", _jsx(_components.a, { href: "https://developer.mozilla.org/ko/docs/Web/API/Window", children: "MDN Window" })] }), _jsx(_components.div, { children: _jsxs(_components.blockquote, { className: "blockquote", children: ["\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "Window" }), " 객체는 브라우저에 존재하는 자바스크립트의 최상위 객체로 ", _jsx(_components.code, { children: "DOM" }), "을 포함하고 있어요.", _jsx(_components.br, {}), "\n", "SSR은 서버의 ", _jsx(_components.code, { children: "Node.js" }), " 환경에서 컴포넌트를 통해 HTML 생성해 브라우저로 전달해서 ", _jsx(_components.code, { children: "DOM" }), "트리를 만드는데, 코드가 실행될 때 브라우저 환경이 아니기 때문에 ", _jsx(_components.code, { children: "Window" }), " 객체는 이 시점에 존재할 수 없어요.", _jsx(_components.br, {}), "\n", "그래서 이 코드를 통해 현재 실행 환경이 서버인지 브라우저인지 확인할 수 있게 돼요."] }), "\n"] }) })] }), "\n"] }) }), "\n", _jsxs(_components.p, { children: ["이제 각 환경에서 동작하는 ", _jsx(_components.code, { children: "msw" }), "의 API를 추가해 볼게요."] }), "\n", _jsx(_components.h4, { children: "서버(Node.js) 환경" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "typescript", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "typescript", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "server" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " await" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"../shared/api/mocks/node\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "server." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "listen" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "();" })] })] }) }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "server" }), "는 ", _jsx(_components.code, { children: "src/api/mocks/node.ts" }), "에서 import 해온 ", _jsx(_components.code, { children: "setUpServer(...handlers)" }), "예요.", _jsx(_components.br, {}), "\n", "풀어서 보면 ", _jsx(_components.code, { children: "setUpServer(...handlers).listen()" }), "으로 볼 수 있어요."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "setUpServer" }), "는 인자로 받은 핸들러들은 감시할 요청을 설정하는 함수고 ", _jsx(_components.code, { children: "listen()" }), "은 등록된 핸들러의 HTTP 요청을 가로채기를 시작하는 메서드예요."] }), "\n", _jsx(_components.h4, { children: "브라우저 환경" }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "typescript", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "typescript", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "worker" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " await" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "(" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"../shared/api/mocks/browser\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ");" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: "worker." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "start" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "();" })] })] }) }) }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "worker" }), "는 ", _jsx(_components.code, { children: "src/api/mocks/browser.ts" }), "에서 import 해온 ", _jsx(_components.code, { children: "setUpWorker(...handlers)" }), "예요.", _jsx(_components.br, {}), "\n", "풀어서 보면 ", _jsx(_components.code, { children: "setUpWorker(...handlers).start()" }), "로 볼 수 있어요."] }), "\n", _jsxs(_components.p, { children: [_jsx(_components.code, { children: "setUpWorker" }), "는 인자로 받은 핸들러들은 감시할 요청을 설정하는 함수고 ", _jsx(_components.code, { children: "start()" }), "는 서비스 워커를 활성화해 등록된 핸들러의 HTTP 요청을 가로채기를 시작하는 메서드예요."] }), "\n", _jsxs(_components.p, { children: ["이렇게 해서 각 환경에 맞게 ", _jsx(_components.code, { children: "msw" }), " 설정을 완료했고, 콘솔창을 확인해보면 ", _jsx(_components.code, { children: "[MSW] Mocking enabled" }), " 라는 메세지를 볼 수 있어요."] }), "\n", _jsx(MDXImage, { src: "/posts/msw/msw-enabled.png", width: "200px", alt: "msw 설정 완료시 콘솔창", caption: "msw 설정 완료시 콘솔창" }), "\n", _jsx(_components.h2, { children: "사용하기" }), "\n", _jsxs(_components.p, { children: ["이제 메인 페이지에 접속했을때, 네비게이션바 구성 메뉴를 가져오는 ", _jsx(_components.code, { children: "Get" }), " API를 통해 ", _jsx(_components.code, { children: "msw" }), "가 요청을 잘 가로채는지 확인해볼게요.\n이 프로젝트에서는 ", _jsx(_components.code, { children: "Tanstack Query" }), "를 사용하기 때문에 ", _jsx(_components.code, { children: "useQuery" }), "로 감싸 서버 데이터를 관리할 수 있도록 할게요."] }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// src/feature/navigationbar/model/useNavigation.ts" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { useQuery } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"@tanstack/react-query\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { navigationApi } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"../api/navigationApi\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useNavigation" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " =" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " () " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useQuery" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "({" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " queryKey: [" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: "\"navigation\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "]," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " queryFn: navigationApi.getNavigation," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " });" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "};" }) })] }) }) }), "\n", _jsx(_components.p, { children: "이제 컴포넌트에서 API를 호출해볼게요." }), "\n", _jsx(_components.figure, { "data-rehype-pretty-code-figure": "", children: _jsx(_components.pre, { style: { backgroundColor: "#24292e", color: "#e1e4e8" }, tabIndex: "0", "data-language": "tsx", "data-theme": "github-dark", children: _jsxs(_components.code, { "data-language": "tsx", "data-theme": "github-dark", style: { display: "grid" }, children: [_jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#6A737D" }, children: "// src/feature/navigationbar/ui/Navigationbar.tsx" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { NavLink } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"react-router-dom\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { container, activeLink } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"./Navigationbar.css\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "import" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { useNavigation } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "from" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"../model/useNavigation\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ";" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: "export" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " default" }), _jsx(_components.span, { style: { color: "#F97583" }, children: " function" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " Navigationbar" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "() {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " const" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " { " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "data" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "isLoading" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ", " }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "error" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " } " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " useNavigation" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "();" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " if" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (isLoading) " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">로딩 중...;" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " if" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (error) " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "div" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ">오류 발생!;" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#F97583" }, children: " return" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#85E89D" }, children: "nav" }), _jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{container}>" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {data?.items?." }), _jsx(_components.span, { style: { color: "#B392F0" }, children: "map" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "((" }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "item" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ") " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " <" }), _jsx(_components.span, { style: { color: "#79B8FF" }, children: "NavLink" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " key" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{item.id}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " to" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{item.path}" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#B392F0" }, children: " className" }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "{({ " }), _jsx(_components.span, { style: { color: "#FFAB70" }, children: "isActive" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " }) " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "=>" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " (isActive " }), _jsx(_components.span, { style: { color: "#F97583" }, children: "?" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " activeLink " }), _jsx(_components.span, { style: { color: "#F97583" }, children: ":" }), _jsx(_components.span, { style: { color: "#9ECBFF" }, children: " \"\"" }), _jsx(_components.span, { style: { color: "#E1E4E8" }, children: ")}" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " >" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " {item.name}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " ))}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { color: "#E1E4E8" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: " );" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { color: "#E1E4E8" }, children: "}" }) })] }) }) }), "\n", _jsx(_components.p, { children: "이제 네비게이션바의 구성 요소를 서버 통신과 같은 방식으로 요청해서 모의 응답을 통해 개발 할 수 있게 되었어요." }), "\n", _jsx(MDXImage, { src: "/posts/msw/msw-get-200.png", alt: "msw 설정 완료시 콘솔창", caption: "msw 설정 완료시 콘솔창" }), "\n", _jsxs(_components.p, { children: ["나중에 실제 API가 개발되면 별도의 코드 수정 없이 ", _jsx(_components.code, { children: "src/shared/api/mocks/handlers.ts" }), "에 등록했던 핸들러만 제거하면 실제 API 요청으로 대체되기 때문에 아주 편리하게 전환할 수 있어요."] }), "\n", _jsxs(_components.p, { children: ["그리고 또한 ", _jsx(_components.code, { children: "main.tsx" }), "에 작성한 ", _jsx(_components.code, { children: "if (process.env.NODE_ENV === \"development\")" }), " 조건문 덕분에 배포 환경에서도 실제 API 요청이 이루어지게 돼요."] }), "\n", _jsx(_components.h2, { children: "닫는 글" }), "\n", _jsxs(_components.p, { children: ["효율적인 개발 일정과 협업을 위해 MSW를 프로젝트에 도입해보았는데 겪었던 일정관리에 대한 불편을 줄여줄 수 있는 좋은 프론트엔드 도구라고 느꼈어요.", _jsx(_components.br, {}), "\n", "백엔드 팀과의 협업이 많거나 API 때문에 개발 일정이 지연 혹은 중단된 경험이 있는 프론트엔드 개발자라면 ", _jsx(_components.code, { children: "msw" }), " 도입을 적극 추천해요."] }), "\n", _jsx(_components.h2, { children: "출처" }), "\n", _jsxs(_components.p, { children: [_jsx(_components.a, { href: "https://mswjs.io/docs/getting-started", children: "https://mswjs.io/docs/getting-started" }), _jsx(_components.br, {}), "\n", _jsx(_components.a, { href: "https://oliveyoung.tech/2024-01-23/msw-frontend/", children: "https://oliveyoung.tech/2024-01-23/msw-frontend/" }), _jsx(_components.br, {}), "\n", _jsx(_components.a, { href: "https://velog.io/@khy226/msw%EB%A1%9C-%EB%AA%A8%EC%9D%98-%EC%84%9C%EB%B2%84-%EB%A7%8C%EB%93%A4%EA%B8%B0", children: "https://velog.io/@khy226/msw%EB%A1%9C-%EB%AA%A8%EC%9D%98-%EC%84%9C%EB%B2%84-%EB%A7%8C%EB%93%A4%EA%B8%B0" })] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

MSW 도입하기