라이브 리로딩(live reloading)은 웹 개발 시 매우 유용한 기능 중 하나입니다. 코드를 수정하고 저장할 때마다 웹 페이지가 자동으로 새로고침되어 변경 사항을 바로 확인할 수 있습니다. 이렇게 하면 개발자가 소스 코드를 수정할 때마다 매번 수동으로 새로고침할 필요가 없으므로 개발 시간과 노력을 절약할 수 있습니다.

Webpack은 모듈 번들러로써 라이브 리로딩을 구현하는데 매우 편리한 도구입니다. Webpack을 사용하면 수정된 파일만 다시 빌드하고 모듈 간의 의존성을 해결하여 변경 사항을 자동으로 감지하고 반영할 수 있습니다.

Webpack 설정

먼저, Webpack을 설치해야 합니다. 다음 명령을 사용하여 Webpack을 전역으로 설치합니다.

npm install -g webpack

Webpack을 설치한 후에는 프로젝트 폴더에서 다음과 같이 webpack.config.js 파일을 생성합니다.

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  devServer: {
    contentBase: './dist',
    open: true,
  },
};

이 설정 파일에서는 entry와 output 속성을 정의하여 웹팩이 자바스크립트 파일을 번들링하여 dist/bundle.js로 출력하도록 지정합니다. 추가로 devServer 속성을 사용하여 개발 서버를 설정합니다. 이 서버는 변경 사항을 감지하여 자동으로 페이지를 다시로드합니다.

개발 서버 실행

이제 웹팩 설정을 마쳤으므로 개발 서버를 실행할 수 있습니다. 다음 명령을 사용하여 개발 서버를 시작합니다.

webpack serve –open

이렇게 하면 개발 서버가 실행되고 웹 브라우저에서 앱이 자동으로 열립니다. 이제 코드를 수정하고 저장하면 브라우저에서 변경 사항이 자동으로 반영됩니다. 이렇게 리액트 개발을 더욱 편리하게 할 수 있습니다.

마무리

이제 웹팩으로 라이브 리로딩을 구현하는 방법을 알아보았습니다. 라이브 리로딩을 설정하면 개발 시간을 크게 단축할 수 있고, 변경 사항을 즉시 확인할 수 있습니다. 웹팩의 다양한 설정을 이용하여 더욱 효율적인 개발 환경을 구축할 수 있으니, 자세한 내용은 웹팩 공식 문서를 참고하시기 바랍니다.

참고 자료:

• Webpack 공식 문서
• Webpack Dev Server 공식 문서