[node] express 기본기 익히기

express 사용해보기

// 익스프레스 패키지에서 공개하는 것을 가져오기
const express = require('express');

// 함수 외부로 공개(실행된 함수는 하나의 객체를 리턴)
const app = express();

// 첫 번째 파라미터를 통해서 클라이언트가 보낸 리퀘스트를 다룬다
// 두 번째 파라미터는 리스스 객체로 리스폰스를 보낼 수 있다
app.get('/hello', (req, res) => {
  res.send('<h1>hello</h1>');
});

// 포트 번호가 3000에서 실행
app.listen(3000);

클라이언트가 보낸 리퀘스트의 url패스 부분이 /hello라면 위의 코드 함수가 실행되고 이럭식으로 특정 조건이 만족되었을 때 실행하는 함수를 콜백이라고 한다

특정 패스를 대응하는 콜백을 라우트 핸들러(route handler)라고도 한다
route는 서버가 각 리퀘스트의 패스 부분을 보고 알맞은 작업을 수행하는 것을 의미
handler는 그 작업을 담당하는 존재를 의미

localhost:3000/hello 에 접속

API 서버 만들기

정보 조회

members.js 라는 파일은 member들에 대한 정보가 있는 파일이다.

전체 직원 정보 가져오기

// 익스프레스 패키지에서 공개하는 것을 가져오기
const express = require('express');

// members.js 가져오기
const members = require('./members');

// 함수 외부로 공개(실행된 함수는 하나의 객체를 리턴)
const app = express();

// 전체 직원 정보 조회
app.get('/api/members', (req, res) => {
   res.send(members);
});

// 포트 번호가 3000에서 실행
app.listen(3000);

특정 직원 조회

// 익스프레스 패키지에서 공개하는 것을 가져오기
const express = require('express');

// members.js 가져오기
const members = require('./members');

// 함수 외부로 공개(실행된 함수는 하나의 객체를 리턴)
const app = express();

// 전체 직원 정보 조회
app.get('/api/members', (req, res) => {
   res.send(members);
});

// 특정 직원 정보 조회
app.get('/api/members/:id', (req, res) => {
  // id 값 가져오기
  const id = req.params.id;
  const member = members.find((m) => m.id === Number(id));
  if (member) {
    res.send(member);
  } else {
    res.status(404).send({ message: 'There is no such member' });
  }
});

// 포트 번호가 3000에서 실행
app.listen(3000);

:id는 members/ 뒤에 오는 값을 id변수에 대입하라는 뜻이다
이렇게 변하는 값을 담는 부분을 라우트 파라미터(route parameter)라고 부른다

라우터 파라미터는 req객체의 params라고 하는 객체의 프로퍼티로 설정되는데 req.params.id 이런식으로 id 값을 가져올 수 있다

// 둘다 같은 의미의 코드이다
const id = req.params.id;
const { id } = req.params;

특정 팀만 조회

특정 팀에 속한 사람만 정보를 URL의 쿼리를 이용하여 조회해 보자

쿼리는 서버에 있는 데이터를 조회할 때 기준을 정하기 위해 사용한다

// 익스프레스 패키지에서 공개하는 것을 가져오기
const express = require('express');

// members.js 가져오기
const members = require('./members');

// 함수 외부로 공개(실행된 함수는 하나의 객체를 리턴)
const app = express();

// 전체 직원 정보 조회, 만약 쿼리가 존재하면 특정 팀만 조회
app.get('/api/members', (req, res) => {
  const { team } = req.query;
  if (team) {
    const teamMembers = members.filter((m) => m.team === team);
    res.send(teamMembers);
  } else {
    res.send(members);
  }
});

// 특정 직원 정보 조회
app.get('/api/members/:id', (req, res) => {
  // id 값 가져오기
  const id = req.params.id;
  const member = members.find((m) => m.id === Number(id));
  if (member) {
    res.send(member);
  } else {
    res.status(404).send({ message: 'There is no such member' });
  }
});

// 포트 번호가 3000에서 실행
app.listen(3000);

POST 리퀘스트 보내는 방법

vscode에서 REST Clinet를 설치해 준다.

app.js가 있는 위치에 임시로 test.http 파일을 만들고

