메로그

해당 글에서는 vitest 와 React Testing Library 를 이용하여 테스트 케이스를 만드는 방법을 소개합니다.vitest 는 실행속도와 vite 와 통합이 간편하며, RTL 은 리액트 컴포넌트를 테스트 하기 위한 도구 입니다.리액트 프로젝트 설치npm create vite@latest패키지 설치npm install --save-dev @testing-library/react @testing-library/jest-dom @testing-library/user-event vitest jsdomvite.config.ts 셋팅globals: true이 설정은 테스트 파일에서 전역 함수(예: describe, it, test 등)를 import 없이 사용할 수 있게 합니다.true로 설정하면 이러..

우선 모킹 서비스를 이용하는 경우는 프론트엔드가 백엔드의 api 가 개발될 때 까지 계속 기다려야하는 문제들이 발생하였고 프론트엔드가 먼저 백엔드의 api 를 설계 또는 개발하여 선작업을 할 수 있도록 합니다. vite 기반의 React 프로젝트이며, msw(mock service worker) 를 적용하여 모킹 서비스를 만드는 과정을 단계별로 설명하겠습니다.시작1. msw 설치npm install msw --save-dev 2. msw 서비스 워커 생성하기npx msw init public/ --save 3. browser mock 생성하기// src/mocks/browser.jsimport { setupWorker } from 'msw/browser'import { handlers } from './..

상용배포를 하게 되면 에러가 발생시에 상용서버에서 디버깅을 하기가 쉽지가 않다.보통 build 를 하게 될 때, 불필요한 주석, 디버거, 콘솔을 없애고 minify 하게 되는데, 상용에서 에러가 난 경우에 개발용으로 만들었던 로그가 찍히지 않다보니 에러 발생시 개발서버를 이용해서 확인해야 되는 이슈가 발생하였음.특히 프론트엔드에서는 직접 로그를 만들지 않으면, 로그 관리가 어렵다는 점이 발생함. 그래서! 상용서버에서 확인할 수 있도록, console.log 기반의 디버그 모드를 구현하기로 함.1. 디버그 모드 함수 모듈화const startDebugMode = () => { if (process.env.NODE_ENV === 'development') return window.setDebugMode ..

트러블 슈팅Vite 로 만든 React 를 마이크로 프론트엔드 아키텍쳐를 이용해서 다른 프로젝트에 정적파일로 넣는 방법을 하고 있습니다.그런데, build 시에 .html 에서 js, css 를 /assets/ 경로로 참조하는 것에 문제가 발생했습니다. 우리가 원하는 경로는  ./assets/ 입니다.방법은 아래와 같이 vite.config.js 에서 base 를 추가하여 상대 경로로 변경해줍니다.import { defineConfig } from "vite";import react from "@vitejs/plugin-react";export default defineConfig({ plugins: [react()], base: "./", // 상대 경로 설정});