Express.js

Express.js 

- HTTP 모듈을 사용해서 서버를 만들 수도 있지만
- 익스프레스에는 HTTP 모듈의 기능 외에도 다양한 기능이 포함되어 있음

 

Express.js 시작하기

 

npm init // 초기화
npm i express // Express 시작하기

 

nodemon 패키지 설치하기

 

서버 코드를 수정했을 경우에, 기존의 실행하던 서버를 멈추고, 다시 실행 해야만 수정이 됨. 이 때 nodemon 패키지를 설치하면 기존의 실행하던 서버를 멈추지 않아도 수정된 내용을 바로 적용할 수 있다. 

 

npm i nodemon --save-dev -g
// 개발하는 동안에만 사용하고, 코드를 배포할 때는 사용X
// global 한번 설치함으로서 시스템에 있는 다른 곳에서도 자유롭게 사용 가능

 

package.json에 아래와 같이 표기가 되는데 이를 보면 express는 dependencies에 포함이 되었지만, nodemon은 포함되지 않았다. 이는 nodemon이 앱 코드 자체에는 영향을 주지 않는다는 뜻이다. 

 

"author": "",
"license": "ISC",
"dependencies":
    { "express": "^4.18.2" }

 

서버 파일은 app.js에 만들면 된다. 

먼저 express 모듈을 가지고 와서 express 변수에 할당하자. 

 

const express = require("express");
const app = express();

// 라우팅
// 서버 이름 뒤에 요청 방식과 함께 요청 경로를 지정하고, 어떤 걸 실행할지는 콜백 함수 형태로 제공

app.get("/", (req, res) => {
    res.send('Hello, Node!');
});

app.listen(3000, () => {
    console.log('서버 실행 중');
});

 

HTTP 모듈에서는 if, else if을 사용해서 경로와 요청 방식을 일일이 체크 해줬어야 했다면 Express 서버에서는 요청 방식을 함수 이름으로 사용한다. 

 

nodemon으로 실행

$nodemon app

 

Express.js

 

Post는 사용자가 지정한 정보를 서버로 보낸다. 보통은 폼을 이용해서 사용자가 값을 입력하게 함. 

 

const express = require("express");
const app = express();

// 라우팅
// 서버 이름 뒤에 요청 방식과 함께 요청 경로를 지정하고, 어떤 걸 실행할지는 콜백 함수 형태로 제공

app.get("/", (req, res) => {
    res.send('Hello, Node!');
});

// post, put, delete
app.post("/contacts", (req, res) => {
    res.send("Create Contacts");
});

app.listen(3000, () => {
    console.log('서버 실행 중');
});

 

Thunder client

 

vscode에서 제공하는 postman 같은 확장 

 

위 사진과 같이 Post 방식을 확인해 보면 Create Contacts가 뜨며 정상적으로 작동하는 것을 볼 수 있다. 

 

만약 특정 조건의 입력값만 가지고 오고 싶다면? 라우트 파라미터 사용하기! 

 

라우트 파라미터

 

• 특정 조건을 지정할 때 라우팅 코드에서 요청 URL 뒤에 :를 붙인 후 그 뒤에 변수 작성
  /요청 URL/:id
• 요청 할 때는 요청 URL 뒤에 조건 값 지정
  예) 연락처 정보 중에서 아이디가 '1'인 것을 가져오려면
  /contacts/1

요청 방식	요청 URL	역할
GET	/contacts/:id	id에 맞는 연락처 가져오기
PUT	/contacts/:id	id에 맞는 연락처 수정하기
DELETE	/contacts/:id	id에 맞는 연락처 삭제하기

 

// 연락처 가져오기
app.get("/contacts", (req, res) => {
    res.send("Contacts Page");
});

// 연락처 1개 가져오기
app.get("/contacts/:id", (req, res) => {
    res.send(`View Contact for ID : ${req.params.id}`);
    // 이 아이디 값을 담고 있는 건 req.params.id(request에서 parameter가 담겨 있는 객체 중에서 id 값)
    //req.params는 Express에서 경로 파라미터(Route Parameters)를 담고 있는 객체
});

// 새 연락처 추가하기
app.post("/contacts", (req, res) => {
    res.send("Create Contacts");
});

// 연락처 수정하기
app.put("/contacts/:id", (req, res) => {
    res.send(`Update Contact for ID : ${req.params.id}`);
});

// 연락처 삭제하기
app.delete("/contacts/:id", (req, res) => {
    res.send(`Delete Contact for ID : ${req.params.id}`);
});

 

 

Thunder client 에서 post 방식을 보면 위와 같이 새 연락처 추가하기가 나온다. 

 

 

id값 10을 붙히고 get 방식으로 보면 req.params.id에 저장 되어 있는 10이 보인다. 

 

익스프레스 요청 객체의 속성

 

속성	설명
req.body	서버로 POST 요청할 때 넘겨준 정보를 담고 있습니다. 예를 들어 로그인 버튼을 눌렀을 때 사용자의 아이디와 비밀번호의 값이 req.body에 들어 있습니다.
req.cookies	클라이언트에 저장된 쿠키 정보를 서버로 넘겨줄 경우 쿠키 정보를 담고 있습니다.
req.headers	서버로 요청을 보낼 때 함께 보낸 헤더 정보를 담고 있습니다.
req.params	URL 뒤에 추가한 파라미터가 포함되어 있을 경우 파라미터 정보를 담고 있습니다.
req.query	요청 URL에 포함된 질의 매개변수(?key=value 형태)를 담고 있습니다. 예를 들어 검색 사이트에서 검색어를 입력하고 검색 버튼을 클릭했을 때 검색어와 관련된 질의 매개변수가 req.query에 담깁니다.

 

ex) GET 요청의 요청 헤더 확인하려면

 

app.get("/", (req, res) => {
    const headers = req.headers;
    res.send(headers);
});

 

익스프레스 응답 객체의 함수

함수	설명
res.download	파일을 내려받습니다.
res.end	응답 프로세스를 종료합니다.
res.json	JSON 응답을 전송합니다.
res.jsonp	JSONP 지원을 통해 JSON 응답을 전송합니다.
res.redirect	요청 경로를 재지정해서 강제 이동합니다.
res.render	뷰 템플릿을 화면에 렌더링합니다. (10-2장에서 설명합니다.)
res.send	어떤 유형이든 res.send() 괄호 안에 내용을 전송합니다.
res.sendFile	지정한 경로의 파일을 읽어서 내용을 전송합니다.
res.sendStatus	상태 메시지와 함께 HTTP 상태 코드를 전송합니다.
res.status	응답의 상태 코드를 설정합니다.