Node.JS Set Up #5

0_CyberLover_0·2022년 3월 18일
0

Node.JS # 01

목록 보기
7/21
post-thumbnail

이제 babel이 babel.config.json 파일을 찾아서 설정을 해보자

아직 babel을 사용 하지는 않았다.

babel 홈페이지에 가보면


require("@babel/core").transform("code", { presets: ["@babel/preset-env"], });

사용 방법이 나와있지만 이걸 직접 하진 않을거다.

왜냐하면 JavaScript에서 직접 babel을 사용하지 않을거기 때문이다.

대신 package.json에서 babel로 compile하는 script를 만들거다.

그러기 위해서 node mon이라는걸 쓴다.

vsc 터미널에서 npm install @babel/core @babel/node --save-dev

중복되는게 있지만 npm은 알아서 중복되는건 빼고 없는 패키지만

깔아주기 때문에 신경 쓰지 않아도 된다.



package.json파일을 확인해 보면


"devDependencies": {

"@babel/node": "^7.16.8", 

}

추가 된걸 알수 있다.


이제 win이라는 Script 대신

development을 나타내는 dev로 Script을 바꿔준다.

babel node를 쓰고 싶다는 걸 알려 줘야 되기에


"scripts": {

"dev": "babel-node index.js"

}

@babel/node 를 설치 하였기 때문에 babel-node 라는 명령어를 쓸수 있다.

그래서 Script을 바꿔 준거다.

nodeJS가 실행 해주면 babel도 같이 적용되서 실행되는 거다.

최신 문법 코드를 동작 시킬수 있는거다.



이제 dev를 실행해 보자

vsc 터미널에서 npm run dev

내용이 없어서 아직 뭔가 뜨진 않는다.




index.js에서

console.log("Hi!!");

여기서 이제 최신 code를 작성 할수 있다.

import express from "express";

console.log("Hi!!");

이렇게 작성 하고 실행해 보도록 하자

npm run dev

잘 작동하지만 코드를 수정 할때마다 새로 저장하고 실행하려면 npm run dev를 해줘야 한다.

굉장히 번거롭기 때문에 그래서 nodemon을 쓰는거다.

nodemon은 만든 파일이 수정되는걸 감시해주는 패키지다.

파일이 수정되면 nodemon이 알아서 재시작을 해준다.

그렇게 되면 npm run dev 를 계속 실행 할 필요가 없다.

여기서 nodemon을 설치 할거다.

npm i nodemon --save-dev

설치 뒤

"devDependencies": {

"nodemon": "^2.0.15"

}

확인할수 있다.

nodemon을 쓸수 있도록 수정해준다.


"scripts": {

"dev": "nodemon --exec babel-node index.js"

},

그리고 이제 터미널에서 실행해 보면 package.json에서 수정 되자 마자 바로 알아서 재실행 되는것을 알수 있다.

import express from "express"; 는 지워도 상관 없다.

지금 이 방식은 node를 실행하는게 아니라 babel-node로 실행하는 거다.

profile
꿈꾸는 개발자

0개의 댓글