2024.03.29 - [프로그래밍 공부/Node.js] - [Node.js] Node.js란? / Node.js와 npm 설치 / npm 프로젝트 실행 / 의존성 종류
지난번 포스팅에 이어 parcel 번들러를 이용해 실제 브라우저에 내용을 출력해 볼 것이다.
우선 index.html과 main.js파일을 생성한다.
import _ from 'lodash'
console.log(_.upperCase('hello-world'));
lodash 패키지를 변수 _로 가져와서 lodash의 uppercase를 사용해볼 것이다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="module" src="./main.js"></script>
</head>
<body>
</body>
</html>
그리고 html에 main.js를 연결한다. 이때 main.js에서 import를 사용했으므로 main.js는 module이 되고 이 모듈을 html에 가져올 때는 type="module" 명령이 필요하다.
이제 live server 말고 parcel을 이용해 개발 서버를 오픈해보자.
package.json파일을 열면 scripts 옵션이 있다. 이 옵션에 있는 test를 삭제하고 dev: ""을 입력한다. 이 따옴표 안에 parcel 명령어를 입력할 수 있다.
parcel 명령어는 프로젝트에 사용하게 위해 설치한 것이기 때문에 터미널에서 직접 사용할 수 없다. 때문에 스크립트에 명령을 등록해야 설정할 수 있고 명령의 이름은 꼭 dev로 할 필요는 없다.
등록한 명령은 npm run [명령어]로 터미널에서 사용할 수 있다.
성공적으로 빌드된 모습니다. 만약 Build failed가 뜬다면 npm install -g parcel-bundler@latest 명령어로 parcel을 최신버전으로 업데이트하고 다시 실행하면 잘 빌드될 것이다.
콘솔에 뜬 http://localhost:1234/를 클릭하여 이동하여 개발자 도구를 열고 콘솔을 확인해 보면 hello-world가 대문자로 잘 바뀌어 출력된 것을 볼 수 있다.
이때 '-'는 띄어쓰기로 변환된다.
아까 작성했던 js코드를 타입스크립트로 바꿔보자
interface User {
name: String
age: number
}
const user: User = {
name: 'Kim',
age: 85
}
index.js에 위 타입스크립트 코드를 작성하면 에러가 뜨는데 확장자를 js가 아닌 ts로 고쳐주면 에러가 사라진다. 하지만 터미널을 보면 index.html에서 main.js를 가져올 수 없다는 에러가 떠있을 건데 html파일로 가서 main.js를 main.ts로 고쳐주면 에러가 사라진다. parcel 번들러가 타입스크립트를 지원하기 때문에 별로로 프로젝트 구성을 하지 않아도 이렇게 타입스크립트를 도입하면 동작이 된다.
타입스크립트는 브라우저에서 직접적으로 동작할 수 없지만, parcel 번들러가 작성된 타입스크립트의 내용을 실제 브라우저에서 동작할 수었도록 js 코드로 변환해 준다. 이를 확인하기 위해 main.ts에 아래 코드를 추가한다.
console.log(user);
user 객체 데이터가 잘 출력되었다.
프로젝트에 dist라는 폴더가 생겼다. dist는 distribute의 약어로 실제 서비스될 빌드된 결과의 폴더이다.
dist 폴더의 html파일을 열어보면 이런 코드가 보일 것이다.
타입스크립트로 만든 코드(main.ts)를 parcel 번들러가 변환하고, 다른 파일들과 묶어서 index~ 이름의 js파일로 만든 것이다. 이 js파일을 dist/index.html에서 사용하고 있고 결과적으로 아까 브라우저에서 확인한 화면은 dist/index.html 파일이다.
터미널에서 서버를 종료하고 dist폴더를 삭제해 보자.
package.json파일에서 dev밑에 새 스크립트를 작성한다.
이 명령어는 개발용으로만 서버를 오픈하는 것이 아니고 실제 제품용으로 결과를 만드는 명령어이다. 터미널에서 이 명령어를 실행해 주기 전에, package.json을 보면
이런 코드가 있는데 index.js파일을 메인으로 실행시킨다는 뜻이다. 지금 프로젝트에 index.js 파일이 없어 에러가 뜨기 때문에 이 코드를 삭제하고 터미널에서 build 명령어를 실행시킨다.
프로젝트에 dist폴더가 다시 생겼다. 이렇듯 dist폴더도 node_modules와 같이 다시 만들 수 있기 때문에 git에 올릴 필요가 없다.
.gitignore에 dist도 추가해 주었다.
'Node.js' 카테고리의 다른 글
[Node.js] Node.js란? / Node.js와 npm 설치 / npm 프로젝트 실행 / 의존성 종류 / parsel (1) | 2024.03.29 |
---|---|
[Node.js] http 모듈로 서버 구축하기(2) - REST API (24) | 2024.03.13 |
[Node.js] http 모듈로 서버 구축하기(1) - http 모듈, fs 모듈 (0) | 2024.03.04 |
node.js와 mongoDB로 웹 만들기 (5) 아이디 중복체크(ajax) (0) | 2023.01.17 |
node.js와 mongoDB로 웹 만들기 (4) mongoDB 연결 (0) | 2023.01.13 |