Express Scratch

Hoplin·2022년 10월 6일

Express 프로젝트 시작하기

Express 프로젝트를 시작해 봅니다. 터미널에 아래 명령어들을 입력합니다

# npm project를 초기화합니다
npm init -y

# Express 설치
npm i express

# Dev-Dependencides
npm i -D nodemon

npm i와 npm i -D의 차이점은 개발을 하기 위해서만 사용하는 경우에는 npm i -D로 설치를, 이외에는 npm i를 이용해 설치를 해주면 됩니다.

nodemon모듈은 서버 코드에 변경사항이 생기면 서버를 자동으로 재시작해주는 모듈입니다. 그러면 package.json파일에 아래와 같이 설치된것을 볼 수 있습니다.

"dependencies": {
    "express": "^4.18.1"
  },
"devDependencies": {
  "nodemon": "^2.0.20"
}

nodemon으로 서버를 시작하기 위해서는 scripts에 명령어 등록을 해주어야 합니다. scripts에는 해당 app에서 사용할 다양한 명령어들을 정의해두는 부분입니다. scripts에 정의된 명령어는 npm run (명령어)형태로 실행이 됩니다 app.js파일을 실행해야 하므로 nodemon app.js명령어를 실행하는 start라는 명령어를 등록해보겠습니다.

"scripts": {
    "start": "nodemon app.js"
  },

Express코드 작성해보기

app.js를 생성하고, 아래 코드를 작성 후 해석해 봅니다.

const express = require('express')

const app = express()

app.set('port',process.env.PORT || 3000)

app.get('/',(req,res) => {
    return res.send("<h1>Hello world</h1>")
})

app.listen(app.get('port'),()=>{
    console.log(`Listening on port ${app.get('port')}`)
})

Express모듈을 실행해 app변수에 넣습니다. Express모듈은 내부적으로 http모듈이 내장되어 서버역할을 할 수 있습니다.
app.set('key','value')를 이용해서 데이터를 저장할 수 있습니다. 저장한 값은 app.get('key')을 통해서 가져올 수 있습니다. 여기서는 app.set('port',process.env.PORT || 3000)을 통해서 port를 설정하는 부분입니다. process.env.PORT를 통해 환경변수의 PORT변수를 검사하고, 없다면, 3000을 default로 설정합니다.
app.get('address','Router')는 주소에 GET요청이 들어올 때 어떤 값을 반환할지에 대한것을 정의하는 부분이다. req는 요청에 대한 객체, res는 응답에 대한 객체입니다. node.js의 http메소드에 봤던 res.write, res.end 대신 res.send를 사용하면됩니다. GET이외에도 POST,PATCH,PUT,DELETE 모두 있습니다.(app.post(),app.patch()....etc)
app.listen()은 포트를 연결한 후에 서버를 실행합니다. 이는 웹서버와 동일합니다.

Express서버 실행해보기

Express서버를 실행시켜 봅니다. npm run start를 입력한 후 localhost:3000을 브라우저에서 접속해봅니다.

HTML파일 전송해보기

res객체의 send()메소드를 사용해서 html텍스트를 전송해도 좋지만, html파일 자체를 전송할 수 도 있습니다. html파일을 전송하기 위해서는 sendFile()메소드를 사용하면 됩니다.

하나의 조건을 추가해서 작성해 봅니다. /htmlfile이라는 주소에 GET요청으로 접속을 하여 html파일을 띄운다고 가정을 해보겠습니다.

<!DOCTYPE html>
<html lang="en">
<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>
</head>
<body>
    <h1>Router /htmlfile</h1>
    <p>This is page from html file</p>
</body>
</html>

const path = require('path')

app.get('/htmlfile',(req,res) => {
    return res.sendFile(path.join(__dirname,'index.html'))
})

이제 localhost:3000/htmlfile에 접속해 봅니다.

Hoplin

더 나은 내일을 위해 오늘의 중괄호를 엽니다

이전 포스트

Mac OS Mongo DB 설치

다음 포스트