[React] 절대경로 설정하기 (with WebPack, TS)

프로젝트를 만들 때 모듈 파일을 가져오거나 로컬의 이미지 파일을 사용하는 등
파일 외부에 위치한 자원을 현재 파일에서 사용하기 위해선 JS가 제공하는 import 구문을 제공합니다.

이때 import 구문 뒷 부분에 가져오려는 자원에 대한 위치를 명시해야 하는데
별도의 설정이 없다면 경로의 앞 부분에 ./이 붙은 형태인 상대경로를 사용하게 됩니다.

상대경로는 현재 파일의 위치를 기준으로 외부 파일의 위치를 명시하는것으로
프로젝트의 규모가 커지고 폴더 구조가 깊어지면 경로 부분이 길어지게 되어 가독성을 해칠 수 있습니다.

또한, 만약 현재 파일의 위치를 변경하게 되었을 때는 파일 내부에서 사용하는 모든 import 경로를 다시 변경해주어야하는 불편함이 따르게 됩니다.

└ src
  ├ a1
  │  └─ b1
  │     └─ c1
  │         └─ f1
  ├ a2
  │  └─ b2
  │     └─ f1

예를 들어, 위와 같은 구조에서 b2의 f1파일에서 c1의 f1파일을 가져오려면
import * from '../../a1/b1/c1/f1'; 처럼 경로가 길어지게 됩니다.

하지만, 루트 경로를 기준으로 파일의 위치를 명시하는 절대 경로를 사용 할 경우 import * from 'a1/b1/c1/f1'; 와 같이 보다 간결하게 표현할 수 있습니다.

절대경로는 상대경로에 비해 비교적 느리다는 단점이 있지만 위에서 말한 단점들을 해소해줄 수 있기 때문에 오늘은 절대 경로를 사용하기 위해 어떻게 설정해야하는지에 대해 알아보겠습니다.

React 환경

리액트 환경에서는 프로젝트의 최상위인 루트 경로에 jsconfig.json 파일을 추가함으로써 설정할 수 있습니다.

{
    "compilerOptions": {
        // "." || "src"
        "baseUrl": "src",
        "paths": {
            // "name": [value]
            "components/*": ["components/*"]
        }
    }
}

• baseUrl
  baseUrl 속성은 절대경로가 입력되었을 때 파일을 찾을 기준 경로를 설정하는 속성입니다.
  만약, "."으로 입력 할 경우 jsconfig.json 파일이 위치한 경로를 말하며
  리액트에서는 보통 src 폴더 내부에서 파일들을 생성하므로 src로 설정하는 경우가 많습니다.

• paths
  paths 속성은 위에서 지정한 baseUrl 값을 기준으로 특정 위치를 맵핑할 수 있는 속성입니다.
  baseUrl 설정만으로 절대경로를 사용할 수 있지만 자주 사용되는 특정 위치들을 추가로 맵핑하고 싶을 때 설정합니다.

// baseUrl의 값이 "."일 때

// path 미 설정시 src 부분 반복 사용
import Header from 'src/components/Header/Header';
import Section from 'src/components/Section/Section';
import MouseIcon from 'src/assets/~~~';
import LoginIcon from 'src/assets/~~~';

// components와 assets에 대한 path 설정시
import Header from 'components/Header/Header';
import Section from 'components/Section/Section';
import MouseIcon from 'assets/~~~';
import LoginIcon from 'assets/~~~';

paths의 key 부분이 우리가 import할 때 사용하는 부분이며 값은 baseUrl을 기준으로 입력해주어야 합니다.

이렇게 paths를 설정하게 되면 컴파일 시 입력한 절대경로 값의 앞 부분에 baseUrl을 추가해주는 방식으로 컴파일이 진행됩니다.

Ex) components/Header -> <baseUrl>/components/Header

특히, 값을 배열로 받는데 이는 만약 배열의 첫번째 경로에서 해당 파일을 찾을 수 없을 경우 그 다음 경로에서 파일을 찾기 때문입니다.

TS 환경

TS를 사용할 때는 tsconfig.json이라는 파일을 루트 경로에 생성합니다.

사실 jsconfig 파일은 tsconfig의 하위 파일이기 때문에 위에서 설정한것처럼 해주면 됩니다.
따라서, 만약 TS를 사용하고 있는 프로젝트라면 jsconfig없이 tsconfig만 사용해주면 됩니다.

Webpack 환경

Webpack은 webpack.config.js라는 파일을 통해 웹팩 관련 설정을 할 수 있습니다.
이 때 resolve의 alias라는 속성을 통해 아래와 같이 절대 경로를 설정할 수 있습니다.

const path = require('path');

module.exports = {
    // .....
    resolve: {
        alias: {
            "components": path.resolve(__dirname, './src/components'),
        },
    },