babel-plugin-root-import 로 root import 하기

1. 바벨(Babel)이란?
   자바스크립트는 파편화가 심한 언어이다. 지속적인 업데이트로 예전보다 발전된 최신 문법들이 생겼고 정말 좋은 문법들이 많다. 하지만 브라우저, OS, 서버별로 쓰는 문법, 안 쓰는 문법들이 있다는 것이 문제이다. 대표적으로 브라우저들이 그 편차가 심하다. 크롬, 사파리, 파이어폭스와 같은 브라우저들은 ES6 대부분의 사양을 구현하고 있으나, 인터넷 익스플로어(IE)의 경우 ES6의 많은 사양을 구현하고 있지 못하다. 그렇다면 어떻게 해야할까? ES6를 지원하지 않는 IE 브라우저를 그냥 배제해버릴까? 아니면 IE 브라우저를 커버하기 위해 ES6 문법으로 작성한 코드와 동일하게 작동하는 IE브라우저용 ES5 코드를 따로 작성해둬야 할까? 한쪽은 무책임하고, 다른 한쪽은 비효율적이다. 그렇담, 개발자들은 어떤 방법을 찾았을까? 그것은..

Babel과 같은 트랜스컴파일러(transcompiler)를 활용해 개발할 땐 최신문법으로 코딩하되 배포시엔 구버전 문법으로 트랜스컴파일링하는 것이다.

그렇담 IE 브라우저를 배제할 필요도 없고, IE 브라우저용 코드를 마련할 필요도 없다.

바벨(Babel)에 대한 대략적인 설명은 대충 이렇다.

---

2. babel-plugin-root-import

   root import가 필요할 때가 있다. 프로젝트 내 폴더 구조가 복잡해지면(폴더의 개수가 많아지고, 폴더의 뎁스가 깊어지면) 필요한 것을 import하기 어려워진다.
   트랜스컴파일(transcompile)을 목적으로 만들어진 바벨은 관련된 강력한 기능들을 제공한다. 그 기능 중 오늘 글을 쓰는 목적인 babel-plugin-root import가 있다.

├─android

├─ios

├─src
│ ├─actions
│ ├─assets
│ ├─components
│ │ ├─Banners
│ ├─constants
│ ├─pages
│ │ ├─Home
│ │ │ ├─HomePage
│ ├─system
│ └─utils

이것은 React 관련 프로젝트를 할 때 사용하는 간략한 폴더 구조이다. 나는 HomePage에 있는 파일에서 Banners 컴포넌트를 import하길 원한다. 그렇다면 어떻게 해야 할까? 상대 경로를 사용하여 import Banners from"../../../components" 와 같은 방식으로 접근해주면 된다. 요즘 물론 IDE들이 자동 완성을 잘 지원해주지만, 여전히 긴 상대경로는 불편함을 준다.

이 문제를 해결하기 위해 babel-plugin-root-import를 설치하여 사용해주자.

npm install babel-plugin-root-import --save-dev

 

그리고 프로젝트의 루트 위치에 babel.config.js를 만들어 수정해준다.

   module.exports = {
     presets: ['module:metro-react-native-babel-preset'],
     plugins: [
       'babel-plugin-styled-components',
       [
         'babel-plugin-root-import',
         {
           rootPathSuffix: "./src/components",
           rootPathPrefix: "@components",
         },
       ],
     ],
   };

 

rootPathSuffix에 파일이 실제 있는 위치를 적어주고 rootPathPrefix에 앞으로 import시 사용할 간략한 절대 경로를 등록해주면 된다. 나는 prefix로 @components를 사용하기로 했다.

이렇게만 해주면 작동에 문제는 없으나, 아직 IDE의 자동완성 기능은 등록한 prefix를 인식하지 못한다. IDE가 인식하도

록 설정해주자. 프로젝트의 루트 위치에 jsconfig.json를 만들어 수정해준다.

 

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

 

---

 

3. 완료

 이렇게 하면 앞으로도 import시 긴 ../../../ 와 작별하고 import Banners from "@components/Banners"와 같이 import할 수 있게 된다. 간단한 설정으로 좀 더 프로젝트를 깔끔히 관리할 수 있으므로 추가하길 권장한다.