1. 절대 경로와 상대 경로
VS Code를 이용하면 각 파일을 import 해줄 때 우리는 종종 아래와 같은 형식을 사용한다.
ex) import Button from '../../../src/components/Button'
이는 상대경로로 현재 import 하는 파일의 디렉토리 기준으로 원하는 파일의 경로를 찾아가게 된다.
상대 경로를 사용하게 되면 절대경로를 사용할때와는 달리 상위 디렉토리의 이름이 바뀌는 경우 등에 있어 문제없이 작동한다. 하지만 이런 상대경로를 계속해서 이용하는 것은 현재 프로젝트 구조에서 많은 불편함을 유발한다. 그래서 나는 import를 자주할 파일 즉, 컴포넌트 들의 특정 디렉토리를 절대경로로 지정하여 쉽게 import 할 수 있도록 설정하려고 한다.
ex) import Button from '@components/Button'
2.절대 경로 설정
1) tsconfig.json 수정
우선 프로젝트 루트 디렉토리에 있을 tsconfig.json 파일을 수정해야 한다.
compilerOptions에 baseUrl과 paths 설정을 추가하자(의미는 주석으로 설명)
{
"compilerOptions": {
"baseUrl": ".", // 현재 디렉토리를 기준으로 한다.
"paths": {
"@src/*": [ //@src로 시작하면 아래 줄의 디렉토리를 의미한다.
"src/*" //baseUrl을 기준으로 src/ 하위 디렉토리를 @src로 표현
],
"@components/*": [
"src/components/*"
],
"@styles/*": [
"src/styles/*"
]
}
},
} 아마 JavaScript를 사용하고 있다면 위의 코드만 넣으면 될 것이다. 하지만 TypeScript를 위의 코드로 절대경로를 설정하기 위해서는 @types/node 라는 패키지가 필요하다.
npm i -g @types/node를 통해 추가하도록 하자.
@types/node 공식 페이지에서 확인하도록 하자.
2) vite.config.ts 수정
나는 빌드 도구로 Webpack이 아닌 Vite를 사용했기 때문에 vite.config.ts 파일을 수정해줘야 한다. 만약 본인이 React 프로젝트 시작을 CRA로 했다면 Webpack.config 파일을 수정해야 할 것 이다.
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { resolve } from 'path'
// https://vitejs.dev/config/
export default defineConfig({
resolve: {
alias: [
{ find: '@src', replacement: resolve(__dirname, 'src')},
{ find: '@components', replacement: resolve(__dirname, 'src/components')},
{ find: '@styles', replacement: resolve(__dirname, 'src/styles')}
]
}
})
3) .storybook/main.js 수정
마찬가지로 나는 Vite를 썻고, 또 디자인 도구로 Storybook을 사용했기 때문에 .storybook/main.js 파일도 수정해야한다.
const path = require('path');
module.exports = {
viteFinal: async (config, { configType }) => {
config.resolve.alias = {
...config.resolve.alias,
'@src': path.resolve(__dirname, "../src"),
'@components': path.resolve(__dirname, '../src/components'),
'@styles': path.resolve(__dirname, '../src/styles')
};
return config;
}
}
4) jest.config.ts 수정
위와 같이 설정을 한 뒤 일반 코드에 작성한 것처럼 Jest에도 절대경로를 사용할 수 있다고 생각을 하겠지만 테스트를 할 경우 에러가 발생됩니다.
module.exports = {
moduleNameMapper: {
'^@/(.*)$': '<rootDir>/src/$1' // @/로 시작하는 경로를 src/ 경로로 설정
}
};[참고 링크]
