Jello's development blog

Jello's development blog

import 경로 길이를 줄여보자

Webpack을 사용하여 싱글 페이지 어플리케이션을 만들다 보면 필연적으로 다른 폴더의 모듈을 가져와야 한다. 이 때 우리는 ../../../../../components/hello 같이 엄청난 ../을 쓰게 되는데, 사소한 부분이지만 상당히 불필요하고, 자주 있는 일은 아니지만 디렉토리 구조를 변경하면 같이 변경해줘야 하고, 또 미관상(?) 좋지 않은 것 같아서 이를 해결할 수 있는 방법을 소개하려고 한다.

Webpack

다음 예제를 보자.

module.exports = {
  ...
  resolve: {
  	...
  	alias: {
	  Utilities: path.resolve(__dirname, 'src/utilities/'),
	  Templates: path.resolve(__dirname, 'src/templates/'),
	  '@': path.resolve(__dirname, 'src/')
  	}
  }
};

위처럼 Webpack의 설정 파일의 resolve.alias에 이름과 경로를 넣어주면 build할 때 Key의 이름을 해달 key에 매칭된 path로 바꿔서 build 해준다. 예를 들어서,

import main from '../../../main';
import Utility from '../../../utilities/utility';

이런 식이었던 경로를,

import main from '@/main';
import Utility from 'Utilities/utility';

이렇게 깔끔하게 바꿀 수 있다.

자세한 사용법은 공식 문서를 참고하자.

하지만 이렇게 Webpack에서 편리하게 하다 보면, 하나의 의문점이 생긴다. 바로 테스트 코드가 있는 디렉토리이다. 테스트 코드는 Webpack이 아닌 테스트 패키지가 실행하므로 위와 같은 설정이 적용되지 않는다. 따라서 테스트 파일도 위와 같이 사용하려면, 테스트 패키지의 설정 파일도 별도로 설정해주어야 한다. React의 테스트에 많이 쓰이는 프레임워크인 Jest를 예로 소개하도록 하겠다.

Jest

Jest의 설정은 package.json의 jest에서 할 수 있다.

"jest": {
  "moduleNameMapper": {
	"@(.*)$": "<rootDir>/src/$1",
	"^vue$": "vue/dist/vue.common.js"
  },
}

Jest의 경우에는 jest.modulNameMapper에 세팅하면 된다. Key에는 정규표현식이 들어가고, 테스트를 실행하면 정규표현식에 매칭된 path를 설정한 경로로 바꿔서 import 해준다. 정규 표현식의 괄호가 순서대로 각 $1, $2, … 이고, 프로젝트의 루트 디렉토리를 사용하고 싶을 때에는 <rootDir>을 사용하면 된다.

자세한 사용법은 공식 문서를 참고하자.