What I studied

평소 가볍게 개발을 공부하거나 무언가를 만들어볼 때는 빠르게 시작하기 위해서 React CRA를 이용해 개발환경을 구축하곤 했었다. CRA(Create React App) 역시 내부적으로 webpack과 babel을 사용하기는 하지만 이러한 설정이 숨겨져있기 때문에 초기 설정에 대한 고민 없이 편하게 시작할 수 있다. 하지만 확장성이 떨어지기 때문에 복잡한 프로젝트에는 부적합할 수 있으며, 내부적으로 관리하는 설정때문에 세부적인 조정이 필요한 경우, 제한이 있을 수 있어 webpack과 babel을 사용하여 개발환경을 구축하는 것이 훨씬 유리하다. 보통 회사에서는 CRA를 사용하기 보단 리액트, 뷰 등의 개발환경을 개발자가 직접 구축하는 경우가 많은데 나 역시도 웹팩과 바벨로 직접 구축한 프로젝트를 맡고..

package.json에 작성해 둔 명령어로 환경변수를 관리할 수 있도록 빌드 구성을 통합하는 작업을 진행했는데 거의 2일 동안은 삽질의 연속이었던 것 같다. 여러 가지 방법을 시도하다가 내가 원하는 대로 환경변수를 활용할 수 있게 되었다. 1. html-webpack-plugin (templateParameters 사용) 가장 먼저 시도했던 방법이었는데, 뭐 때문이었는지는 모르겠지만 제대로 적용이 되지 않았었다. 그래서 다른 방법을 사용했다가 다시 돌아와서 처음부터 차근차근 적용해 보니 가장 쉽게 적용되었던 것 같다. 플러그인을 사용하기 전 환경변수와 명령어를 먼저 세팅해 줬는데, package.json 파일에서 아래와 같이 설정하면 된다. set HELLO=helloworld라는 환경변수를 세팅해 주..

내가 원하는 파일, 원하는 설정대로 빌드하기 위해서 웹팩을 사용하는데 빌드 날짜와 시간을 추가해두면 어떤 파일이 가장 최근에 빌드된 것인지 확인하는데 유용하다. 그래서 자주 사용하는 플러그인을 통해 빌드된 파일 상단에 날짜와 시간을 추가해보려고한다. 1. BannerPlugin (js, css 파일 상단) BannerPlugin은 webpack에 내장되어있는 플러그인으로 webpack을 설치했다면 따로 설치할 필요가 없다. 주로 javascript 번들 파일 맨 위에 주석을 추가하는 용도로 사용되는데 webpack.config.js 내의 plugins에 banner를 추가하여 원하는 날짜와 시간 형식을 추가해주면 된다. const webpack = require('webpack'); module.expo..

요즘 회사 코드에 있는 웹팩 동작 방식이 궁금해 웹팩을 공부하고 있다. 자주 사용하는 loader를 먼저 하나씩 공부해보고 있었는데 css-loader, style-loader를 실행하는데까지는 문제가 없었다. 강의에서는 웹팩 4를 사용하고 있는데 나는 그래도 최근에 나온 것으로 해보고 싶어 5를 사용하며, 하나씩 맞춰나가는 중이다. 역시 강의대로 따라하니 file-loader와 url-loader가 적용이 안된다 ㅎ css 파일에 있는 백그라운드 이미지를 웹팩으로 빌드해서 index.html에 보여주는 구조였다. (app.css, app.js, index.html) 결과적으로 index.html에서 번들링 된 자바스크립트 파일을 불러오는데 그 안에 css가 포함되어있는 구조인 것이다. // app.cs..