차년도에 진행할 개발물의 공통 구조를 잡는 과정 중 상대경로가 너무 길어지는 경우가 발생해 간단하게 할 수 없을까 검색을 해보았다 🤓 이미지들은 보통 별도 폴더에서 관리하기 때문에 이미지를 호출할 때 상대경로가 너무 길어지더라..
개발화면은 대외비랑 첨부하지는 않겠음
초기 코드 👎
상대경로 넘나 길고 무슨 129
오타가 발생할 가능성과 재사용성에서 너무 구리다.
이를 좀더 간결하게 만들기 위해서 webpack resolve alias를 적용하기로 결정!
Webpack resolve alias?
보통 리액트 프로젝트를 생성할 때 CRA(create-react-app)를 통해 생성하게 된다.
왜냐하면 개발자가 별도로 개발을 위해 많은 셋팅들을 하지 않아도 지속적으로 페이스북에서 업데이트를 해주기 때문에 많은 개발자들이 사용하고 있다!
webpack 이란?
웹팩은 자바스크립트 모듈 번들러의 한 종류이며 라이브러리이다.
일반적으로 코드의 양이 많아지면 보통 협업 및 유지보수 등의 이유로 코드를 분할하여 관리하게 되면 웹 어플리케이션에서 수 많은 자바스크립트 파일을 로딩하게 되고 이는 네트워크 비용을 증가시키게 된다!
webpack을 사용하면 여러 개의 자바스크립트 파일을 하나의 파일로 컴파일할 수 있다.
SPA로 개발할 때 html에는 컴파일된 하나의 자바스크립트 파일만 포함시키면 된다. 고마운 점은 ES6 표준으로 작성되지 않은 라이브러리도 알아서 잘 처리해준다는 점이다. 따라서 필요한 라이브러리를 npm으로 설치 후 필요한 부분에 import만 하면 바로 사용할 수 있다.
여기까지 간단 웹팩 간단 소개!
자세한 내용은 여기로!
webpack resolve alias 적용
처음 리액트 프로젝트를 생성하게 되면 셋팅을 위한 폴더와 파일들이 아래와 같이 숨겨져있다.
숨겨져있는 설정 파일들을 보기위해서는 eject를 해주면 된다 (eject를 한번 다시 되돌아갈 수 없음) . npm run eject 또는 yarn eject 를 해주면 아래와 같이 config, script 폴더에 환경 설정 파일들이 나타남 짜잔
이제 공식 사이트를 따라서 문제 해결을 해보자!
webpack resolve 공식 사이트
https://webpack.js.org/configuration/resolve/
사실 간단하다. 이미 기본 디폴트로 정의된 resolve alias 영역에 추가하면 원하는 경로를 정의하면 된다.
resolve 옵션은 웹팩이 알아서 경로나 확장자를 처리 할 수 있게 도와준다. config 폴더에 webpack.config.js 파일을 열어보면 이미 정의된 alias들이 있다.
거슬렸던 경로들을 AssetImg 와 자주 사용할 것 같은 경로인 API 도 정의해준 뒤 재구동하면 간단하게 문제해결!
변경 코드 👍
변경 전 코드와 비교해 경로가 매우 간결해졌고 화면도 문제없이 잘 표출되는 것을 확인했다. 간단하지만 resolve는 아주 좋은 옵션인 것 같당👍🏻
