../../ 라는 무한 굴레에서 벗어나 절대 경로로 코드를 깔끔하게 관리할 수 있다.../../ 가 반복되어 가독성이 떨어지던 찰나에import { useAuth } from '../../hooks';
import { useAuth } from '../../components';
import { ROLE_NAME } from '../../constants';import { useAuth } from '@/hooks';
import { useAuth } from '@/components';
import { ROLE_NAME } from '@/constants';craco 무엇인가?npm i -D @craco/cracomy-app
├── node_modules
+ ├── craco.config.js
+ ├── jsconfig.json
└── package.json// craco.config.js
const { CracoAliasPlugin } = require('react-app-alias');
module.exports = {
plugins: [
{
plugin: CracoAliasPlugin,
options: {
source: 'jsconfig',
baseUrl: '.',
jsConfigPath: './jsconfig.json',
},
},
],
};// jsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
},
"exclude": ["node_modules"]
}// package.json
{
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
"eject": "craco eject"
},
}package.json 파일에 들어가서 "scripts" 부분을 자세히 보면 맨 마지막에 앱을 eject시킬 수 있는 명령어가 있다.npm run eject 혹은 yarn eject를 실행하면 숨겨져 있던 모든 설정들(All configurations, webpack, Babel 설정 파일 등)과 패키지들이 가지는 의존성을 볼 수 있다.간단한 의존성 설치 과정만 거치면 깔끔하게 코드를 정리 할 수 있고, 이런 코드를 볼 때마다 마음이 편해진다. 사용해 본 경험으로 craco 패키지를 쓰지 않을 이유가 없다. (모든 프로젝트에 적용 중)