[Express] Express로 웹 서버 만들기 (2) - CRUD

이전 포스팅에서는 간단하게 간단하게 GET 요청을 다루는 웹 서버를 만들어 보았다. 이번 포스팅에서는 CRUD(Create, Read, Update, Delete) 기능을 모두 지원하는 웹 서버를 만들어 보자. GET 요청은 리소스를 읽어 들이므로 Read 기능을 한다. 나머지 기능을 구현하는 방법과 관련 HTTP 메서드에 대해서 지금부터 알아보도록 하자

 

 

 

리소스 업데이트(PUT)

PUT 요청은 기존의 존재하는 리소스를 업데이트하기 위해 사용되는 HTTP 메서드이다. 우리가 저번 포스팅에서 제작한 Express 서버에서 PUT 요청은 할 일 목록의 내용을 수정하는 데 사용될 수 있다. 그런데 할 일의 목록을 수정하기 위해선 어떤 할 일을 수정할 것인지 명시해야 할 필요가 있을 것이다. 즉, 라우트 파라미터로 해당하 할 일을 식별하는 값을 전달해줘야 한다. 이는 query string(쿼리 스트링)을 요청에 포함시킴으로써 가능하다

쿼리 스트링은 요청 URL의 맨 뒤에 오는 것으로 물음표('?') 문자로 시작한다. 예를 들어 URL이 /todos?id=1 와 같다면 여기에서 쿼리 스트링은 id=1이고, path는 /todos이다. Express 서버는 요청으로 들어온 URL에 포함된 쿼리 스트링을 요청 파라미터 오브젝트에 붙여버린다

// req.query
{
  id: 1
}

URL에 포함되는 쿼리 스트링은 key=value 형식으로 구성되며, '&' 문자를 덧붙여서 추가 파라미터를 설정할 수 있다. 우리가 만든 서버에서 다음과 같은 PUT 요청 라우트를 추가해보자. PUT 요청은 .put() 메서드를 사용하여 처리할 수 있다. 이전 포스팅에서 만든 서버에 다음 코드를 추가해보자

app.put("/todos/:id", (req, res, next) => {
  // 해당 id 의 할 일 내용을 수정한다
  const new_todo = req.query.new; // 쿼리 스트링으로 들어온 새로운 할 일

  todos[req.params.id] = { id: Number(req.params.id), todo: new_todo }; // id에 해당하는 todo를 새로운 값으로 변경
  res.send(todos[req.params.id]); // 새로 할당된 todo를 전달한다
});

편의상 할 일 배열의 길이를 id로 설정하였다. 리소스를 업데이트시켜줄 때, 많은 서버에서 업데이트시킨 리소스를 클라이언트에게 전달한다. 그리하여 클라이언트가 서버와 데이터베이스와 같은 리소스를 보유하게 만든다. 여기서 todos[req.params.id]를 전달한 것도 같은 이유에서이다

 

 

 

HTTP 메서드로 라우트하기

Express는 HTTP 메서드와 path를 모두 활용하여 들어오는 요청들을 적절하게 라우팅 한다. 이를 도식화한 그림은 다음과 같다

 

<그림 1> HTTP 메서드와 PATH를 활용하여 라우팅 하는 과정(출처: codecademy.com)

 

위 그림에서 요청으로 PUT /expressions/1?name=happy 가 들어왔다. 이는 expressions[1]의 이름을 'happy'로 바꿔달라는 요청일 것이다. Express 서버 내 코드상으로는 PATH는 알맞은 app.get() 라우트가 존재하지만, HTTP 메서드가 달라서 넘어가게 된다. 그 뒤에 나오는 app.put() 라우트는 PATH와 HTTP 메서드 모두 동일하기 때문이 해당 라우트로 요청이 전달된다

 

 

 

리소스 생성(POST)

POST 요청은 새로운 리소스를 생성하기 위해 사용되는 HTTP 메서드이다. POST는 새로운 리소스를 생성하는 것이기 때문에 URL에서 파라미터가 별도로 포함되지는 않는다. 대신 생성하고자 하는 리소스의 타입을 URL의 끝에 명시해야 한다. 예를 들어, 새로운 할 일을 만든다고 했을 때, 일단 요청은 POST /todos 이여야 할 것이다. 다만 클라이언트는 만들어지는 할 일이 서버로부터 전달받기 전 까지는 해당 할 일의 id를 알지 못하기 때문에, URL에 파라미터를 명시할 수 없다

Express는 .post() 를 사용하여 POST 요청을 처리한다. POST 요청은 리소스를 생성하기 위해 쿼리 스트링을 포함하여 다양한 방법으로 데이터를 전달할 수 있다. 우리는 앞에서 배운 쿼리 스트링으로 새로운 할 일을 전달해 보도록 하자. 우리가 만든 서버에 다음과 같은 코드를 추가해보자

let todoId = todos.length;  // todo 인덱스

