Expo 절대 경로 설정하기 (Path Alias)

왜 Path Alias 를 사용하나?

import { PreviewType } from "../../../../../types/PreviewType";

IntelliJ 가 아니라면 대체 어느 폴더인지 알수가 없는 ../../ 이다 types 폴더가 다른 depth에 동일한 이름으로 존재한다면, 어떤건지 보고 알기 쉽지가 않다. 그래서 절대 경로를 사용하기 위해서 프로젝트 초기 부터 세팅을 하고자 한다.

React 의 경우는 Webpack 을 사용하고 대부분의 경우의 예제가 React라서, Expo (또는 React Native) 기준으로 한번 알아보았다.

우선 babel-plugin-module-resolver 를 추가 한다.

yarn add -D babel-plugin-module-resolver

그후 babel.config.js파일에 아래와 같이 Path를 등록해준다. 보통 @를 많이 붙이는것 같은데, @type과 혼동 될것 같고, 개인 사이드 프로젝트라 #으로 지정했다.

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    plugins: [
      [
        'module-resolver',
        {
          root: ['.'],
          alias: {
            '#Navigation': './navigation/',
            '#Images': './assets/images/'
          }
        }
      ]
    ]
  };
};

그리고 Typescript를 사용하는 경운 tsconfig.json 파일에도 추가가 필요하다. 아래처럼 추가를 해줬다.

{
  "extends": "expo/tsconfig.base",
  "compilerOptions": {
    "baseUrl": ".",
    "typeRoots": ["./node_modules/@types", "@types"],
    "paths": {
      "#Navigation/*": [
        "./navigation/*"
      ],
      "#Images/*": [
        "./assets/images/*"
      ]
    }
  }
}

이렇게 작성하니 사용하는곳에서 사용은 되지만, eslint 에서 에러가 났다.

이 문제를 해결하기위해서 아래와 같이 eslint-import-resolver-typescript 를 설치한다.

yarn add -D eslint-import-resolver-typescript

그리고 사용중인 eslint설정 부분, 저 같은경운 .eslintrc.js에 아래와 같이 추가했다.

  "typescript": {}, ← 추가 (tsconfig 관련 세팅을 읽어옴)

...
settings: {
    'import/resolver': {
      "typescript": {},
      node: {
        extensions: ['.js', '.jsx', '.ts', '.tsx'],
      },
    },
  },
...