프로젝트에 module resolver 적용하기

이 포스트에서는 vscode 에디터를 기준으로 babel-plugin-module-resolver를 사용해서 간편하게 모듈(내가 만든 파일)을 import 할 수 있는 방법을 소개합니다

babel-plugin-module-resolver 에서 설명하고 있는 예제입니다. 폴더와 파일들이 점점 많아지고, 작성하는 파일의 depth가 점점 깊어지면 예제의 코드대로 ../../../ 를 몇개 써야 될지 헷갈리게 되고 이는 예기치 않은 오류를 발생시킬 수 있습니다.

파일의 양이 점점 많아지고 위와 같은 작업을 계속해야 한다면…

이쁘지도 않고…

그럼 이제 적용해 봅시다

설명은 React Native 프로젝트를 기준으로 진행합니다

먼저 babel-plugin-module-resolver 를 devDependencies에 설치합니다

다음으로는 babel 설정파일을 설정해 주면 되는데요
React Native 프로젝트에서는 다음과 같이 babel.config.js 파일을 설정합니다. 저는 보통 개발하는 파일을 src폴더 밑에 두기 때문에 아래와 같이 설정합니다

babel.config.js

아래 예시처럼 alias를 통해 내가 불러오고 싶은 이름을 커스텀하게 쓸 수도 있습니다 보통 assets폴더는 src폴더 밖에 두기 때문에 아래처럼 정의하곤 합니다

babel.config.js alias setting

여기까지만 적용 하더라도 내가 원하는 파일을 ../../처럼 상대경로 설정없이 불러 올 수 있는데요
하지만 eslint가 이미 설정되어 있다면 libs폴더가 src파일 밑에 있어도 아래와 같은 lint오류가 발생합니다. 따로 설정을 해주지 않는다면 eslint는 지정한 위치에 파일이 없다고 생각하겠지요

Unable to resolve path to module 'libs/colors'.eslint(import/no-unresolved)

eslint 다시 설정하기

위 문제를 해결하기 위해 필요한 eslint 설정파일을 devDependencies에 설치 합니다

그리고 .eslintrc.js 파일에 아래와 같이 추가합니다

.eslintrc.js

파일이 자바스크립트라면 위 내용만 설정해도 lint 오류 없이 코딩을 시작 할 수 있지만 만약 타입스크립트를 사용한다면 위 설정 뒤에도 에러 메세지가 사라지지 않습니다

타입스크립트를 쓸 때는 에러메세지가 사라지지 않는다…

tsconfig 다시 설정하기

확장자가 .ts 또는 .tsx파일인 경우 vscode에서는 tsconfig.json파일을 설정파일로 바라보기 때문에 아래와 같이 compilerOptions의 baseUrl을 다시 설정해야 합니다

babel.config.js 의 root 와 동일하게 baseUrl을 설정

적용이 안되거나 에러메시지가 계속 보인다면

1. 노드서버를 재시작 합니다.

babel 설정파일은 hot loader를 통해 다시 적용되지 않기 때문에 설정파일이 바뀐다면 서버를 재시작 해야합니다. 이때 캐쉬 되어있는 설정이 다시 실행 되지 않도록 다음처럼 캐쉬를 모두 날리고 서버를 시작합니다

2. vscode 에디터를 재시작합니다.

설정이 끝난 뒤에도 vscode에서 빨간 줄이 사라지지 않는다면 vscode가 설정변화를 인지하지 못한 경우 일 수도 있습니다. 혹시 모를 상황을 위해 lint와 같은 설정 파일 변경 뒤에는 항상 에디터를 재시작하는 것이 좋습니다