[Parcel] #4 TypographyJS and Building for Production (#코딩공부)

https://youtu.be/_sqpbK1I6_k

---

<복습>

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

[Parcel] #3 CSS Modules and SCSS with Parcel (#코딩공부)

 

<준비물>

https://ko.parceljs.org/

Parcel

https://ko.wikipedia.org/wiki/%ED%83%80%EC%9D%B4%ED%8F%AC%EA%B7%B8%EB%9E%98%ED%94%BC

타이포그래피 - 위키백과, 우리 모두의 백과사전

---

1. Typography

npm add typography로 typography를 설치하자.

 

양식에 맞게 typography.js 파일을 만든 뒤, fontsize와 lineheight, googlefont 등을 설정하고, injectStyles()로 적은 내용을 css로 바꿔줬다.

 

typography.js에서 export(수출)한 것을 index.js에서 import하고 npm start로 localhost:1234를 실행해서 보면, body의 FontFamily가 typography로 설정한 font로 나오는 것을 알 수 있다.

 

App.js에서 h1(header)와 p(paragraph) 문구를 추가하고 localhost를 보면, css작업을 하지 않았는데도 h1(header)와 p(paragraph) font가 typography.js로 설정한대로 변경돼있는 것을 확인할 수 있다.

---

2. build

package.json 파일에 "scripts"로 "build" 명령어를 추가했다. "parcel build index.html -d(document 안) build --public-url(같은 곳에 저장)"가 터미널에서 npm run-script build만 치면 실행된다.

 

npm run-script build로 인해 build폴더가 생기고 그 안에 여러가지 파일이 자동으로 complie돼 생성된다.

 

그리고 직접 적지 않은 엄청난 코드들도 minify(경량화)해서 자동으로 저장된다.

 

다시 pakage.json에서 "build" 명령어 중 pubilc url로 GitHub https를 적으면, build한 뒤 index.html에 GitHub의 https가 생성된다.

 

localhost:1234로 실행한게 아니라 parcel의 "build"로 만든 html파일을 실행한 결과이다.