TIL-2024.05.11 - Alias 설정

 

 

 

질문

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 설정 가능 !