Nuxt 서버 미들웨어 상대경로 alias 설정 방법

 

 

상대경로 사용 시 문제점

// server-middleware/index.js

import { logger } from '../../lib/logger';
import { message } from '../../../../../utils'/message;

...

서버 미들웨어 스크립트에서 위와 같이 상대 경로를 사용해 모듈을 import할 경우 못생긴 상대 경로 지옥에 빠질 수 있습니다.
이를 개선하기 위해 특정 경로를 별칭으로 등록해서 사용하는 방법을 소개합니다.

 

* 모듈을 절대경로를 사용해 import할 경우 eslint 에러가 발생합니다.

• import/no-absolute-path: Forbid import of modules using absolute paths
• 절대경로를 사용하면 코드를 컴퓨터에 연결하는 것이기 때문에 좋지 않은 예시라고 합니다.

 

// pages/login.vue

import { isEmpty } from '@/utils/comlib'

...

nuxt 프로젝트에서는 위와 같이 '@' 특수문자를 루트 경로의 별칭으로 사용합니다.
프로젝트 내 경로 별칭은 nuxt.config.js 파일 내 alias 프로퍼티에 등록할 수 있습니다.

하지만 server-middleware는 Nuxt 프레임워크에서 서버 환경을 미들웨어로 구현할 수 있는 노드JS 기반의 환경이기 때문에 서버 미들웨어 내에서는 nuxt.config.js에 등록한 별칭을 사용할 수 없습니다.
따라서 노드JS 환경에서 경로 별칭을 설정할 수 있는 라이브러리를 별도로 사용합니다.

 

 

module-alias 사용 방법

1. module-alias 라이브러리를 설치합니다.

yarn add module-alias
or
npm i module-alias

 

2. package.json 파일에 경로 별칭을 등록합니다.

  "_moduleAliases": {
    "@lib": "server-middleware/lib",
    "@mocks": "mocks"
  },

 

3. server-middleware/index.js 스크립트 상단에 별칭 등록 코드 import

import 'module-alias/register'

해당 구문은 서버 미들웨어가 최초 실행되는 index.js 파일 상단에 작성합니다.

4. 등록한 별칭 사용

import { generateToken } from '@lib/jwtMiddleware'
import CustomError from '@lib/CustomError'
import userLoginData from '@mocks/api/login/userLoginData'

등록한 별칭을 사용해 경로를 작성하고 정상 작동하는지 확인합니다.