[Parcel] #2 React and ES6 with Parcel (#코딩공부)

https://youtu.be/gRR9xvT8uDo

---

<복습>

https://wook-2124.tistory.com/115

[Parcel] #1 Hello world with Parcel (#코딩공부)

 

<준비물>

https://ko.parceljs.org/

Parcel

---

1. Component

src 폴더를 생성하고 APP.js 파일을 만들어서 첫 번째로 component를 rendering(표현)하고, 두 번째로 React로 rendering한 것을 부르고, 세 번째로 ReactDOM으로 rendering할 것이다.

 

index.js에서 parcel에 설치한 react와 react-dom을 import(수입)하고, src폴더에 만든 App.js도 import해주자.

---

2. rendering

'!'로 HTML의 기본요소를 한번에 작성했듯이, Emmet Abbreviation인 #으로 id를 한번에 작성할 수 있다.

 

https://wook-2124.tistory.com/116

[TIP] 에멧 단축키(Emmet Abbreviation) in Visual Studio Code

 

id="app"을 만들고, ReactDOM을 여기에 rendering(표현)해줄 것 이다. rendering이란 2차원에 표시된 물체를, 3차원에서도 물체처럼 보이게 하는 것을 뜻한다.

 

세 번째 ReactDOM에서 app을 rendering(표현)해준다. 그러나 아직 APP이 뭔지 모르는 상태다. 왜냐하면 아직 코드를 변환하지 않았기 때문이다.

 

때문에 Babel(바벨)이 필요한데, Babel(바벨)은 새로운 코드를 이전 JavaScript로 변환해주는 역할이다.

---

3. Babel

다음으로 .barbelrc에서 presets(기본값 설정)으로 load해서 사용할 List를 만들었다. "env"는 셸 명령어로, 현재 지정되어 있는 환경 변수들을 출력하거나, 새로운 환경 변수를 설정하고 적용된 내용을 출력하는 명령어이다.

 

그리고 터미널에서 npm start로 component를 rendering한 것을 localhost로 확인하려하는데 오류가 발생했다. ./src뒤에 App을 붙이지 않아 src폴더 안에서 어떤 파일을 import할지 명명하지 않은 것이 문제의 원인이었다.

 

오류를 해결하고 npm start로 localhost:1234로 들어가 F12(검사)를 해보면, index.js에서 App.js를 import하고 rendering(표현)해서 index.html의 id="app"으로 rendering해주고 있는 것을 알 수 있다.

 

Parcel은 이처럼 .barblerc과 JS파일이 있다면, 'Babel이 JavaScript를 변환시켜서 index.html로 rendering(표현)하려 하는구나!'를 알아채고 우리를 대신해서 작업을 해준다.