저번 프로젝트를 Next로 진행하고 디자인을 싹 바꿈과 동시에 코드 전체를 React로 다시 리팩토링 바꾸는 과정중에 Next에서 요긴하게 쓰였던 경로 alias를 React에서도 비슷하게 사용하는 방법에 대해서 알아보자

보통 프로젝트에서는 위와같이 다양하게 디렉토리를 나누어서 각 파일이 가지고 있는 형식과 목적에 따라서 다르게 구분하여서 작업을 한다.

각각의 파일들은 다른 파일에 첨부되기도 하며 첨부할 파일의 경로에 접근하여서 해당 파일을 첨부해야 한다.

물론 해당 첨부하려는 파일이 해당 파일이 필요한 파일 근처에 있다면 상대경로 지정에 있어서 난잡해 보이지 않겠지만 아래와 같이 상대경로로 지정하기에는 상당한(?)거리에 있다면 import문 자체를 정의할때도 굉장히 난해하게 정의하게 된다.

Next에서는 프로젝트를 생성할때 alias옵션을 yes로 선택하면 자동으로 만들어 주지만 React에서는 jsconfig혹은 tsconfig파일에 정의해줄 수 있다.

1. baseUrl 정의하기

1.1 jsconfig, tsconfig생성하기

먼저 tsconfig 혹은 jsconfig파일이 없다면 본인의 프로젝트가 JavaScript일 경우 jsconfig.json, TypeScript일 경우 tsconfig.json을 생성해준다.

파일의 위치는 프로젝트 디렉토리의 최상단에 생성해준다.(package.json파일과 동일선상이다.)

1.2 baseUrl 정의하기

baseUrl을 정의하기 위해서는 생성한 config파일에 compilerOptions를 먼저 정의해줘야 한다.

compilerOptions는 컴파일러가 프로젝트를 컴파일 할 때 컴파일러의 동작을 제어하고 필요한 옵션들을 정의할 수 있다.

그 후, 정의한 compilerOptions객체안에 baseUrl옵션을 정의해준다.

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

위와같이 baseUrl옵션을 .으로 정의하면 기본경로를 프로젝트의 최상단으로 정의할 수 있다.

import useAxios from "../../../hooks/useAxios";


import useAxios from "src/hooks/useAxios";

즉 위와같이 "../../../"으로 정의할 필요 없이 최상단 경로에서 "src/hooks/useAxios"와 같이 최상단에서부터 해당 파일이 어디에 위치하는지 경로를 작성하면 된다.

{
  "compilerOptions": {
    "baseUrl": "src"
  }
}

위와같이 baseUrl을 src으로 정의하면 기본 경로를 src로 정의할 수 있다.

import useAxios from "../../../hooks/useAxios";


import useAxios from "hooks/useAxios";

즉, 위와같이 src에서 파일의 위치가 어디에 위치하는지 경로를 작성하면 되는 것이다.

물론 이거도 맘에 안들 수 있다.

src디렉토리가 아닌 파일의 최상단에 위치한 다른 디렉토리에서 특정 파일을 import해야 하는 경우가 생길 수 도 있다.

이럴 경우에는 compilerOptions의 paths옵션을 정의하면 좀 더 자세하게 경로를 정의할 수 있다.

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

paths옵션은 특정경로의 정의를 짧게 정의 할 수 있다.

예를 들면 위의 "pages/*" 는 "src/pages/"를 함축적으로 정의한 것이다.

2. 마치며

간단하게 난잡한 import의 상대경로를 jsconfig, tsconfig를 통해서 간결하게 쓸 수 있는지에 대해서 알아봤다.

처음에는 "저게 필요할까?"라는 생각이였지만 Next에서 요긴하게 사용했던 alias 편함을 느낀 이후로는 프로젝트를 진행할때 빠져서는 안 될 옵션이 된 거 같다.