조금만 일찍 알았다면 좋았을 것을... ㅎ
import alias를 알고나서 전체 수정했다가 오류발생해서
50개가 넘는 파일을 수동으로 다 고쳤다 Haaaa
내가 곧 alias인거 같은데 ㅋㅋㅋ
뭐 그래도 적어놓고 나중에 참고해서 코딩해보자.
📌 Import Alias란?
import alias는 ES6 모듈 시스템에서 특정 모듈이나 변수에 별칭(Alias)을 설정하여 더 편리하게 사용할 수 있도록 하는 기능이야.
즉, 파일 경로가 길거나, 모듈 이름이 너무 길 때 단축하여 사용할 수 있도록 하는 기법
📌 Import Alias의 핵심 개념
| 방법 | 설명 |
|---|---|
| as 키워드 사용 | 동일한 이름의 여러 모듈을 구별할 때 |
| tsconfig.json의 paths 설정 | 긴 경로를 짧게 관리할 때 |
| default export에서 Alias 설정 | 컴포넌트명을 변경하여 가져올 때 |
그렇지만 이러한 요구사항을 쉽게 관리해주는 라이브러리도 존재한다고한다.
CRA기반으로 만들어진 React는 CRACO 라는 라이브러리로 관리할 수 있다고한다.
⭕️CRACO(Create React App Configuration Override) 는 Create React App (CRA) 프로젝트에서 Webpack 및 Babel 설정을 커스터마이징할 수 있도록 도와주는 라이브러리
그렇지마 나는 Vite엔진 기반으로 만들어진 React이므로 vite.config.ts에서 alias를 만들어보려고한다.
비교적 간단한 것 같다.
1️⃣ vite.config.js에서 alias 설정
/*vite.config.ts*/
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
"@components": path.resolve(__dirname, "src/components"),
"@utils": path.resolve(__dirname, "src/utils"),
},
},
});✅ 이렇게 하면 @components, @utils 등의 별칭(alias)을 설정할 수 있음!
2️⃣ 설정한 Import Alias를 사용하는 방법
이제 import할 때, 설정한 @components 및 @utils를 사용할 수 있어.
✔ 예제: @components Alias 사용하기
// 기존 방식 (❌ 너무 길다)
import Button from "../../components/common/Button";
// Alias 사용 (✅ 짧고 가독성 높음)
import Button from "@components/common/Button";✅ 이제 @components/를 사용하면 경로가 짧아지고 유지보수성이 좋아짐!
3️⃣ TypeScript 프로젝트에서 tsconfig.json도 함께 설정하기
만약 TypeScript를 사용하고 있다면, tsconfig.json에서도 같은 paths 설정을 추가해야 해.
✔ tsconfig.json 수정
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@components/*": ["src/components/*"],
"@utils/*": ["src/utils/*"]
}
}
}✅ 이렇게 하면 TypeScript에서도 Import Alias를 인식할 수 있음!
📌 결론
📌 Vite에서는 vite.config.js에서 resolve.alias를 설정하여 Import Alias를 사용할 수 있다.
📌 Webpack에서 CRACO를 사용했던 것처럼, Vite에서는 path.resolve(__dirname, "src/...")를 활용하면 된다.
📌 TypeScript를 함께 사용한다면 tsconfig.json의 paths도 함께 설정해야 한다.
