[TIL] 내일배움캠프 React 과정 2024.05.28

오늘의 한 일

• 개인 지출 관리 웹
  • README.md 작성
  • import 절대 경로 설정
• 매모 앱
  • nested router를 활용하여 각 메모의 상세페이지 구현
  • localStorage를 활용하여 사이트를 껐다켜도 데이터 유지
  • 사용자의 입력 debounce 처리
• 챌린지반 수업 복습
  • redux

오늘의 문제 해결

문제: 파일의 절대경로 설정하기

방법1: Craco library 활용

• npm i -D @craco/craco로 craco를 설치 후

• craco.config.js 파일 생성 및 package.json 파일을 수정한다.

  //craco.config.js
  const path = require("path");
  
  module.exports = {
   webpack: {
     alias: {
       "@": path.resolve(__dirname, "src/"),
       "@components": path.resolve(__dirname, "src/components/"),
       "@headers": path.resolve(__dirname, "src/components/headers/"),
       "@pages": path.resolve(__dirname, "src/pages/"),
     },
   },
  };

  //package.json
  "scripts": {
   "start": "craco start",
   "build": "craco build",
   "test": "craco test",
   "eject": "react-scripts eject"
  },

• 그러나 이번 프로젝트에서 굳이 라이브러리를 사용할 필요를 못 느꼈다.

방법2: jsconfig.json 파일 수정

• jsconfig.json 파일을 생성하고 수정하는 방법

  {
   "compilerOptions": {
     "baseUrl": "./src",
     "paths": {
       "@/*": ["*"]
     },
  }

• 인터넷에 가장 흔하게 볼 수 있는 방법인데 vite로 bulid한 react 프로젝트에서는 작동하지 않는다...

방법3: vite.config.js 파일 수정

• vite를 생성하면 기본적으로 생성되어있는 vite.config.js 파일을 수정하는 방법

  import react from "@vitejs/plugin-react";
  import path from "path";
  import { defineConfig } from "vite";
  
  export default defineConfig({
   plugins: [react()],
   resolve: {
     alias: [{ find: "@", replacement: path.resolve(__dirname, "./src") }],
   },
  });

• vite를 사용하여 react를 build 했을 때 적용할 수 있는 방법

• 따라서 이번 프로젝트에 가장 알맞은 방법이다!

오늘의 회고