절대 경로 설정 ( module-resolver )

• 공식 깃헙 : babel-plugin-module-resolver

• 공식 도큐먼트 : https://github.com/tleunen/babel-plugin-module-resolver/blob/master/DOCS.md

• 참고 블로그 : https://aleksefo.medium.com/how-to-setup-module-resolution-and-path-aliases-with-react-native-and-typescript-f4924669780a ← 추천!

1) module-resolver 설정

설치

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

or 

$ npm install --save-dev babel-plugin-module-resolver

설정

프로젝트루트경로/babel.config.js

/* eslint-disable no-dupe-keys */

const pathPlugin = [
  [
    'module-resolver',
    {
      root: ['./'],
      extensions: [
        '.ios.ts',
        '.android.ts',
        '.ts',
        '.ios.tsx',
        '.android.tsx',
        '.tsx',
        '.jsx',
        '.js',
        '.json',
      ],
		  alias: {
        '*': './src',
        '@components': './src/components',
        '@navigators': './src/navigators',
        '@screens': './src/screens',
        '@assets': './src/assets',
        '@lib': './src/lib',
        '@recoil': './src/recoil',
        '@storage': './src/storage',
      },
    },
  ],
];

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: [...pathPlugin],
};

2) VSCode 자동완성 연동

• VSCode jsconfig 공식문서 : https://code.visualstudio.com/docs/languages/jsconfig

• babel-plugin-module-resolver 공식 문서 : https://github.com/tleunen/babel-plugin-module-resolver#editors-autocompletion

자바스크립트 프로젝트 : 프로젝트루트경로/jsconfig.json 타입스크립트 프로젝트 : 프로젝트루트경로/tsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "*": ["./src/*"],
      "@components/*": ["./src/components/*"],
      "@navigators/*": ["./src/navigators/*"],
      "@screens/*": ["./src/screens/*"],
      "@assets/*": ["./src/assets/*"],
      "@lib/*": ["./src/lib/*"],
      "@recoil/*": ["./src/recoil/*"],
      "@storage/*": ["./src/storage/*"]
    },
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
    "isolatedModules": true,
    "jsx": "react",
    "lib": ["es6"],
    "moduleResolution": "node",
    "noEmit": true,
    "strict": true,
    "target": "esnext"
  },
  "exclude": [
    "node_modules",
    "babel.config.js",
    "metro.config.js",
    "jest.config.js"
  ]
}

JS프로젝트에서 tsconfig.json을 사용할 때 발생할 수 있는 이슈

3) 트러블 슈팅

yarn start --reset-cache

watchman watch-del-all && rm yarn.lock && rm -rf node_modules && rm -rf $TMPDIR/metro-* && rm -rf $TMPDIR/haste-map-* && yarn && yarn start --reset-cache

watchman watch-del '/Users/haneojin/Desktop/algocare-device-app' ; watchman watch-project '/Users/haneojin/Desktop/algocare-device-app’

• tsconfig.json

• babel.config.json