日本語에서 번역 • 원문 보기 안녕하세요! 저는 요시다, 웹 엔지니어입니다.
지난달 16일, 저는 180명의 엔지니어가 모인 대규모 React 관련 행사인 React.js meetup × React Native meetup에서 LT 프레임의 최고 배터로 발표했습니다.
이제 그때 제가 발표한 "React Hot Loader 도입"에 대해 자세히 설명하겠습니다.
리액트 핫로더란 무엇인가요?
브라우저 동기화는 전통적인 프론트엔드 개발에서 널리 사용되어 왔습니다. 브라우저 동기화는 파일 변경 사항을 모니터링하고 변경 사항을 반영하기 위해 브라우저를 자동으로 재로드합니다.
하지만 React Hot Loader는 그 편리함을 한 단계 더 발전시켰습니다.
React Hot Loader는 파일 변경 사항을 모니터링하고 브라우저 재로드 없이도 React 컴포넌트의 변경 사항을 즉시 반영하면서 상태를 유지하는 강력한 로딩 모듈입니다.
React 컴포넌트에 변경 사항을 반영하면서 상태를 유지할지 명확하지 않을 수 있으니, 아래 데모 영상을 참고해 보세요.
간단한 React 애플리케이션으로, 텍스트 박스에 입력한 텍스트를 state로 설정하고 그 아래에 표시합니다.
왼쪽 브라우저의 텍스트 박스에 문자를 입력한 후, 오른쪽 편집기에서 컴포넌트를 수정하고 저장하세요.
변경 사항이 브라우저를 다시 로드하지 않아도 즉시 반영되는 것을 볼 수 있습니다. 그리고 텍스트 박스 아래 문자열은 유지되어 상태 정보가 보존됩니다.
다른 데모를 보세요.
이제 부모 컴포넌트에 두 개의 자식 컴포넌트가 있으니, 컴포넌트를 여러 방식으로 변경해 보겠습니다.
상태는 보존되어 있어서, 자식 컴포넌트를 삭제하고 복원해도 텍스트 박스에 입력한 내용을 볼 수 있습니다.
이런 점에서 React Hot Loader는 상태 기반 처리를 수정하는 데 매우 유용합니다.
브라우저를 재로드하면 상태 내용이 자연스럽게 사라지므로, 수정된 부분을 테스트하려면 먼저 상태를 상태로 설정하는 절차를 따라야 합니다.
여러 패턴으로 교정하고 확인하려면 시간이 더 걸릴 수 있습니다.
React Hot Loader는 그런 작업이 필요 없어서 더 빠르게 개발할 수 있습니다.
React 핫로더 소개
실제로 소개해 봅시다.
앞서 언급했듯이, React Hot Loader는 단지 로딩 모듈일 뿐입니다. 따라서 Webpack 같은 빌드 도구와 함께 로드되고 사용될 것으로 가정됩니다.
이것은 gulp + Webpack + Browsersync를 결합한 예시입니다.
Git에서 React Hot Loader용 샘플 프로젝트를 올려두었으니, 이 소스를 복제해 주세요.
https://github.com/endam/react-hot-loader-sample
샘플1과 샘플2는 위 데모 영상에서 사용된 React 애플리케이션입니다. 차이점은 src 디렉터리 아래의 컴포넌트뿐이며, 나머지 설정은 정확히 동일합니다.
먼저, sample1 디렉터리에 직접 가서 npm이나 yarn으로 패키지를 설치하세요.
react-hot-loader도 패키지 중 하나니 함께 설치하세요. 다음으로, 파일 모니터링 + 자동 업데이트용 작업을 gulp에 추가하세요.
참고로, Browsersync 미들웨어 설정에 'webpack-dev-middleware'와 'webpack-hot-middleware'가 필요합니다.
또한 webpack-dev-middleware와 webpack-hot-middleware를 webpack.config.js 기반으로 한 웹팩 번들도 전달해야 합니다.
webpack-dev-middleware의 publicPath 설정은 webpack.config.js의 output.publicPath와 동일할 수 있으므로, 우리는 그 경로를 참조하는 것입니다.
그리고 그것이 가장 중요한 webpack.config.js입니다.
Entry에서는 JS 외에도 'webpack/hot/dev-server'와 'webpack-hot-middleware/client'를 설정해야 합니다.
React Hot Loader의 모듈을 모듈 단위로 로드하도록 설정하는 것도 잊지 맙시다.
또 하나 잊기 쉬운 점은 플러그인 설정입니다. 'new webpack.'을 설정하지 않으면 제대로 작동하지 않는다는 점을 유의하세요. HotModuleReplacementPlugin()'.
여기까지 설정했으면, 이제 움직이기만 하면 됩니다. 'gulp watch'에서 gulp 작업을 실행하고 React Hot Loader가 제대로 작동하는지 확인해 봅시다.
실용 판
지금까지 가장 기본적인 React Hot Loader 구성에 대해 논의했습니다. 하지만 이 설정만으로는 실제 현장 개발에는 충분하지 않을 수 있다고 생각합니다.
다음 두 가지 사례가 가장 흔히 발생합니다.
- 여러 개의 진입 지점을 수용하고 싶어
- Docker나 Vagrant 같은 가상 환경에서 실행하고 싶습니다.
이러한 사건을 다루는 방법을 배우세요.
여러 입구 수용
여러 진입점을 고려할 수 있는 특별한 방법을 쓸 예정입니다.
이렇게 하면 각 진입점마다 'webpack-dev-middleware'와 'webpack-hot-middleware'를 배열에 설정해야 합니다. (각 진입점마다 설정할 줄은 몰랐는데, 조사하면서 꽤 빠져들었습니다.)
하지만 진입 지점이 2개 또는 3개라면 이 방식은 괜찮지만, 진입 지점이 많으면 너무 중복될 수 있습니다.
이런 경우에는 예를 들어 진입 구성을 위한 객체를 동적으로 생성하는 함수가 권장됩니다:
Docker나 Vagrant와 같은 가상 환경에서 실행하세요
도커를 위해
Mac/Windows용 Docker를 사용할 때는 설정이 간단합니다.
예를 들어, 호스트의 포트 3006에서 게스트의 포트 3006으로 포워딩하는 컨테이너가 있다고 합시다.
Browsersync는 Docker 컨테이너의 포트 포워딩을 위해 포트 번호 3006을 설정합니다.
그게 설정만 하면 됩니다. 그 다음, 도커 컨테이너에서 같은 방식으로 gulp 작업을 실행하고 브라우저의 'http://localhost:{forwarded port number}'로 가서 확인하세요.
Vagrant (VirtualBox 및 VMware)
Vagrant 대신, 제공업체인 VirtualBox나 VMware에서 제공하는 가상 머신으로 환경을 만드는 것이 좋습니다. 이 경우에는 프록시를 설정해야 합니다.
먼저, http-proxy-middleware라는 새 패키지를 설치하세요.
'npm install http-proxy-middleware -D' 또는 'yarn add http-proxy-middleware -D'
다음으로, gulp 작업에서 브라우저 동기화 설정을 변경하세요.
'http-proxy-middleware'를 불러와서 프록시를 설정하세요.
'const proxy = proxyMiddleware('/', {target: 'http://{Guest OS IP address}');' 중 {Guest OS IP address} 부분을 변경하세요.
생성된 프록시 객체를 Browsersync 미들웨어로 설정하세요.
더 중요한 것은 webpack-dev-middleware의 watchOption에서 투표 옵션을 활성화하는 것입니다.
이 설정이 없으면 VirtualBox는 파일 변경을 감지하지 못합니다.
실습 부분의 내용은 Sample3에 요약되어 있습니다.
sample3의 기본 설정은 Docker 환경을 가정하고 있지만, VirtualBox 같은 가상 머신에서 실행하고 싶다면 gulpfile.babel.js에서 주석이 달린 부분을 제거하고 게스트 OS의 IP 주소를 설정해 주세요.
결론
올해 2월쯤 React Hot Loader를 도입했는데, 개발이 더 원활하게 만들어져서 도입한 것이 다행이라고 생각합니다.
React.js 모임× React Native 모임에서 발표되었을 때는 많은 사람들이 알지 못했기에, 앞으로 점차 다른 분야에서 사용되기를 기대하고 있습니다.
현장에서 React를 사용하고 계시다면 꼭 한 번 시도해 보세요.
좋은 React 개발 생활 되세요!