Webpack, Typescript에서 Path Alias 설정하기
입사 이후 첫 프로젝트에서 신규 홈페이지를 만드는 업무를 하게 되었다.
프로젝트를 진행하면서 기존에 사용하지 않던 기술이나 방법들을 이것저것 많이 시도해 보았는데 그 중에 하나인 Path Alias를 설정하는 방법을 기록해 보고자 한다.
Path Alias란 무엇인가?
Path는 경로 Alias는 별명, 가명, 통칭 이란 뜻으로 자신이 원하는 경로에 대한 별칭을 셋팅해 두고 사용하는 것이다.
import 할 때 가끔 사용하는 as도 Alias의 줄임말이다.
import { someFuncs as something } from "./SomeUtilFuncs";Path Alias를 왜 사용하는 것인가?
이는 상대 경로를 사용함으로써 생기는 상대경로 헬을 피하고자 함이다.
import { someFuncs } from "../../../../../../Commons/SomeUtilFuncs";물론 요즘 에디터의 인텔리센스가 많이 발전해서 모듈들을 import할 때 자동으로 잘 찾아주므로 크게 상관은 없지만,
내가 원하는 경로를 미리 절대경로로 셋팅해주고 찾아가는 것이 좀 더 명확하고 보기에도 깔끔하다고 생각한다.
Path Alias를 적용하고 나면 아래와 같이 코드가 변환될 것이다.
import { someFuncs }from "@Commons/SomeUtilFuncs";Path Alias 설정
경로 설정을 위해 webpack.config.js 파일에 아래와 같은 절대 경로를 추가하였다.
웹팩 config 파일에서 resolve부분에 alias란 속성을 추가하였다.
경로를 커스텀했단 것을 드러내기 위해 @를 추가하였다.
path.resolve를 통해 프로젝트 최상단 위치로 접근한 후 내가 미리 설정해둔 경로로 진입하는 것이다.
경로를 파일 단위로 지정할 수도 있지만 보통 Utils나 Commons(상수, 헬퍼 함수 등)같은 파일들은 한 폴더 안에 있으므로 폴더 단위로 지정하였다.
자 이제 단순히 위와 같이 webpack 설정을 해주면 이제 import 할 때 아래와 같이 사용할 수 있다.
이제 webpack build를 할 때 알아서 설정해둔 경로로 찾아가서 작업을 수행할 것이다.
Typescript Path Alias 설정
자바스크립트만 쓴다면 위의 webpack 설정까지만 해주면 되지만 아쉽게도 우리는 Typescript를 사용하고 있기 때문에 Typescript의 설정파일에서도 코드를 추가해 주어야 한다.
실제로 tsconfig와 ts-loader를 설정해두지 않고 build를 하면 인텔리 센스가 빨간색 지렁이 에러를 내뿜지만 실제로 build를 잘 수행한다.
이는 webpack이 build할 때의 경로 설정을 해주었지만 typescript는 path alias에 대한 설정을 해주지 않았기 때문에 찾을 수 없다고 오류를 내뿜는 것이다.
그다지 어렵진 않다. webpack에서 처럼 아래와 같이 경로를 설정해준다.
경로 뒤의 /*는 위에서 언급했듯이 폴더 단위로 경로를 설정했기 때문에 붙여주었다.
해당 폴더 내에 어떤 이름의 파일이던지 접근할 수 있게 함이다.
자 이제 webpack, typescript에서의 Path Alias 설정에 대해서 모두 알아보았다.
Template 폴더라던가 Commons 폴더 내에 있는 헬퍼 함수나 상수파일을 거의 항상 참조하다 보니 부장님이 한번 Path Alias를 찾아 보라고 하셔서 적용해 보았다.
다음 포스팅은 첫 프로젝트를 시행할 떄 image 파일들을 사용할 때 좀 색다른 방법을 사용했는데 이에 대해 포스팅하고자 한다.
입사 이후 거진 4개월 만에 처음 쓰는 포스팅인데.. 앞으로 꾸준히 쓸 수 있도록 해야겠다..!
