> Frontend/React
TIL-2024.05.11 - Alias 설정
Janku
2024. 5. 11. 17:28
질문
1. import 경로를 간단하게 만드는 방법을 알려줘 ! (alias 설정으로)
alias
- src 디렉토리에 alias를 설정
- 이 방법은 import 경로를 간단하게 만들어 주고, 코드의 가독성을 높여줌
1. tsconfig.json 파일 수정
- 프로젝트의 루트 디렉토리에 있는 tsconfig.json 파일을 열고, compilerOptions 섹션에 paths 설정을 추가
- baseUrl은 프로젝트의 기본 경로를 설정하는 옵션
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"]
},
... 생략 ...
}
}
2. craco 설치
- react - webpack 사용시, webpack 의 설정값을 바꾸기 힘들기 때문에, 설정값을 변경하기 위해 설치.
yarn add @craco/craco
3. craco.config.js 파일 생성
- 프로젝트 루트에 craco.config.js 파일을 생성하고, 다음과 같이 alias 설정을 추가
const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin');
module.exports = {
plugins: [
{
plugin: {
overrideWebpackConfig: ({ webpackConfig }) => {
webpackConfig.resolve.plugins.push(new TsconfigPathsPlugin({}));
return webpackConfig;
}
}
}
]
};
4. 설치 완료 !
...생략...
import TestIndex from "@/pages/Test/TestIndex";
...생략...
답변
1. import 경로를 간단하게 만드는 방법을 알려줘 ! (alias 설정으로)
- tsconfig.json 수정 > craco 설치 > craco.cofig.js 수정해서 alias 설정 가능 !