절대경로란 : 최초의 시작점으로 경유한 경로를 전부 나타내는 경로
상대경로 : 비교대상과의 경로

---

Ch1. install

yarn add --dev babel-plugin-module-resolver

Ch2. setting

babel.config.js

• api.cache(true) => 방법으로 캐시를 활성화하면 config 함수가 한 번만 호출!

module.exports = function (api) {
    api.cache(true);
    return {
        presets: ['module:metro-react-native-babel-preset'],
        plugins: [
            [
                'module-resolver',
                {
                    root: ['./src'],
                    extensions: [
                        '.ios.ts',
                        '.android.ts',
                        '.ts',
                        '.ios.tsx',
                        '.android.tsx',
                        '.tsx',
                        '.jsx',
                        '.js',
                        '.json',
                    ],
                    alias: {
                        '@': './src',
                        '@components': './src/components',
                        '@hooks': './src/hooks',
                        '@layout': './src/layout',
                        
                    },
                },
            ],
        ],
    };
};

• tsconfig.json

compilerOptions:{
...
"baseUrl": "./src",
    "paths": {
      "@/*": ["./*"],
      "@components/*": ["components/*"],
      "@hooks/*": ["hooks/*"],
      "@layout/*": ["layout/*"],
    }

}

Ch3. 결과

오류시

캐시를 리셋을 시도

$ yarn start —reset-cache

해당 부분까지 작업을 완료 후 경로가 재정의 되는것을 확인.