개발 서버 실행과 빌드

기존의 test 폴더에 

index.html 파일과

main.js 파일들을 추가하고 

터미널을 열어서  전시간에 설치한 parcel 패키지를 사용해

parcel index.html 실행!

이런식으로 오류가 뜨는게 정상!

package.json 파일로 들어와서

저문구를 지워준다.

개발용 의존성 패키지로 parcel-bundler 라는걸 설치를 했고  parcel-bundler에서 개발서버를 열어주는 

기능을 동작시킬수가있음 

그런데 parcel-bundler는 내 프로젝트 에만 설치가 되어있는 상태이기 때문에 Terminal에서 직접적으로 

parcel이라는 명령어를 동작시킬수가없다!

그래서 대신에 package.json 파일의 scripts 라는 옵션에다가 명령을 추가하게 되면 

어디까지나 프로젝트 내부에서만 명령이 동작하는걸로 인식을 시켜줄수 있겠고 

대신에 그 명령을 dev라는 이름으로 실행해주면 되겠다.

 

터미널로 다시 돌아와서 

npm run dev 입력!

dev는 로컬환경에서 개발서버를 열겠다.라는 의미를 가지는것이고

그개발서버를 여는 명령으로는 parcel-bundler라는 패키지 의 도움을 받아서 그명령을 실행하는것이다.

저링크를 클릭하면 프로젝트가 열리는것을 확인할수있음

main.js 에 작성한 console.log(hello world)가 정상적을 출력됨!

이번에는 scripts 옵션에 build를 추가해서 사용해보자!

터미널에서 실행! 아까와는 다르게 개발용 서버가 열리지않음

하지만 사진에 보면 

dist\라는 폴더가 만들어졌고 파일들이 생성되는걸 알수있다.

dist 폴더에 있는 index.html 파일을 실행시켜보면

구조가 이렇게 다닥닥 붙어있는게 있다.

이런것을 난독화라고 칭한다.

코드 난독화는 작성된 코드를 읽기 어렵게 만드는 작업을 말합니다.

빌드된 결과(제품)는 브라우저에서 해석되는 용도로,

용량을 축소하고 읽기 어렵게 만드는 등의 최적화를 거치는 것이 좋습니다.

결국 dist폴더안에 있는 파일들은 웹브라우저에서 동작하는 용도로 만들어짐