app.post("/todos", (req, res, next) => {
  todos.push({ id: todoId, todo: req.query.new }); // 새로운 할 일을 todo에 푸쉬
  todoId++; // todo 인덱스 증가
  res.status(201).send(todos[todoId - 1]); // 새로 만들어진 할 일을 전달한다
});

todo의 인덱스로 사용할 변수 todoId를 정의하였다. POST 요청으로 새로운 할 일을 만들게 되면 쿼리 스트링으로 들어온 새 할 일 내용을 todo 배열에 푸시해주고 todoId를 증가시킨다. 그런 뒤 새로 생성된 할 일을 전달하였다. 여기에서 추가로 HTTP 상태 코드를 명시해 주었는데, 새로 생성된 리소스에 대한 응답 코드는 201 이므로 이와 같이 명시해 주었다. 응답의 상태 코드도 직접 설정할 수 있단 걸 주목하자

 

 

 

리소스 삭제(DELETE)

DELETE 요청은 리소스를 삭제하기 위해 사용하는 HTTP 메서드이다. DELETE 라우트는 현재 존재하는 리소스를 삭제하기 때문에, 라우트 파라미터로 어떤 리소스를 삭제할 것인지를 전달해 주어야 한다. Express는 .delete() 메서드로 DELETE 요청을 처리할 수 있다. 다음과 같은 코드를 추가해 보자

app.delete("/todos/:id", (req, res, next) => {
  todos.splice(req.params.id, 1); // 파라미터로 주어진 id 의 할 일을 삭제한다
  res.status(204).send(); // 정상적으로 삭제되었음을 알려준다
});

서버에서 리소스가 정상적으로 삭제되었다면 204 코드를 반환한다. 모든 코드의 작성이 완료되었다면, 테스트를 실시해보자. REST API를 테스트하는 insomnia를 활용하여 테스트해 보도록 하자. Insomnia는 공식홈페이지에서 설치하고 사용 방법에 대해 알아볼 수 있다. 여기서는 자세한 설치 및 사용 방법에 대해서는 설명하지 않고, 다른 포스팅에서 자세하게 다루도록 하겠다

우선 필자는 insomnia를 설치하고 몇 가지 테스트할 수 있는 요청들을 생성하였다. 필자의 insomnia 워크스페이스 화면은 다음과 같다

 

<그림 2> 필자의 insomnia 테스트 환경

 

왼쪽 목록에서 필자가 미리 만들어둔 요청 목록을 확인할 수 있다

 

<그림 3> 필자가 작성한 요청

 

먼저 할 일의 목록을 조회하면 다음과 같다. 필자가 초기 설정한 할 일 목록이다

 

<그림 4> 필자가 초기 설정한 할 일 목록

 

그런 다음, PUT 요청으로 1번 할 일 목록을 다음과 같이 변경해 보았다. 반환되는 결과는 변경된 할 일 내용이다

 

<그림 5> 1번 할 일을 PUT 요청으로 변경한 모습

 

그런 다음, POST 요청으로 새로운 할 일을 생성해 보았다. 반환되는 결과는 새로 생성한 할 일 내용이다

 

<그림 6> POST 요청으로 새로운 할 일을 생성한 모습

 

자, 이제 모든 할 일 목록을 요청해보면 다음과 같다. 1번 할 일을 변경한 것과 새로운 할 일을 생성한 것이 잘 반영되어 있다

 

<그림 7> PUT, POST 요청이 잘 반영된 할 일 목록

 

마지막으로 DELETE 요청으로 1번 할 일을 삭제해보자

 

<그림 8> DELETE 요청으로 1번 할 일을 삭제한 모

 

삭제한 요청에 대한 응답은, 정상적으로 진행되었다면 204로 설정해주었으므로 여기서 204가 반환된 것으로 보아 삭제가 잘 된 것 같다. 자, 이제 최종적인 할 일의 목록은 1번 이 삭제되고 0번과 2번만 남아있을 것이다

 

<그림 9> 최종 할 일 목

예상대로 0번과 2번 할 일만 남아있는 걸 확인할 수 있다

 

 

 

Wrap Up

축하한다! 당신은 이제 CRUD 기능을 모두 지원하는 Express 서버를 제작할 수 있는 방법을 알게 되었다. 이번 포스팅에서 CRUD 기능을 제공하기 위한 HTTP 메서드를 간단하게 살펴보았다(GET, PUT, POST, DELTE). 이제 당신은 할 일뿐만 아니라 CRUD 기능을 필요로 하는 모든 프로젝트의 API를 직접 작성할 수 있을 것이다. 여행 일정 플래너, 도서 관리 시스템, 익명 메시지 앱 등 다양한 토이 프로젝트를 직접 시도해보고, HTTP 요청-응답 사이클과 Express의 더욱 다양한 기능을 공식 홈페이지를 참고하여 익히길 바란다