[Node] Express 서버 만들기 - 1 / express, babel, nodemon

[Node] Express 서버 만들기

Express 서버를 만들어보고 시간이 된다면 DB 연결하여 CRUD까지 해보도록 하겠습니다.

이번 게시글에서 알아볼 내용은 express 서버 구현 방법, babel 셋팅, nodemone 셋팅 입니다.

babel은 최신 자바스크립트 문법을 구식 자바스크립트 문법으로 변환을 해줍니다. 아래 게시글 참고하면 조금 더 상세히 보실 수 있습니다.

[Node] babel이란? babel 설치 및 설정하는 방법

nodemon은 코드를 수정한 후 일일이 재실행하지 않고 자동으로 재실행을 해줍니다.

 

참고 : 게시글에는 중간 과정을 생략한 내용이 많이 있습니다. 예를 들어 babel 사용하기 전 코드를 보여주고 babel을 사용하면 어떻게 코드가 변하는지 등을 보여주진 않고, 바로 babel을 적용하는 등 중간 과정을 생략하는 경우가 많이 있습니다.

준비 및 사용할 패키지 설치하기

1. Node는 설치되어 있다고 가정하고 시작하겠습니다. 우선 개발 진행할 폴더를 생성하고 아래 명령어를 입력하여 package.json을 만들어 줍시다.

명령어 : yarn init

 

2. Express 패키지를 설치해줍니다.

명령어 : yarn add express

 

3. Babel을 위한 패키지를 설치해줍니다.

명령어 : yarn add -d @babel/core @babel/node @babel/preset-env

 

4. nodemon을 위한 패키지를 설치해줍니다.

명령어 : yarn add -d nodemon

 

5. 위 패키지를 전부 설치하였으면 개발 준비가 완료되었습니다. 마지막으로 서버로 사용할 파일 server.js를 생성해줍니다.

babel 및 nodemon 설정하기

1. babel.config.json 파일을 package.json 파일과 동일 레벨에 생성한 뒤 아래 코드를 작성해줍니다.

{
    "presets": [
        "@babel/preset-env"
    ]
}

 

2. package.json에 script를 수정해줍니다. 코드 수정 후 매번 재실행하지 않기 위해 nodemon, 최신 자바스크립트 문법을 사용하기 위해 babel 설정을 추가해줍니다.

"scripts": {
    "start": "nodemon server.js --exec babel-node"
  }

서버 구현하기

1. 생성한 server.js 파일에 아래 코드를 추가해줍니다.

import express from "express";

const PORT = 3000; // 서버에 사용할 포트 번호
const app = express();

app.listen(PORT, () =>
  console.log(`Express server : http://localhost:${PORT}`)
);

2. 명령어 : yarn start 를 입력해주면 서버가 실행됩니다.

참고

코드는 해당 github에서 다운 받으시면 됩니다. 주소 : 이동하기

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다.