[React Native Expo] 절대경로 설정하기 @~

개발을 계속 하다보면 import를 하다보면 이꼬라지가 되어있는 경로를 볼수있다.

import store from "../../store/index";

 

그때 드는생각 -> 아 폴더옮기거나 파일 경로 뭐 하나 옮기면 개빡세지겠다

예 그렇다면 절대경로를 설정하면됩니다

vue에서는 기본으로 @를 절대경로로 쓸 수 있지만 리액트 네이티브는 그런거없다 하나하나 설정해줘야되는게 리액트의 묘미 아니겠는가 시발

 

설치

npm i babel-plugin-module-resolver

설치해주고 babel.config.js로 가서

    plugins: [
      [
        "module-resolver",
        {
          root: ["./"],
          extensions: [
            ".ios.ts",
            ".android.ts",
            ".ts",
            ".ios.tsx",
            ".android.tsx",
            ".tsx",
            ".jsx",
            ".js",
            ".json",
          ],
          alias: {
            "@": "./",
          },
        },
      ],
    ],

플러그인에 추가

그러고 이제 절대경로를 적용해주고 만약 타입스크립트를 쓰고있다면 밑줄로 타입에러가 뜰것이다

tsconfig.json에 가서

  "compilerOptions": {
    "module": "ES6",
    "moduleResolution": "Node",
    "baseUrl": "./",
    "paths": {
      "@/*": ["./*"]
    }
  },

이렇게 설정해주고 여전히 타입에러가 뜨고있다면

vscode를 껐다켜주자. 그럼 안날것이다.

 

import store from "@/store/index";

그럼 아까의 ../../ 개복잡하던 상대경로를 @로 한방에 정리 가능하다