TIL - React 개발 프로젝트 생성(CRA)과 설치 / 바벨이 뭐야?

CRA(Create React App) 

: Set up a modern web app by running one command
한 줄의 명령어 입력으로 React 프로젝트 개발에 필수요소를 자동으로 구성하는 방법!

• 작업하기를 원하는 폴더를 생성 이동하고, git bash 오픈!
• 위치를 잘 확인해준 후에 yarn create react-app <폴더이름> 하면 프로젝트 생성!
• 시간이 잘 흐르고 프로젝트가 완성!
• 폴더와 파일들 확인하고
• yarn start로 로컬 서버를 돌리자
• 마자 오류 등장..

---

 1. 내가 설치한 노드버전이 CRA를 지원하지 않는 경우인가? 

해결방법1. nvm-setup.ex 파일을 설치해주고 버전을 변경해줘보자! https://github.com/coreybutler/nvm-windows/releases

Releases · coreybutler/nvm-windows

나는 nvm 16.18.0 버전을 설치하여 변경해줬다. 

사용할 버전의 Node를 설치	nvm install 16.18.0
해당 버전 사용 선택	nvm use 16.18.0
버전 확인	node --version

---

2. 'deep-equal' 모듈을 찾을 수 없다고?

그리고 또 다른 에러,
jsx-ally를 로딩하는데 문제가 있다는데, 특히 그 중에서 'deep-equal' 모듈을 찾을 수 없다고...

사실 이런 문제들을 만나면 필요하다는 것들을 이렇게 저렇게 찾아서 설치를 해보는 편이다... 해보자

ERROR
[eslint] Failed to load plugin 'jsx-a11y' declared in 'package.json » eslint-config-react-app': Cannot find module 'deep-equal'
Require stack:
- C:\Users\Keitha\Desktop\sparta\React\week-1\node_modules\axobject-query\lib\elementAXObjectMap.js
- C:\Users\Keitha\Desktop\sparta\React\week-1\node_modules\axobject-query\lib\index.js
- C:\Users\Keitha\Desktop\sparta\React\week-1\node_modules\eslint-plugin-jsx-a11y\lib\util\isInteractiveElement.js
- C:\Users\Keitha\Desktop\sparta\React\week-1\node_modules\eslint-plugin-jsx-a11y\lib\rules\aria-activedescendant-has-tabindex.js
- C:\Users\Keitha\Desktop\sparta\React\week-1\node_modules\eslint-plugin-jsx-a11y\lib\index.js
- C:\Users\Keitha\Desktop\sparta\React\week-1\node_modules\@eslint\eslintrc\dist\eslintrc.cjs

 

>>>  'deep-equal' 모듈 설치하기

yarn add deep-equal

혹시 deep-equl 모듈이 이미 있는데도 이런 오류가 난다면 지우고 설치해보자...!

 

---

 

3. babel-preset-react-app is importing blabla package without declaring it in its dependencies....
babel-preset-react-app은 종속 항목으로 선언하지 않고 blabla 패키지를 가져오고 있습니다....

webpack compiled with 1 warning
One of your dependencies, babel-preset-react-app, is importing the
"@babel/plugin-proposal-private-property-in-object" package without
declaring it in its dependencies. This is currently working because
"@babel/plugin-proposal-private-property-in-object" is already in your
node_modules folder for unrelated reasons, but it may break at any time.

babel-preset-react-app is part of the create-react-app project, which
is not maintianed anymore. It is thus unlikely that this bug will
ever be fixed. Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.

마치 당장 해결할건 아니지만 언젠가 위협이 될거라는 듯한 경고 메세지.. 찝찝하다.

Add "@babel/plugin-proposal-private-property-in-object" to
your devDependencies to work around this error. This will make this message
go away.

또 시키는대로 해보자.

1. package.json 파일 오픈
2. devDependencies에 "@babel/plugin-proposal-private-property-in-object" 추가하기
3. git bash 에서 babel vesion 확인하기
4. 내 package.json 파일은 이러하다

---

근데 바벨이 뭐지?

바벨은 JavaScript 코드의 변환(transpilation)을도와주는 도구로, 주로 최신 JavaScrip 문법을 지원하지 않는 환경에서 최신 문법을 사용할 수 있도록 변환해주는 역할을 한다고 한다. 바벨은 compiler로 분류되며, 다양한 환경에서 사용되는 JavaScript 코드를 변환하여 하위 버전의 JavaScript 엔진에서도 동작할 수 있도록 해준다!

(그렇다면 아까 위에 최신버전이었던 node 버전을 16버전으로 하향하면서 얘가 날 위협한걸까.. 하는 합리적인 의심을 해본다....)
--> 의심는 확신으로. Node.js 버전을 최신 버전에서 하향 조정하여 프로젝트를 설정할 때 위 경고가 발생할 수 있다고 한다. 그 이유는 바벨 프리셋'babel-preset-react-app'이 더이상 유지되지 않는 create-react-app 프로젝트의 일부이기 때문이라고.....!

무튼 bable 이렇듯 주로 프론트엔드 개발에서 사용되며, React, Vue.js, Angular 등과 함께 사용되는 경우가 많다.
다양하게 확장이 가능하고 커뮤니티도 활발해서 다양한 플러그인과 프리셋이 제공되고 있는 도구!

https://babeljs.io/