서론

프로젝트 생성할때마다 path alias 설정을 까먹어서 찾아보는게 귀찮기 때문에 직접 정리해두려 한다. 참고 글마다 적용방법도 미세하게 다르고 버전도 다르기 때문에 본인이 자주 사용하는 방법을 정리해두는 것은 좋은 것 같다.
컴포넌트나 상수값, 타입등을 import할때 보통 상대 경로(../../component/page.tsx)로 지정되는데 루트부터 시작해서 절대 경로(src/component/page.tsx)로 사용하면 깔끔하게 사용할 수 있다.

개발 환경은 아래와 같다.

• React 18.2.0

• Typescript 5.2.2

• vite 5.0.8

vite config

vite는 참 편리하게 config 파일을 조금만 건드려줘도 원하는 설정을 해줄 수 있기 때문에 편하다.

vite로 만든 프로젝트라면 vite.config.ts 라는 파일이 있을텐데 여기서 프로젝트의 빌드 및 개발 환경 설정들을 간단하게 해줄 수 있다. vite 플러그인을 설치하거나 빌드 옵션 설정, 개발 서버 설정, 모듈 해석 규칙, 전역 css 설정, proxy 설정 등이 가능하다.

alias는 별칭이라는 뜻이다.

path alias 설정도 아래와 같이 간단하게 설정해줄 수 있다.

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    resolve: {
        alias: [{ find: '#', replacement: '/src' }],
    },
});

'#'이라는 경로를 사용하면 '/src'경로로 대체해주는 설정이다. 만약 alias를 여러개 설정해주고 싶다면, 배열안에 객체형태로 추가해주면 된다. 각각의 객체는 find와 replacement 속성을 가지고 있어야 한다.

다른 글들을 참고해보면 replacement에 path를 사용하는데 Node.js에서 기본적으로 path모듈을 제공해주지만, TypeScript에서는 path 모듈의 타입 선언이 포함된 @types/node패키지가 별도로 필요하다.

하지만 우리는 편리한 vite를 사용하니까 굳이 별도의 패키지를 설치하지 않고 위 코드와 같이 사용하면 된다.

"파일 시스템 경로에 별칭을 만들 때에는, 반드시 절대 경로를 사용하세요. 상대 경로 별칭은 있는 그대로 사용되며, 파일 시스템 경로로 적절하게 해석되지 않습니다." 라고 공식 문서에서 얘기하니 주의하도록 하자.
공용 옵션 | Vite

vite.config.ts라는 파일만 설정한다고 끝나는게 아니다. 이대로 사용한다면 TypeScript가 "모듈 또는 해당 형식 선언을 찾을 수 없습니다." 라고 말할 것이다. TypeScript가 모듈을 해석해야 하는데 아무것도 알려주지 않았기 때문에 모듈 경로를 정상적으로 찾지 못하는 것이다.

ts config

TypeScript로 프로젝트를 생성하면 tsconfig.json파일이 자동으로 생성되는데 파일 안에 compilerOptions에 여러가지 설정들이 들어있다. 우리 브라우저 친구들은 TypeScript 코드를 읽지 못하기 때문에 TypeScript 코드를 다시 JavaScript로 컴파일해줘야 하는데, tsconfig.json파일이 이런 컴파일 규칙, Bundler 설정등을 담고 있다.

기존에 있던 설정을 건드릴 필요는 없고 baseUrl과 paths만 추가해주면 된다.

{
    "compilerOptions": {
     
        ...
        
        /* alias */
        "baseUrl": ".",
        "paths": {
            "#/*": ["./src/*"]
        }
    },
}

baseUrl은 모듈의 기본 경로를 설정해준다. 즉, 이 디렉토리를 기준으로 상대 경로나 alias가 해석된다. "."으로 설정해두면 현재 프로젝트 디렉토리 설정된다.

paths는 모듈 경로에 대한 alias를 설정한다. "#/*" 을 보면 와일드카드를 사용해 "#"으로 시작하는 어떤 경로든 "./src/*" 경로로 대체된다. 여러개의 경로를 사용한다면 paths객체안에 키와 값을 추가해서 설정해주면 된다.

만약 설정이 끝났음에도 정상작동하지 않는다면 코드 에디터를 껐다가 다시 켜보자.

VS Code 모듈 경로 설정

보통 프론트엔드 개발을 한다면 VS Code를 사용할텐데, alias 설정 이후 import 경로 자동완성에 설정한 경로가 안나올 것이다. 이는 코드 에디터의 기본 설정 때문이다. 에디터 설정에서 typescript.preferences를 검색하면 맨 위에 import Module Specifier 라는 설정이 있을텐데 자동 가져오기 경로의 스타일을 변경해주는 설정이다.

기본값이 shortest일텐데 제일 빠른 상대 경로로 자동완성 시켜준다는 옵션이다. non-relative로 바꿔주면 tsconfig.json파일에 설정을 참고해서 경로를 자동완성 시켜준다.

VS Code는 settings.json 설정파일도 건드릴 수 있는데 여기서 변경하고 싶다면 아래 코드를 추가해주면 된다.

{
	"typescript.preferences.importModuleSpecifier": "non-relative"
}

이제 설정한 경로에 대해서 코드 에디터가 경로를 자동완성 해줄 것이다.

마무리

프론트라고 막연하게 UI만 개발하는 것이 아니라 이런 프로젝트 설정이나 컴파일 설정도 건드릴 줄 알아야 한다. 이런 작은 차이 하나하나가 쌓이면 생산성을 높여주고 개발 경험이 좋아진다. 그렇다고 필수는 아니기 때문에 상황에 맞게 사용하자.