3. index.html 만들기
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./main.js"></script>
</head>
<body></body>
</html>- vscode 내에서 느낌표(!)를 입력하면 자동으로 연결되는 스니펫을 이용한다.
<script src="./main.js"></script>를<head>에 추가한다.
4. main.js 만들기
console.log('hello world');- 테스트용 콘솔로그를 작성한다.
5. package.json 내의 scripts 수정하기
기존에 작성되어있는 명령어는 사용하지 않으니 삭제해도 된다.
그리고 아래와 같이 추가한다
"scripts": {
"dev": "parcel index.html",
"build": "parcel build index.html"
},parcel
parcel 자체는 일반 터미널에서 입력하면 명령어를 찾을 수 없다.
하지만 이렇게 스크립트 내에 작성하면 설치된 모듈에서 찾아 이 프로젝트에서만 실행되는 명령어가 된다.
6. npm run dev
이전 단계에서 우리가 스크립트에 작성한 dev 를 동작시키기 위해 npm run dev 명령어를 사용한다.
작동된다면 서버가 연결된다. (ex. http://localhost:1234 )
해당 주소로 접속하여 콘솔창을 확인하면 hello world 를 확인 할 수 있다.
7. lodash 사용하기
main.js 의 맨위에import _ from "lodash"; 를 작성한다.
그리고 아래에console.log(_.camelCase("hello world")); 를 입력한다.
이는 단순히 hello world 를 camelCase 로 변환시켜주는 기능이다.
8. npm run build
이번에는 우리가 설정한 스크립트 build 를 실행시켜보자npm run build
를 입력하면, dev 스크립트와 다르게 서버에 연결되는 것은 아니지만
배포를 위한 dist 폴더에 html,js 파일들이 만들어진 것을 확인할 수 있다.
해당 파일들을 열어보면 우리가 작성했던 코드와 다름을 확인 할 수 있는데 이는 외부 사람들이 코드를 쉽게 이해하지 못하도록 난독화를 거쳤기 때문이다.
'웹공부' 카테고리의 다른 글
| socket.IO 를 이용한 채팅 사이트 만들기 - 1 (0) | 2021.10.15 |
|---|---|
| 유의적 버전 (SemVer, Semantic Versioning) (0) | 2021.10.14 |
| npm 시작하기 - 1 (0) | 2021.10.14 |
| node.js 개요, nvm 설치 (0) | 2021.10.13 |
| node 와 npm (0) | 2021.10.05 |