expo 절대 경로 import

기본적으로 import 등은 상대적인 경로만 해결할 수 있기 때문에 import 주위는 ../../../Hoge와 같은 상대적인 경로로 개인이 보기 어렵다.
그래서 절대 경로를 사용하여 import을 가능하게 하려고 합니다.

디렉토리 구조의 예

.
├── App.tsx
├── assets
├── src
│   └── Hoge.tsx
..
└── tsconfig.json

tsconfig.json

뭐compilerOptions의baseUrl와paths를좋은느낌으로설정하면좋을 것 같아요.

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

babel.config.js

expo는babel로 컴파일된 것 같아서 tsconfig만 만지작거려도 컴파일할 때 path의 이름은 해결되지 않습니다.
따라서 babel에 패키지의 설치와 설정을 추가해야 합니다

# npm
$ npm i --save-dev babel-plugin-module-resolver
# yarn
$ yarn add -D babel-plugin-module-resolver

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

이때alias는tsconfig에서 설정한 값과 일치해야 합니다.

결실

../Hoge그렇게 부르다
완전 절대 패스는 아니지만 무한 접근 물건이라 좋아요!