[노드 2] 6장. 익스프레스 웹 서버 만들기

 

 

 

🌟6장 키워드🌟

웹 서버 프레임워크

익스프레스

미들웨어

라우터와 에러 핸들러

start속성

 

 

 

 

 

 

 

 

익스프레스

: npm에 있는 웹 서버 프레임워크로, 서버 제작과정에서 겪는 불편함 (4장 참고, 불편한 코드 보기와 확장성) 해소와 편의 기능 추가를 위해 만들어졌다.

 

특징

: http 모듈의 요청과 응답 객체에 추가 기능들을 부여.

: 기존 메서드 + 편리한 메서드 추가

: 코드 분리하기 쉽게 만들어 관리 용이

: if문을 이용한 요청 메서드와 주소구별 X

: 많은 사람이 사용하기에 버그가 적고, 기능 추가나 유지 보수가 활발함

 

익스프레스 외의 웹 프레임 워크

: koa, hapi (사용량이 익스프레스에 비해 적음)

 

 

 

6.1. 익스프레스 프로젝트 시작하기

 

익스프레스 프로젝트 실습 과정에 대해 설명한다.

 

실습을 진행할 (learn-express) 폴더 새로 설정 -> package.json을 제일 먼저 생성

  way1) package.json을 생성해 주는 npm init 명령어를 콘솔에서 호출해 단계적으로 내용물을 입력

  way2) npm init -y를 입력해 파일을 만든 뒤 내용을 수정

+) version이나 description, author, license는 원하는 대로 자유롭게 수정

+) nodemon은 개발용으로만 사용할 것을 권장. 배포 후에는 잘 사용 안 함

 

// package.json

{
  "name": "learn-express",
  "version": "0.0.1",
  "description": "익스프레스를 배우자",
  "main": "app.js",
  "scripts": {
    "start": "nodemon app"      // start 속성은 잊지 말기!
  //  nodemon app을 하면 app.js를 nodemon으로 실행한다 =  nodemon 모듈로 서버를 자동으로 재시작

  },
  "author": "ZeroCho",
  "license": "MIT"
}

 

 

 

 

아래는 서버 역할을 할 파일

+) 익스프레스 내부에 http 모듈이 내장되어 있으므로 서버의 역할 가능

+) GET 요청 외에도 POST, PUT, PATCH, DELETE, OPTIONS에 대한 라우터를 위한 app.post, app.put, app.patch. app.delete, app.options 메서드가 존재

 

// app.js

const express = require('express');

const app = express();
// Express 모듈을 실행해 app 변수에 할당

app.set('port', process.env.PORT || 3000);
// 서버가 실행될 포트를 설정. 객체에 PORT 속성O -> 그 값을 사용하고/ X -> 기본값으로 3000번 포트

app.get('/', (req, res) => {
//주소에 대한 GET 요청이 올 때, 

  res.send('Hello, Express');
// 응답으로 Hello, Express를 전송

});

app.listen(app.get('port'), () => {
  console.log(app.get('port'), '번 포트에서 대기 중');
});

 

 

$ npm start 

 

위의 명령어를 통해서 서버를 실행, 로컬 호스트 접속 시 Hello, Express 가 출력된 것을 확인할 수 있다.

 

 

문자열 아닌 HTML으로 응답을 원할 경우, 해당 html파일 생성과 res.sendFile 메서드 사용

이를 위해서 app.js 파일 수정

//  app.js

const express = require('express');
const path = require('path');

const app = express();
app.set('port', process.env.PORT || 3000);
app.get('/', (req, res) => {
  // res.send('Hello, Express');
  res.sendFile(path.join(__dirname, '/index.html'));
});

app.listen(app.get('port'), () => {
  console.log(app.get('port'), '번 포트에서 대기 중');
});

 

 

 

 

6.2. 자주 사용하는 미들웨어

 

 

미들웨어

: 익스프레스의 핵심

: 요청과 응답의 중간(middle)에 위치

: 라우터와 에러 핸들러 등이 있다.

: 요청과 응답을 조작해 기능을 추가, 나쁜 요청 제거

: app.use(미들웨어) 형식으로 많이 사용

: 위에서부터 아래로 순서대로 실행

: app.use나 app.get 같은 라우터에 미들웨어를 여러 개 장착 가능

 

 

아래는 익스프레스에 미들 웨어 연결 사례

* 주소를 첫 번째 인수로 X -> 미들웨어는 모든 요청에서 실행되고,

* 주소 O -> 해당하는 요청에서만 실행

// app.js

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

app.use((req, res, next) => {
  console.log('모든 요청에 다 실행됩니다.');
  next();
});
app.get('/', (req, res, next) => {
// app.use에 매개변수가 req, res, next인 함수 넣기
// next -> 다음 미들웨어로 넘어가는 함수

  console.log('GET / 요청에서만 실행됩니다.');
  next();
}, (req, res) => {
  throw new Error('에러는 에러 처리 미들웨어로 갑니다.')
// 아래 미들웨어 에러로 발생
});

app.use((err, req, res, next) => {
  console.error(err);
  res.status(500).send(err.message);
});

app.listen(app.get('port'), () => {
...

 

 

아래의 표를 통한 구체적  미들웨어 사용 방법 확인

 

 

 

 

 

 

 

 

 

---

Node.js #2 

Editor : 라마