---
title: "webpack 5에서 node core 모듈을 polyfill하는 방법"
description: "react-app-rewired 패키지를 사용하여 webpack 5 이상 버전에서 node core 모듈을 polyfill하는 방법을 알아봅니다. 필요한 의존성을 설치하고 기본 webpack 설정을 오버라이드하는 과정을 다룹니다."
---

# webpack 5에서 node core 모듈을 polyfill하는 방법

이 튜토리얼에서는 **react-app-rewired 패키지**를 사용하여 webpack 버전 5 이상에서 node core 모듈을 폴리필하는 방법을, 필요한 의존성을 설치하고 기본 webpack 설정을 오버라이드하는 과정과 함께 배웁니다.

### polyfill node core module 오류는 왜 발생하는가?

webpack 버전 \_\_\_의 최신 업데이트 이전까지는, webpack \< 5에서 기본적으로 NodeJS 폴리필을 포함하고 있었습니다. [현재 버전의 webpack](https://github.com/webpack/webpack)은 더 이상 기본적으로 NodeJS 폴리필을 포함하지 않기 때문에, create-react-app과 webpack \> 5를 사용하여 [web3.js](https://www.alchemy.com/dapps/web3-js) 및 [alchemyweb3.js library](https://www.alchemy.com/docs/alchemy-quickstart-guide)로 애플리케이션을 빌드하는 개발자들에게 문제가 발생합니다.

polyfill node core module 오류는 다음과 같은 모습입니다:

## webpack 5에서 polyfill node core modules 오류를 해결하는 4가지 단계

create-react-app과 polyfill 오류의 주된 문제는, create-react-app이 기본적으로 **webpack 설정 파일을 node-modules 안에 숨기고**, 빌드 시점에 해당 파일을 생성하기 때문에 개발자가 이를 수정할 수 없다는 점입니다.

다행히 [react-app-rewired](https://www.npmjs.com/package/react-app-rewired)라는 패키지가 있어서, 개발자가 webpack 설정 파일을 쉽게 수정하여 polyfill node core module 오류를 해결할 수 있습니다.

### 1. react-app-rewired 설치

먼저, 선호하는 패키지 매니저로 react-app-rewired 패키지를 설치합니다.

yarn으로 react-app-rewired 패키지 설치:

npm으로 react-app-rewired 패키지 설치:

### 2. 누락된 의존성 설치

다음으로, 아래의 누락된 의존성들을 설치합니다:

- crypto-browserify
- stream-browserify
- assert
- stream-http
- https-browserify
- os-browserify
- url

yarn으로 누락된 의존성 설치:

yarn add process crypto-browserify stream-browserify assert stream-http https-browserify os-browserify url buffer

npm으로 누락된 의존성 설치:

### 3. create-react-app의 webpack 설정 파일 오버라이드

프로젝트의 루트 폴더에 config-overrides.js라는 새 파일을 만들고, 다음 코드를 추가합니다:

이 config-overrides.js 코드 스니펫은 브라우저에서 web3 라이브러리와 지갑 프로바이더를 지원하는 데 필요한 누락된 의존성들을 webpack이 어떻게 resolve할지 알려주는 것입니다.

### 4. webpack 설정을 포함하도록 package.json 오버라이드

package.json 파일에서, 다음 세 개의 scripts 필드에 대해 **react-scripts**를 **react-app-rewired** 스크립트로 교체하여 webpack 설정을 업데이트합니다:

- start
- build
- test

react-scripts를 교체하기 **전**의 package.json 파일은 다음과 같습니다:

react-scripts를 react-app-rewired 스크립트로 교체한 **후**의 package.json 파일은 다음과 같습니다:

이것으로 끝입니다!

이제 polyfill node core module 오류가 해결되고, 누락되었던 NodeJS 폴리필이 앱에 포함되며, 앱이 web3.js 및 [Alchemyweb3.js library](https://github.com/alchemyplatform/alchemy-web3)와 함께 정상적으로 동작할 것입니다.