절대경로 설정

2024.03.23 23:07

특정 컴포넌트나 파일을 import할 시 경로의 depth가 깊어지면 깊어질수록 import하려는 파일의 위치에 따라 상대경로가 상당히 길어질 수 있다.

import deep from '../../../../../../../A/B/C/file.js';
import deep1 from '../../../../../../../A/B/C/file1.js';
import deep2 from '../../../../../../../A/B/C/file2.js';
import deep3 from '../../../../../../../A/B/C/file3.js';
import deep4 from '../../../../../../../A/B/C/file4.js';

이런 식으로 상대경로가 길어지면 import할 파일을 찾기위한 수고가 커지고 가독성 면에서도 좋지 않다.

이런 경우 tsconfig.json 또는 jsconfig.json의 설정을 통해 절대경로를 설정할 수 있다.

`tsconfig.json` 이란?

typscript에 대한 설정을 할 수 있는 파일이며 javascript로 이루어진 레포지토리라면 jsconfig.json을 사용한다.

해당 레포지토리가 Typescript를 사용하고 있다면 루트 디렉토리에 tsconfig.json이 존재해야며 tsc명령어를 통한 컴파일시 로드한다.

컴파일러에 대한 옵션 설정과 더불어 다양한 기능을 제공한다.

// tsconfig.json의 예시
{
  "compilerOptions": {
    ...
  },
  "include": [...],
  "exclude": [...]
}

절대경로 설정하기

tsconifg.json에서 compilerOptions 옵션의 baseUrl과 paths를 이용해서 절대경로를 설정한다.

baseUrl의 경우 paths를 설정하기 위해서는 반드시 설정해야하는 옵션이다.

paths의 경우 key-value쌍으로 이루어진 객체이며 절대경로를 정의하고자 하는 경로의 이름을 key에 입력하며 baseUrl을 기준으로 상대적인 경로를 value에 입력한다.

{
  "compilerOptions": {
    "baseUrl": ".", // 이 경우는 `tsconfig.json`이 존재하는 루트 디렉토리를 기준으로 삼는다.
    "paths": {
      "@_components/*": ["src/components/*"],
      "@_apis/*": ["src/api/*"],
      "@_types/*": ["src/types/*"],
      "@_icons/*": ["public/assets/icons/*"],
      "@_images/*": ["public/assets/images/*"],
      "@_emojis/*": ["public/assets/emoji/*"]
    }
  }
}

위와 같은 paths를 지정한다면 실제로 루트 디렉토리를 기준으로한 구조는 다음과 같다.

Root
├─ public
│   └─ assets
│      ├─ icons
│      ├─ images
│      └─ emojis
└─ src
     ├─ components
     ├─ api
     └─ types

실제로 적용된 예시를 보자

import path1 from '@_components/home/main.tsx';
import path2 from '@_icons/sample.png';
import path2 from '@_apis/member'

특정 파일뿐만 아니라 모듈도 절대경로로 지정이 가능하다.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "jquery": ["node_modules/jquery/dist/jquery"]
    }
  }
}

추가

절대경로를 추가하는 paths가 늘어나면tsconfig.json의 extends옵션을 이용해서 따로 빼놓는 것도 가능하다.

기본 config 파일을 읽어온 후 extends에 지정한 파일에 의해 오버라이딩(overridden) 된다. include나 exclude에 정의한 파일의 경우 기본 config 파일을 덮어쓴다.(overwrite)

extends 옵션은 스트링값으로만 받는다. 여러 설정 파일을 extend하고 싶다면 줄줄이 이어받는 구조를 만들어야한다.

{
  "compilerOptions": {
    ...
  },
}
// tsconfig.b.json
{
  "compilerOptions": {
    ...
  },
  "extends": "./tsconfig.a.json"
}
// `tsconfig.json`
{
  "compilerOptions": {
    ...
  },
  "extends": "./tsconfig.b.json"
}

위에 설정한 파일을 따로 만들어 저장해둔다. 파일명은 어떤식으로 지어도 상관없으며, 어느 디렉토리에 속해도 된다. json형식이면 된다.

tsconfig.path.json을 루트 디렉토리에 만들어 사용할 수도 있다.

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@_components/*": ["src/components/*"],
      "@_apis/*": ["src/api/*"],
      "@_types/*": ["src/types/*"],
      "@_icons/*": ["public/assets/icons/*"],
      "@_images/*": ["public/assets/images/*"],
      "@_emojis/*": ["public/assets/emoji/*"]
    }
  }
}

tsconfig.json에 extends옵션을 추가한 뒤 확장하고자하는 json을 파일을 tsconifg.json을 기준으로한 상대경로로 입력해준다.

{
  "compilerOptions": {
    ...
  },
  "extends": "./tsconfig.paths.json"
}

참고

javascriptLexical Scope와 Closure javascriptPromise javascriptuseEffect 안에서 setInterval 사용하기 javascript프로토타입 javascript화살표 함수 변수List와 MutableList

절대경로 설정

tsconfig.json 이란?

절대경로 설정하기

추가

`tsconfig.json` 이란?