[TIL] 미니 프로젝트 기술 레퍼런스 찾기

Vite 환경변수 설정

가장 흔하게 리액트앱을 만드는 CRA (create-react-app)의 경우 .env 파일에 REACT_APP_을 prefix로 써야 리액트 앱이 인식할 수 있다. 그리고 앱에서 process.env.으로 접근하여 사용할 수 있었다.

 

Vite는 따로 dotenv 패키지를 설치해주지 않아도 되고, 공식 문서에 따르면 파일 prefix를 VITE_로 적어줘야 한다고 한다.
그리고 앱에서 import.meata.env.로 접근할 수 있다.

https://velog.io/@riley_dev/React-vite%EC%97%90%EC%84%9C-%ED%99%98%EA%B2%BD%EB%B3%80%EC%88%98-.env-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0

[React] vite에서 환경변수 .env 설정하기

https://vitejs.dev/guide/env-and-mode.html

Vite

프로젝트 development, production 설정하기

Vite

msw 사용하기

backend api 배포가 되기 전에 개발하기 위해서 mock api를 설계해보자

// devdependency에 msw 추가
$ npm i -D msw
// public 디렉토리에 서비스 워커 코드 세팅하기
$ npx msw init public/ --save

// src/mocks/worker.js

import { setupWorker } from 'msw';
import { handlers } from './handlers';

export const worker = setupWorker(...handlers);

// /src/mocks/handlers.js

import { rest } from 'msw';

const todos = ['먹기', '자기', '놀기'];

export const handlers = [
  // 할일 목록
  rest.get('/todos', (req, res, ctx) => res(ctx.status(200), ctx.json(todos))),

  // 할일 추가
  rest.post('/todos', (req, res, ctx) => {
    todos.push(req.body);
    return res(ctx.status(201));
  }),
];

function Home() {
  axios.get('/todos').then((res) => {
    console.log(res.data);
  });
  return <MainPageTemplate>Home</MainPageTemplate>;
}

MSW로 백앤드 API 모킹하기

eslint  devdependency 제한 규칙 (msw)

'import/no-extraneous-dependencies': [
      'error',
      { devDependencies: ['**/mocks/*'},
    ], // mock server devdependency 사용 제한 규칙 해제

msw를 사용할 mocks 디렉토리만 devDependency 사용 제한 규칙을 해제했다

GitHub - import-js/eslint-plugin-import: ESLint plugin with rules that help validate proper imports.

API mocking

https://blog.mathpresso.com/msw%EB%A1%9C-api-%EB%AA%A8%ED%82%B9%ED%95%98%EA%B8%B0-2d8a803c3d5c

MSW로 API 모킹하기

Axios 설계하기

https://pinokio0702.tistory.com/373

[Axios][업무][베트남🇻🇳] - Axios instance 생성하고 api 요청 함수 작성하는 방법

instance

https://yamoo9.github.io/axios/guide/config-defaults.html

Config 기본 설정 | Axios 러닝 가이드

 

interceptors

https://yamoo9.github.io/axios/guide/interceptors.html

인터셉터 | Axios 러닝 가이드

Alert

https://sweetalert2.github.io/

SweetAlert2

https://mui.com/material-ui/react-alert/

React Alert component - Material UI