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

https://youtu.be/ZNCADEw21Dw

---

<복습>

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

[Parcel] #0 Parcel What and Why (#코딩공부)

 

<준비물>

https://ko.parceljs.org/

Parcel

 

https://ko.parceljs.org/getting_started.html

🚀 시작하기

---

1. Parcel 시작하기

yarn으로 설치하는 것은 Mac os 기준인 것 같다.. Windows에서는 오류가 나왔다. npm install -g parcel -bundler로 설치하고, npm init으로 기본값을 초기화시켰다.

 

json파일이 생기고 New version을 설치할 수 있다고해서 npm install -g npm으로 Update를 하고,

 

README를 작성하며 어떤 Feature로 공부해나갈지 미리 예습했다. 일단 React부터 설치해보자.

---

2. React, Babel

npm add react react-dom 으로 React를 설치하고, npm add babel-preset-env babel-preset-react로 babel도 설치했다.

---

3. Rendering(표현)

html 파일을 하나 만들고, '!'를 입력해서 기본양식을 불러왔다.

 

<script src> 부분이 내가 만들 app을 불러올 index.js가 있는 곳이다. 쉽게 말해, React app을 React dom과 함께 rendering(표현)할 곳이다.

 

Terminal에 parcel이라고 치면, parcel과 함께 compile을 진행하게 된다. parce index.html을 입력하면 연동이 된다.

 

"Hell"는 Bulit in 36ms, "Hello, YoungWook"은 Bulit in 46ms으로 자동으로 complie(Auto Reloading)되는 것을 알 수 있다. 그리고 http://localhost:1234에서 complie된 모습을 볼 수 있다.

 

index.js에 적은대로 "Hello, YoungWook"이 console.log로 출력됐다. 그리고 Elements를 보면 index.js를 이미 build한 것을 알 수 있다.

---

4. npm start

json 파일에 "scripts"로 "start"를 추가하면 "parcel index.html"을 입력하는 대신 npm start로 간편하게 localhost와 연동할 수 있다. 이렇게 하면 그전에 연동됐던 1234는 사용하지 못하고 49916으로 연결된다.

 

parsel를 설치한 것만으로 수많은 module들을 가지고 왔고, development server도 쉽게 만들었다. parcel을 설치하고나면 index.html과 index.js 작업만 하면되는 간편함이 있다.