절대경로, 상대경로

React absolute / relative path

relative path(상대경로)

import styles from '../../../styles';

이런 구조라면 import하기 복잡하고 힘들어진다.

absolute path(절대경로)

import styles from 'styles';

Use absolute path(src 기준)

1. Babel Plugin
   

   "plugins": [
    [
     "module-resolver",
     {
      "alias": {
       "~/*": "./src"
      }
     }
    ],
    ...
   ]
   

2. Webpack
   

   // webpack.config.js
   resolve: {
    modules: [
     path.join(__dirname,"src"),
     "node_modules"
    ]
   }
   

3. Package.json
   

   "scripts": {
   "start": "REACT_APP_ENV=development NODE_PATH=./src react-scripts start",
   "build": "REACT_APP_ENV=production NODE_PATH=./src react-scripts build",
   ...
   },
   

VSCode path(파일 추적 가능하도록)

// javascript -> jsconfig.json
// typescript -> tsconfig.json
// 파일 생성 후 아래 코드 복사
{
 "compilerOptions": {
  "baseUrl": ".",
  "paths": {
   "*": [
    "*",
    "src/*"
   ]
  }
 }
}