webpack

나만의 react boilerplate 만들기 - (4) 개선

TS 버전업 TS 버전을 기존 4.4.2 -> 5.2.2로 올렸다. 버전업시에 기존 yarn berry 3.3.0과 호환이 되지 않아 yarn berry도 3.6.3으로 올렸다. 다른 의존성도 해당 버전에 맞게 업데이트했다. TS 5.0 이상은 데코레이터, 파라미터 const 타입, Enum을 Union 타입과 호환 등 여러가지 변화가 있다. 이 참에 해당 기능들을 좀 활용해보면 좋을 것 같다. dev:msw 명령어 추가 개발시에 msw 구동이 필요할 때와 아닐 때(api 찌를 백엔드가 있는 경우)가 있다. 그런 경우에 활용하기 위해 기존 dev 명령어를 dev(msw X), dev:msw (msw O)로 나누었다. .env로 msw 구동 여부``를 환경여부를 주입해서 코드상에서 활용하도록 했다. ///..

Webpack 기초 개념 정리

인프런 프론트엔드 개발환경의 이해와 실습 강의(Webpack)를 듣고 정리해봤다. 역할 모든 브라우저에서 모듈 시스템을 지원하지 않기 때문에 브라우저에 상관없이 모듈을 사용하게 하기 위해 여러개의 파일을 하나의 파일로 합쳐주는 번들러인 Webpack이 등장했다. 설정하기 webpack.config.js 파일을 생성 후 기본 설정을 할 수 있다. const path = require("path") module.exports = { mode: "development", entry: { main: "./src/app.js", }, output: { filename: "[name].js", path: path.resolve("./dist"), }, } mode : 개발, 상용("production") 등의 모드..