썸네일 WEBPACK - 2 ( dev server / hot reloading ) WEBPACK 웹팩 수업을 듣다가 리로딩과 다른 핫 리로딩이란 개념을 배우게 되었습니다. 개발에서 유용할 것 같아서 블로그에 올리게 되었습니다. 0. Hot Reloading이란? 애플리케이션의 상태를 유지하면서 코드의 변경사항만을 실시간으로 반영합니다. 컴포넌트가 여러개 있을 경우 수정한 컴포넌트(모듈)만을 교체해서 기존의 작업을 유지하면서 업데이트할 수 있습니다. 1. 기존 리로딩과의 차이점? 리로딩은 파일이 변경점을 인지하고 반영해주는 것은 같을 수 있으나 새로고침을 해준다는 것이 다릅니다. 그렇다보니 리로딩은 기존 데이터가 날라갑니다. 리로딩은 여러개의 컴포넌트가 있고 테스트 중이거나 화면을 유지한채로 변경된것만 빠르게 확인하면서 작업을 진행하기 어렵습니다. 이러한 불편함을 극복하기 위해 나온 핫..
썸네일 WEBPACK - 1 WEBPACK 이번에 공부를 하면서 느낀게 한번은 리액트 기초를 다지고 가야할 것 같다는 것 이었습니다. 그래서 제로초님의 리액트 기초 강의를 듣게 되었는데 웹팩에 대한 설명을 잘 해주셔서 블로그에 정리해두려고 합니다. 참고로 위 내용은 리액트 기준입니다. 0. webpack이란? 자바스크립트 기반의 정적 모듈 번들러 (static module bundler) 웹 애플리케이션을 구성하는 자원을 모듈로 취급하고, 이들을 브라우저에서 최적화된 하나 또는 여러 개의 파일로 빌드시켜준다. 웹브라우저에서 사용하는 html, css, javascript 로 만들어줍니다. 중요한 요소로는 mode, entry, module, plugin, output 이 있습니다. 1. Webpack 설치 처음에 npm init 으..