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> 태그는 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. 스스로 해보기
- 작업용 폴더를 그냥 아예 따로 만들자.
