반응형 HMR3 1. Vite란 무엇인가? - 1 Vite의 소개Vite는 현대적인 웹 개발 환경을 위한 차세대 프론트엔드 빌드 도구로, 특히 빠른 개발 서버와 효율적인 번들링을 제공하는 점에서 주목받고 있습니다. Vue.js의 핵심 개발자인 Evan You가 처음 공개한 Vite는 기존 번들러(Webpack, Parcel 등)들이 겪는 성능 문제를 해결하기 위해 설계되었습니다. 특히 모듈 시스템, **ESM(ECMAScript Modules)**을 활용한 개발 환경에서 빠른 서버 시작과 핫 모듈 교체(HMR) 성능이 매우 뛰어납니다.기존 번들러의 한계전통적인 번들러는 전체 애플리케이션을 번들 파일로 묶어 하나의 자바스크립트 파일로 제공하는 방식입니다. 이 방식은 작은 프로젝트에서는 성능 문제가 없지만, 애플리케이션이 복잡해지면 빌드 시간이 급격히 늘어.. 2024. 10. 19. 23. Webpack Dev Server와 핫 모듈 리플레이스먼트(HMR) - 2 HMR의 장점과 적용 방법 1. HMR이란? 핫 모듈 리플레이스먼트(Hot Module Replacement, HMR)는 개발 중인 애플리케이션의 일부를 교체하는 기술로, 코드 변경을 감지하고 새로운 모듈로 교체함으로써 애플리케이션을 다시 빌드하지 않고도 변경 사항을 실시간으로 반영할 수 있습니다. 2. HMR의 장점 2.1 실시간 반영 HMR을 사용하면 코드 수정 후 브라우저를 새로 고치지 않아도 변경 사항이 즉시 반영됩니다. 이는 빠른 개발 속도와 효율적인 작업을 가능하게 합니다. 2.2 상태 유지 애플리케이션의 상태는 유지되므로, 변경된 부분만 교체되고 나머지는 그대로 유지됩니다. 이는 애플리케이션의 상태를 잃지 않고 개발자가 현재 작업 중인 상태에서 계속 작업할 수 있음을 의미합니다. 2.3 에러.. 2023. 12. 29. 22. Webpack Dev Server와 핫 모듈 리플레이스먼트(HMR) - 1 개발 서버 설정과 활용 웹팩에서 제공하는 개발 서버는 손쉽게 프로젝트를 개발할 수 있도록 도와주는 강력한 도구입니다. 이 글에서는 웹팩 개발 서버의 설정과 활용 방법에 대해 알아보겠습니다. 1. 개발 서버란? 웹팩 개발 서버는 소스 코드를 실시간으로 감시하고, 변경이 감지되면 빠르게 빌드하여 브라우저에 반영해주는 도구입니다. 이는 코드 수정 시 매번 수동으로 빌드하지 않아도 되어 효율적인 개발을 가능하게 합니다. 2. 설치 웹팩 개발 서버는 npm을 통해 간단히 설치할 수 있습니다. npm install --save-dev webpack-dev-server 3. 기본 설정 웹팩 설정 파일(webpack.config.js)에서 개발 서버를 설정할 수 있습니다. // webpack.config.js cons.. 2023. 12. 29. 이전 1 다음 반응형
