Parcel 이용 방법.

<개요>

웹 브라우저에 띄울 수 있는 언어는 HTML, CSS, JS 이 세 개 뿐이다. TS(typescript)는 JS를 더 쉽게 쓰기 위하여 나온 언어 이지만 이 코드는 웹 브라우저에 띄울 수 없기 때문에 변환 과정을 거쳐야 한다. 이 변환 과정을 자동으로 해주는 Module이 바로 Parcel이다. 

Parcel의 또 다른 장점은 빌드가 빠르고 쉽다는 것이다. 

또한 우리는 JS에서의 설정 파일인 package.json을 이용해, test 상황과 배포 상황 각각 빌드를 다르게 해주는 환경을 만들 것이다. 

 

1. package.json 안의 내용 수정

  "scripts": {
    "dev": "parcel ./index.html", 
    "build": "parcel build ./index.html"
  }

package.json 의 "script"안에는 다양한 명령어들을 설정 해둘 수 있다. 

"A" : "B"이고, A가 B란 명령어의 이름이다. 

npm run A 를 터미널에 치면 B가 실행된다. 

위의 scripts 중 build 명령어를 실행

그럼 위의 설정들을 해석 해보자. 

일단 둘 다 parcel이란 명령어를 사용하고 있다. parcel은 여러 파일을 하나로 묶어 빌드 해주는 모듈이다. 

또한 해당 파일 내부에서 TS 파일을 참조하여 사용하고 있다면, 해당 TS 파일을 JS 파일로 변환하여 실행시켜주는 역할도 한다. 

dev: "parcel . /index.html"은 index.html이라는 파일을 찾아서 빌드하라는 소리이다. 

 build는 parcel 앞에 build란 말이 하나 더 붙어 있는데, 이 build란 속성은 해당 파일을 찾아서 배포용으로 빌드시켜준다.

배포용으로 빌드 시켜준다는 말은 다음과 같다. 

우리가 html이나 CSS를 쓸 때 가독성을 높이기 위해 띄어쓰기 줄바꿈 등을 한다. 

하지만 빌드 해서 브라우저로 해당 파일을 보낼 때, 이런 띄어쓰기나 줄바꿈은 불 필요하다. 

build의 기능은 이런 띄어쓰기, 줄바꿈 다 빼고, 최대한 용량을 줄여서 빌드 하는 것인데, 이를 배포용으로 빌드 시킨다고 말한다. 

2. main.ts 내부

import _ from 'lodash'

console.log(_.upperCase('hello-world'))


interface User {
  name: String
  age: number
}

const user: User = {
  name: 'Heropy',
  age : 85
}

console.log(user)

ts는 js를 더 쓰기 쉽게 바꾼 언어이다. 

위의 import _ from 'lodash'는 lodash라는 모듈의 기능을 _라는 변수 안에 넣고 사용하겠다는 뜻이다. 

그 다음 문에서 알 수 있겠지만 _  가 lodash의 취급을 받는다. _.uppercase는 lodash안의 매소드 uppercase를 쓰겠다는 의미이다. 

 

import를 해서 다른 모듈을 쓴 순간부터 해당 js 혹은 ts 파일 또한 모듈 취급을 받는다. 

 

3. index.html 내부

  <script type = "module" src="./main.ts"></script>

해당 문장이 html 헤드에 추가 되었다.

<script> 태그는 html 문을 실행하다가 해당 태그를 만나면 해당 태그의 속성인 src가 가리키는 경로의 파일을 다운 받아서 실행하라는 뜻이다.

앞에 type 속성으로 "module"이라 적혀 있는 것은 우리가 참조한 typescript가 모듈이라서 그렇다. 

해당 html은 ts를 참조하고 있는데, ts -> js로 변환 시켜주지 않으면 사용하지 못한다.

따라서 parcel을 이용하여, 터미널에 npm run 'parcel이 든 명령어'로 실행 시켜줘야 한다. 

 

4. 그 외의 용어 정리 

Ctrl + C 를 누르면 현재 진행되고 있던 서버가 종료된다.

 

한번 build를 하고 나면 dis라는 폴더가 새로 생긴 것을 알 수 있다. dist는 distribute의 약자로, 

어떤 프로그램을 배포하기 위해, 빌드된 결과들이 모두 저장된 폴더이다.

parcel을 번들러라고 한다. 

bundler란 여러 개의 파일들을 하나의 파일로 묶어주는 것을 의미한다. 

만약 파일을 묶을 수 없다면, 다음과 같은 일이 발생한다. 

1개의 파일을 요청하여 응답하는데 까지 시간이 1초 걸린다면, 10000개의 파일을 요청하여 응답하는데 까지는 10000초가 걸릴 것이다. 한 파일 한 파일 다 꺼내서 응답해야 하기 때문이다. 

bundler는 여러 개의 파일을 하나의 파일 안에 다 몰아 적어 놓는다. 

따라서 여러 개의 요청이 와도 하나의 파일만 꺼내서 주면 되기 때문에, 위의 경우에서 1개의 파일을 요청하여 응답하는데 걸리는 시간과 비슷하게 시간이 소요됨을 알 수 있다. 

 

5. 스스로 해보기

(개발용 /  배포용) 빌드 바꾸며 실행

배포용으로 실행하였더니 빌드된 html 결과가 이렇게 떴다. 

배포용은 html이나 css , js를 브라우저로 보내기 최적화된 상태로 빌드하기 때문에, 밑의 사진과 같이 띄어쓰기와 줄바꿈이 다 사라진 것을 알 수 있다. 

<script>를 통해 참조된 js 파일도 개발자가 보기엔 어지럽지만, 브라우저 배포에 최적화된 상태로 나온 걸 볼 수 있다.

개발용으로 빌드 해보기 

개발자가 고치기 편하게 가독성 좋게 나온다.

빌드된 js도 마찬가지 이다.