tsconfig의 baseUrl, paths 설정

개발을 하다 보면 직접 만든 utils 또는 프론트엔드의 경우 components 폴더, styles 폴더 등 현재 작업 파일과 다른 경로의 파일들을 import 시켜야 할 때가 있다.

 

import 시킬 필요가 없는 파일은 아주 단순한 스크립트이거나 온갖 로직을 하나의 파일에 다 작성할 때인데 별로 좋지 않은 패턴이다.

 

그래서 파일의 상단에는 다음과 같은 현상이 일어난다.

import styled from 'styled-components';
import { TextField } from '../../components/textfield';

...

line 1과 line2가 import 방식이 조금 다른 것을 알 수 있다.

 

line 1의 styled의 경우 styled-components라는 npm 패키지 모듈로써 프로젝트의 최상단 경로에 있는 node_modules 폴더에 있기 때문에 node.js 프로젝트라면 별도로 앞에 경로를 붙이지 않아도 잘 작동한다.

 

line 2의 TextField의 경우 프로젝트 내에서 직접 작성한 UI 컴포넌트이다.

 

"../" 이란 현재 파일의 바로 상위의 경로를 뜻하며, 따라서 "../../"란 현재 파일의 경로보다 두 단계 위의 경로를 뜻한다.

 

즉, "../../components/textfield"란 현재 파일 기준 두 단계 위의 상위 경로에 있는 components 폴더로 접근해서 그 하위에 있는 textfield라는 경로에서 모듈을 가져오라는 말이다.

 

이런 방식이 좀 예쁘진 않아도 일단 작동하는데는 문제가 없지만 추후 계속 프로젝트를 작성하거나 리팩토링 할 때 문제가 발생할 수 있다.

 

만약 현재 파일이 존재하는 경로 기준 하위 경로의 파일에서 같은 모듈을 불러온다면 다음과 같이 import 할 것이다.

import styled from 'styled-components';
import { TextField } from '../../../components/textfield';

...

 

TypeScript 프로젝트에서는 tsconfig.json 파일이 프로젝트 최상단 경로에 존재하게 되는데, 거기서 여러 편의 설정을 할 수 있다.

{
  "compilerOptions": {
    ...,
    "baseUrl": ".",
    ...
  },
  ...
}

 

위와 같이 compilerOptions에  baseUrl을 "."으로 설정하면 기본 경로를 프로젝트 최상단으로 설정하겠다는 말이다.

그럼 아래와 같이 점박이들을 다 없애고 깔끔하게 작성할 수 있다.

import styled from 'styled-components';
import { TextField } from 'src/components/textfield';

...

이렇게 작성하면 현재 파일과 다른 경로에 파일을 만들어서 동일한 모듈을 import하려고 복사 붙여넣기를 할 때 별도로 경로를 바꾸지 않아도 된다.

 

아무리 depth가 깊은 곳에 있는 파일이라도 TextField라는 모듈을 불러올 때 모두 동일하게 작성할 수 있다.

 

하지만 이것도 예쁘지 않고 뭔가 좀 비효율적이라는 생각이 든다.

웬만한 모듈들은 다 src 하위에 있을 거라 일단 죄다 앞에 src를 붙여야 한다.

 

그렇다고 baseUrl을 "./src" 이렇게 설정하기에는 프로젝트 최상단에 있는 여러 각종 파일이나 폴더 등이 영향을 받을 수도 있다.

 

그래서 다음과 같이 "paths"를 추가 설정을 한다.

{
  "compilerOptions": {
    ...,
    "baseUrl": ".",
    "paths": {
      "components/*": [
        "src/components/*"
      ],
      "pages/*": [
        "src/pages/*"
      ],
      "styles/*": [
        "src/styles/*"
      ],
      "utils/*": [
        "src/utils/*"
      ],
    },
    ...
  },
  ...
}

 

그럼 파일에서는 다음과 같이 import해도 된다.

import styled from 'styled-components';
import { TextField } from 'components/textfield';

...

 

아름답다.