[React.js] create-react-app vulnerabilities / CRA 버전 취약 오류

<문제 개요>

저번에 개인프로젝트를 새로 시작하려고 했었는데, create-react-app을 했더니 audit에서 vulnerability들이 어마무시하게 떴다. 그래서 node.js를 재설치만 하고 다른 일한다고 까먹고 있었는데, 이번에 대회를 준비하다보니 또 같은 오류가 발생했다.

 

create-react-app의 결과

 

올해 초에 개인프로젝트를 할 때는 이런게 없었는데, 문제를 찾기 위해 몇 시간을 썼다. node.js는 다섯번 정도 재설치 한 것 같고, 컴퓨터 내 모든 node_modules 검색해서 확인하고 관련 데이터를 거의 전부 지웠다. react-scripts도 여러번 재설치하고, yarn, npm 전부 지웠다가 다시 깔고, 재부팅도 여러번.. 근데 그래도 해결이 안되서 스트레스 풀로 받고 있던 도중에, 생각보다 너무 쉬운 결론을 찾을 수 있었다.

 

 

<해결 방법>

https://github.com/facebook/create-react-app/issues/11174

Help, `npm audit` says I have a vulnerability in react-scripts! · Issue #11174 · facebook/create-react-app

 

cra 공식 깃헙에 올라와있는 이슈이다. 너무 많은 사람이 관련 이슈를 올렸어서인지, 글에서 약간의 빡침이 느껴진다. ㅋㅋ

취약점을 이슈에 올릴 거면, '이해'하고 올려라!

 

결과적으로, npm audit은 Node App을 위해 존재하는 기능으로, 우리의 Create-React-App은 단순 빌드 툴로서 애초에 둘 간에 개념이 맞지 않는다. 따라서 npm audit이 취약점이라고 매번 얘기해줘도, 실제적으로 FE 개발에 있어서는 문제가 되지 않는 부분이라는 것이다. 즉, 우리가 create-react-app을 사용하는 이유는 정적 세팅을 위함이기 때문에, npm audit의 경고는 우선 무시해도 된다.

 

하지만 패키지를 설치할 때마다 계속 빨간색 보라색이 뜨는 건 좋지 않으니, 해결방법 또한 있다.

package.json 수정

방법은 간단하다. 단순히 package.json을 아래와 같이 수정해주면 된다. 이렇게 수정해주고 npm audit --production으로 확인해보면, 모든 취약점이 사라져있음을 볼 수 있다. (사실 그래도 npm audit만을 치면 취약점이 있다고 그대로 뜬다. 하지만 어쩔 수 없단다.)

임시방편

 

<결론>

npm audit은 Node App을 위한 기능으로, 우리는 상관없다!