2024.03.29 - [프로그래밍 공부/Node.js] - [Node.js] Node.js란? / Node.js와 npm 설치 / npm 프로젝트 실행 / 의존성 종류
[Node.js] Node.js란? / Node.js와 npm 설치 / npm 프로젝트 실행 / 의존성 종류
Node.js란? Node.js란 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임이다. Chrome V8 JavaScript 엔진은 자바스크립트의 문법을 해석하고 동작시켜주는 엔진이라고 보면 된다. 런타임은 프로그래밍 언어
gamzaggang7.tistory.com
지난번 포스팅에 이어 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 |