[리액트] JavaScript heap out of memory, 스크립트로 해결하기

회사에서 기존의 레거시를 모두 버리고 새롭게 타입 스크립트 + 리액트로 옮겨가는 중이다.

그래서 기분 좋게 필요한 라이브러리를 모조리 설치하고 실행을 해보았는데, 

FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory

???? 뭐야 이거..에러 로그를 보아하니 heap size 때문에 문제가 발생했음을 알게 되었다.

기존까진 잘됬는데 내가 새로이 설치한 라이브러리들이 문제가 됐나 싶어 하나씩 설치-테스트를 반복하다가 

plotly.js를 가져오는 순간 저 에러가 뜬다는 것을 알았다. 그리고 깨달았다.

"아 이건 라이브러리 자체 문제이긴 보다는 다른 문제구나."

"라이브러리가 많아져서 바벨, 웹펙이 트랜 스파 일링, 또는 모아주는 작업을 못하고 있구나"라고 생각했다.

그래서 간단하게 구글링을 해보았고 해결책은 단순했다.

윈도의 경우 터미널에 해당 값을 치면 됐고,

$env:NODE_OPTIONS="--max-old-space-size=8192"

 

리눅스 계열은 bash.rc에 넣어주고 돌려주면 되는 이슈였다.

export NODE_OPTIONS="--max-old-space-size=8192"

---

여기까지는 행복했다. 누군가 이미 스택 오버 플로어에 질문했고 답을 달아줬고 난 해결했으니

하지만 사용하다 보니 해당 설정값을  vsc를 재부팅할 때마다 바꿔줘야 한다는 귀찮음이 있었고, 이런 귀찮음을 방치한 채 메인 브랜치에 올려서 다른 동료들에게 알아서 바꾸세요를 하는 것도 무책임해 보였다.

모든 이슈에는 응당 해결책이 있다는 굳건한 믿음과 함께 다시 긴 여행을 떠났다.

처음 해결 방법으로는 스크립트에 설정값을 바꾸는 코드를 덧붙여서 처리하면 된다고 생각했다.

바로 실행으로 옮겼고 package.json의 스크립트가 2배 정도 길어지긴 했으나, 그래도 자동화했다고 생각하면서 위안을 얻었다.

근데 불현듯... "나는 윈도 기반으로 스크립트를 작성했는데 그럼 리눅스 친구들은 어쩌지..?"라는 배려심 깊은 생각이 들었다. 부랴부랴 리눅스로 바꾸고 해 봤더니 역시나 안 먹히는 상황이 발생했고 고민했다.

다른 동료들에게 물어보니 대부분 타입 스크립트와 리액트, 노드에는 익숙지 않아 마땅한 답은 없었고, 그냥 윈도는 내가 만든 스크립트로, 리눅스는 bashrc에 넣고 돌리는 것으로 결정이 났다.

하지만 오기가 생겨 깃 헙에서 쓰는 글들을 하나씩 읽어나갔고 그중에 cross-env에 대한 간략한 언급을 보게 되었다.

해당 방법은 cross-env를 쓰는 것이었다. 나같이 고민하는 사람을 위해 node.js에서 추천하는 방법이라고 한다.

그래서 공식문서를 보고 다시 스크립트를 수정해봤다.

<package.json>
//기존 스크립트
scirpt {
  start : "webpack-dev-server --mode development"
}

//수정된 스크립트
scirpt {
  start : "cross-env NODE_OPTIONS=--max-old-space-size=8192 webpack-dev-server --mode development"
}

보면 스크립트 코드 앞에 사족이 붙었다. cross-env 라이브러리를 통해 해당 이슈에 맡는 값을 처리하고 그다음에 webpack를 돌리는 것이다.

함부로 package.json의 스크립트를 건드리는 건 위험한 일이나( 특히 많은 사람이 쓰는 공용 브랜치에) 더 나은 대안을 찾기 전까지 사용하기로 했다.

cross-env를 보니 스크립트뿐만 아니라 환경변수 및 여러 가지 설정값들을 js 파일로 들고 있다가 적용하는 방법도 있는 것 같던데, 그 부분을 중심으로 더 공부해보아야겠다.

  <추가적으로 보면 좋은 글>
velog.io/@public_danuel/process-env-on-node-js

www.npmjs.com/package/cross-env