React 웹 개발자라면 로컬 개발 서버의 작동 원리를 이해하는 것이 중요합니다. 이 글에서는 React 웹 프론트엔드 로컬 개발 서버의 동작 방식을 상세히 분석하고, 번들러, Watcher, Web-Socket, Client-Runtime 등 주요 구성 요소에 대해 알아봅니다.
로컬 개발 서버란?
로컬 개발 서버는 개발자가 코드 변경 사항을 실시간으로 확인할 수 있도록 도와주는 도구입니다. 일반적으로 `dev` 명령어를 실행하고 `localhost`로 접속하면, 코드가 변경될 때마다 자동으로 브라우저가 새로고침되거나 변경 사항이 반영됩니다.
번들러와 로컬 개발 서버의 역할
번들러는 여러 개의 모듈을 하나의 파일로 묶어주는 도구로, webpack과 vite가 대표적입니다. 이들은 로컬 개발 서버와 함께 동작하여 개발자가 별도로 신경 쓰지 않아도 자동으로 번들링 과정을 처리합니다.
Micro Frontend 프레임워크의 문제점
최근 회사에서 유지보수하는 Micro Frontend 프레임워크 podojs의 경우 기존 번들러의 개발 서버를 그대로 사용하는 데 어려움을 겪었습니다. 번들러의 호환성 문제로 인해 상당한 수정이 필요했으며, 이에 대한 해결 방안을 모색하기 위해 로컬 개발 서버의 동작 방식을 심층적으로 학습해보았습니다.
기초적인 로컬 개발 서버 구축
이 글에서는 live-reload를 지원하는 기본적인 로컬 개발 서버를 직접 구축해보며, 그 기본 동작 방식과 주요 구성 요소를 이해해보겠습니다. 이를 통해 개발자는 보다 효율적인 개발 환경을 구축할 수 있습니다.
로컬 개발 서버의 구성 요소
로컬 개발 서버는 여러 구성 요소로 이루어져 있으며, 각 요소는 특정한 역할을 담당합니다. 주요 구성 요소는 다음과 같습니다.
1. Watcher
Watcher는 특정 디렉토리 내의 파일 변경을 감시합니다. 파일이 수정, 추가, 삭제될 때마다 번들러가 번들링을 트리거합니다. 예를 들어, webpack의 watchpack은 디렉토리 변경을 감지하여 `fs.watch`를 통해 파일을 모니터링합니다. parcel은 `@parcel/watcher`와 같은 독립적인 라이브러리를 사용하여 파일 변화를 감지합니다.
2. Bundler
Bundler는 변경된 파일을 번들링하는 역할을 합니다. webpack의 경우, 번들러 인스턴스를 Compiler라고 부르며, 번들링 과정은 효율성을 위해 인메모리 파일 시스템을 사용하여 수행됩니다. webpack-dev-middleware는 이러한 동작을 통합하여 서버에서 번들링을 관리합니다.
3. Server
Server는 번들된 결과물을 브라우저에 서빙하는 역할을 합니다. 일반적으로 로컬 호스트의 동일한 호스트와 포트를 사용하여 브라우저가 상대경로로 요청할 때 올바른 자원을 찾을 수 있도록 합니다. webpack-dev-server는 이러한 기능을 제공하며, html-webpack-plugin을 통해 자동으로 번들된 스크립트를 HTML에 삽입합니다.
4. Web-Socket
Web-Socket은 서버와 브라우저 간의 실시간 통신을 가능하게 합니다. 코드 변경 시 서버는 브라우저에 소켓 메시지를 보내고, 브라우저는 이를 받아 새로고침을 수행합니다. 이는 live-reload 기능의 핵심으로, 개발자가 변경 사항을 즉시 확인할 수 있게 도와줍니다.
5. Client-Runtime
Client-Runtime은 브라우저에서 실행되는 클라이언트 측 코드로, 서버로부터 받은 소켓 메시지를 처리하여 새로고침 등의 동작을 수행합니다. 예를 들어, fast-refresh 기능을 지원하기 위해서는 별도의 런타임 코드가 필요하며, 이는 vite의 react-plugin과 같은 도구에서 확인할 수 있습니다.
로컬 개발 서버 개선 방안
podojs 프레임워크에서 겪은 번들러 호환성 문제를 해결하기 위해, 기존 번들러를 그대로 사용하는 대신 자체적인 로컬 개발 서버를 구축하는 방안을 고려할 수 있습니다. 이를 통해 보다 유연하게 개발 서버의 동작을 제어하고, 프레임워크의 요구사항에 맞춘 최적화가 가능해집니다.