Nodejs 상대경로 지옥 탈출하기

Nodejs 로 개발하다보면 상대경로의 지옥에 빠질 때가 있다.

예를들면,,

const authUserService = require('../../../service/auth/authUser.service');
const { config } = require('../../../../initialize')

감수하고 개발을 진행할 수 있는 있지만, 소스코드 상단에 아주 지저분한 부분이 생긴 느낌이다. 

 

이 상대 경로를 별칭으로 지정할 수 있는 'better-module-alias' 를 설치한다.

$ npm install --save better-module-alias

 

또한 package.json 파일 내에 '_moduleAliases' 라는 키 값으로 별칭을 지정하면 된다.

 

// package.json

  "_moduleAliases": {
    "$service": "./express/service",
    "$initialize": "./initialize",
    "$sequelize": "./sequelize"
  },

자주 사용하는 폴더를 별칭으로 걸 수 있다. (별칭에 $나 @같은 문자를 통해 기존 npm 모듈과의 중복된 이름은 피하자!)

 

node 명령어를 통해 시작하는 js파일(ex: server.js) 에 루트경로를 지정해준다.

// server.js
require('better-module-alias')(__dirname);

 

이후에 require의 상대경로를 별칭으로 모두 바꿔주면 된다.

const authUserService = require('$service/auth/authUser.service');
const { config } = require('$initialize')

 

이와 같이 하면 상단 임포트 부분의 소스코드가 깔끔해진것을 확인할 수 있다.

 

 

 

하지만..

위와 같이 하면 코드 어시스턴트가 되질 않는다. 이를 위해 jsconfig.json 파일을 작성한다. ( Webstorm 은 2019.2 버전 이상부터 지원한다고 되어있음)

// jsconfig.json

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "$service/*": ["./express/service/*"],
      "$initialize": ["./initialize"]
    }
  },
  "exclude": [
    "node_modules"
  ]
}

jsconfig 를 작성하면 이상없이 IDE 에서 별칭으로 건 코드 어시스턴트가 작동하는 것을 확인할 수 있다.