GET http://localhost:3000/api/members

사진과 같이 입력하면 결과가 같이 나온다

POST http://localhost:3000/api/members
Content-Type: application/json

{
    "id": 11,
    "name": "som",
    "team": "engineering",
    "position": "Server Developer",
    "emailAddress": "alex@google.com",
    "phoneNumber": "010-xx11-xxxx",
    "admissionDate": "2018/12/10",
    "birthday": "1994/11/08",
    "profileImage": "profile11.png"
}

은 각각의 리퀘스트를 구분하기 위해 쓰는 표시이다.

// 익스프레스 패키지에서 공개하는 것을 가져오기
const express = require('express');

// members.js 가져오기
const members = require('./members');

// 함수 외부로 공개(실행된 함수는 하나의 객체를 리턴)
const app = express();

app.use(express.json());

// 전체 직원 정보 조회, 만약 쿼리가 존재하면 특정 팀만 조회
app.get('/api/members', (req, res) => {
  const { team } = req.query;
  if (team) {
    const teamMembers = members.filter((m) => m.team === team);
    res.send(teamMembers);
  } else {
    res.send(members);
  }
});

// 특정 직원 정보 조회
app.get('/api/members/:id', (req, res) => {
  // id 값 가져오기
  const id = req.params.id;
  const member = members.find((m) => m.id === Number(id));
  if (member) {
    res.send(member);
  } else {
    res.status(404).send({ message: 'There is no such member' });
  }
});

app.post('/api/members', (req, res) => {
  // 바디 가져오기
  const newMember = req.body;
  // 직원 정보 배열에 추가
  members.push(newMember);
  res.send(newMember);
});

// 포트 번호가 3000에서 실행
app.listen(3000);

app.use(express.json());를 쓰지 않으면 POST를 보낼 떄 서버에서 바디를 읽을 수가 없다.
서버로 온 리퀘스트의 바디에 JSON 데이터가 존재할 경우에 리퀘스트 바디의 body 프로퍼티의 값으로 설정해 준다.

이렇게 리퀘스트가 라우트 핸들러에 의해 처리되기 전에 추가적으로 필요한 전처리를 수행하는 함수를 익스프레스에선 미들웨어라고 한다

잘 저장되었는지 확인해 보자

정보 수정하기

app.put('/api/members/:id', (req, res) => {
  const { id } = req.params;
  // 새로운 바디 정보 저장
  const newInfo = req.body;
  const member = members.find((m) => m.id === Number(id));
  // 해당 맴버가 있으면 수정
  if (member) {
    // newInfo 객체의 모든 프로퍼티를 순회하면서 각각의 프로퍼티 값을 member 객체의 같은 이름을 가진 프로퍼티의 값으로 대입
    Object.keys(newInfo).forEach((prop) => {
      member[prop] = newInfo[prop];
    });
    res.send(member)
  } else {
    res.status(404).send({ message: "There is no Member" });
  }
});

Object.keys를 사용하면 특정 객체의 모든 프로퍼티를 조회 가능하다

이 1번 맴버의 이름을 somsom으로 바꿔보자

test.http

PUT http://localhost:3000/api/members/1
Content-Type: application/json

{
    "id": 1,
    "name": "somsom",
    "team": "engineering",
    "position": "Server Developer",
    "emailAddress": "alex@google.com",
    "phoneNumber": "010-xxxx-xxxx",
    "admissionDate": "2018/12/10",
    "birthday": "1994/11/08",
    "profileImage": "profile1.png"
}

사진을 보면 잘 바뀌었다.

삭제하기

let members = require('./members');

app.delete('/api/members/:id', (req, res) => {
  const { id } = req.params;
  const membersCount = members.length;
  // 배열에서 id값과 일치하지 않은 값을 새로운 배열로 만든다
  members = members.filter((member) => member.id !== Number(id));
  if (members.length < membersCount) {
    res.send({ message: 'Deleted' });
  } else {
    res.status(404).send({ message: 'Threr is no member' });
  }
});

const members를 let 으로 수정

test.http

###
DELETE http://localhost:3000/api/members/1

코드 실행 결과 잘 삭제된 모습을 볼 수 있다.

참고
코드잇