절대 경로 사용해서 가독성 높이기
절대경로와 상대경로
✨상대 경로
현재 파일의 위치를 기준으로 연결하려는 파일의 상대적인 경로를 의미
■ 장점:
주소나 프로젝트 디렉토리 위치가 바뀌어도 내부 구조만 그대로라면 수정 없이 그대로 사용할 수 있음
■ 단점:
코드를 import 해올 때 폴더가 깊어지면 복잡해지고 가독성이 떨어짐
#사용 방법
- 같은 폴더 내에 위치한다면
./을 사용해서 파일을 가져옴 - 상위 폴더에 위치한다면
../을 사용해서 상위 경로로 이동한 뒤 파일을 가져옴
💻 예시
1
2
3
import Home from "./pages/Home";
import Button from "../components/Button";
import styles from "../../assets/css/index.css";
✨절대 경로
파일의 root부터 해당 파일까지의 전체 경로
■ 장점:
어느 곳에서든 경로에 접근할 수 있음
■ 단점:
경로가 변경되면 하나하나 수정해야 함
💻 예시
1
2
https://hyemin12.github.io/categories/html-css/
C:\Users\user\Desktop\JS-project\blog>
리액트, 타입스크립트에서 절대 경로 사용하기
자바스크립트 프로젝트에서는 jsconfig.json, 타입스크립트 프로젝트에서는 tsconfig.json 파일에 옵션을 설정하면 된다.
1. src 폴더를 절대 경로로 설정하기
compilerOptions 의 baseUrl 옵션을 src 폴더로 지정하면 된다.
💻 예시
1
2
3
4
5
{
"compilerOptions": {
"baseUrl": "src",
},
}
💡 JSX / TSX 파일에서 사용할 때
src가 루트 경로로 설정되어있기때문에, src를 기준으로 파일의 경로를 작성하면 된다.
1
import Home from "src/pages/Home";
만약, 파일의 경로를 설정할 때 해당 루트를 포함하지 않고 싶다면, jsconfig.json 또는 tsconfig.json 파일에 include 옵션을 추가해주면 된다.
💻 예시
1
2
3
4
5
6
{
"compilerOptions": {
"baseUrl": "src",
},
"include": ["src"],
}
💡 JSX / TSX 파일에서 사용할 때
1
import Home from "pages/Home";
2. 별칭을 만들어 절대 경로 여러개 설정하기
jsconfig.json 또는 tsconfig.json 파일에서 baseUrl 옵션을 . 으로 지정하고, paths 옵션을 사용해 별칭을 지정하면 된다.
1
2
3
4
5
6
7
8
9
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"경로 별칭": ["경로/*"],
}
},
"include": ["src"],
}
💻 예시
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@components/*": ["src/components/*"],
"@pages/*": ["src/pages/*"],
"@utils/*": ["src/utils/*"],
"@store/*": ["src/store/*"],
"@hooks/*": ["src/hooks/*"],
"@/*": ["src/*"]
}
},
"include": ["src"],
}
💡 JSX / TSX 파일에서 사용할 때
1
2
3
import AddToCartButton from "@components/button/AddToCartButton";
import { Product } from "@store/products/products.type";
import { useAppSelector } from "@hooks/redux";
3. 만약 vite를 사용한 프로젝트를 하고 있다면?
vite를 사용한 프로젝트를 하고 있다면, vite.config.js 또는 vite.config.ts 파일에 추가 설정을 해주어야 한다.
단, jsconfig.json 또는 tsconfig.json 파일에 작성한 경로와 일치하게 작성해야한다.
1) path를 사용한 방법
1
2
3
4
5
6
7
8
9
export default defineConfig({
plugins: [react()],
resolve: {
alias: [
{ find: "별칭", replacement: 절대경로 },
{ find: "@", replacement: path.resolve(__dirname, "src") }
]
}
});
💻 예시
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: [
{ find: "@", replacement: path.resolve(__dirname, "src") },
{ find: "@pages", replacement: path.resolve(__dirname, "src/pages") },
{ find: "@utils", replacement: path.resolve(__dirname, "src/utils") },
{ find: "@store", replacement: path.resolve(__dirname, "src/store") },
{ find: "@hooks", replacement: path.resolve(__dirname, "src/hooks") },
{
find: "@components",
replacement: path.resolve(__dirname, "src/components")
}
]
}
});
2) 간단한 방법
별도로 path를 import 해오지 않아도 되기 때문에, 위의 방법보다는 간단하다.
만약 vite와 타입스크립트를 모두 사용하고 있다면 tsconfig.json과 vite.config.ts 두 개의 파일에 옵션을 추가해 줘야한다.
1
2
3
4
5
6
7
8
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
별칭: "경로"
}
}
});
💻 예시
1
2
3
4
5
6
7
8
9
10
11
12
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
"@": "/src"
}
}
});
참고 사이트