JS를 HTML 내부에서 쓸 수 있도록 설정

0. 프로젝트 만들 폴더 열기 (VScode 이면 파일 누르고 폴더 열기)

1. npm 깔기 (터미널에 npm init -y ) (-y 쓰면 메타데이터 설정하는 거 건너 뛰겠다는 소리)

2. Parcel 번들러 설치 (터미널에 npm -i -D parcel)

(여기서 -D는 개발할 때만 해당 module을 쓰겠다는 의미, 배포 시 안 따라감.)

3. package.json의 script 영역 편집

- script 영역은 명령어들을 설정할 수 있음. "A" : "B" 형태로 설정

  설정 시 npm run A 라고 터미널에 치면 B가 수행됨.

- 우리는 여기서 개발 용 빌드와 진짜 찐막 배포 시 빌드로 빌드 명령어를 2개로 나눌 것임. 

parcel 옆에 build를 적으면, 배포용으로 빌드 하겠다는 소리고 빌드 결과가 사람이 읽긴 어렵지만, 용량 최대한 줄이고, 웹 브라우저 올리기 최적화된 상태로 나온다. 

 

**주의점! **

parcel 이 ./index.html을 한다고 해서, 해당 html 문서만 빌드 하는 것이 아니다. 

위에 parcel 옆에 적은 주소는 parcel이 최초로 어떤 파일을 기점으로 번들 될 것인지 명시 하기 위에 쓴 주소이다.

 

4. index.html 파일 만들기

! tab 치면 기본 설정은 알아서 다 됨. 

우리가 추가 해줘야 할 것.

  <script type = "module" defer src="./main.js"></script>

<script> 태그는 JS를 참조해서 쓰기 위한 태그이다. 

-속성 설명

- - src 속성에 적혀있는 주소의 JS 파일을 다운 받아서 사용함. 

- - 우리가 쓰려는 JS 파일이 Module일 경우 type = "module"이라는 속성을 써야 함.

- - 만약 우리가 JS 파일에서 HTML 태그들을 사용해야 할 경우, 웹 브라우저가 HTML을 먼저 다 읽고 분석한 다음에 JS v파일을 다운해 사용 하도록 해야한다. defer라는 속성을 적으면 브라우저가 HTML을 먼저 분석 다하고, JS 파일을 연다.

 

** 우리가 쓰려는 건 그냥 JS 파일 아닌가? NO! ** 

import를 통해 다른 module을 사용한 순간 부터 해당 JS 파일은 Module이 된다. 

 

5. main.js 만들기

 아직 별다른 내용 x 

 

6. 스스로 해보기 

- 작업용 폴더를 그냥 아예 따로 만들자.