<div id="readability-page-1" class="page"><div itemprop="articleBody">
 

 

 

 <img src="https://user-images.githubusercontent.com/33862991/127993456-ce25700e-7c59-41cc-8203-045766e62915.jpg" alt="Emma Ou from Unsplash">
<a target="_blank" rel="noopener" href="https://expressjs.com/ko/">Express 공식문서</a>와 블로깅을 하면서 간단한 CRUD REST API를 생성해보았다.
<h3 id="Toc"><a href="#Toc" title="Toc"></a>Toc</h3><ul>
<li><a href="#install">Install Express</a>
</li>
<li><a href="#create">Create project</a>
</li>
<li><a href="#crud">Create crud api</a>
<ul>
<li><a href="#refactor">Refactor minor</a>
</li>
<li><a href="#get-api">GET - 전체 참가국 조회 API</a>
</li>
<li><a href="#get-api2">GET - 단일 참가국 조회 API</a>
</li>
<li><a href="#post-api">POST - 참가국 등록 API</a>
</li>
<li><a href="#put-api">PUT - 참가국 국가명 API</a>
</li>
<li><a href="#delete-api">DELETE - 참가국 국가 삭제 API</a>
</li>
</ul>
</li>
</ul>
<hr>
<h2 id="Install-Express"><a href="#Install-Express" title="Install Express"></a><a name="install">Install Express</a></h2><figure><table><tbody><tr><td><pre>1 </pre></td><td><pre>npm i -g express </pre></td></tr></tbody></table></figure>

<ul>
<li><code>i</code> : install</li>
<li><code>-g</code> : global, 전역에서 사용할 수 있도록 설치한다는 의미</li>
</ul>
<h2 id="Create-project"><a href="#Create-project" title="Create project"></a><a name="create">Create project</a></h2><figure><table><tbody><tr><td><pre>1 </pre></td><td><pre>express PROJECT_NAME --view=pug </pre></td></tr></tbody></table></figure>

<h2 id="run-project"><a href="#run-project" title="run project"></a>run project</h2><figure><table><tbody><tr><td><pre>1 </pre></td><td><pre>node /bin/www </pre></td></tr></tbody></table></figure>

<code>www</code> 파일엔 <code>http</code> 모듈을 불러와서 서버를 생성하는 코드가 담겨있다. 여기서 포트번호를 바꿀수도 있다.
<h2 id="Create-CRUD-API"><a href="#Create-CRUD-API" title="Create CRUD API"></a><a name="crud">Create CRUD API</a></h2>CRUD를 하는 아주 간단한 REST API를 만들어본다.
express 프로젝트를 막 생성했다면, 프로젝트 디렉토리에 <code>/routes</code> 디렉토리가 있을것이고, 이 안에 <code>index.js</code>와 <code>users.js</code>가 있다.
users.js에 user 관련 라우터들이 포함되어 있다.
<blockquote>
node.js에서 라우팅이란 URI나 HTTP 요청 메소드의 엔드 포인트에 대한 클라이언트 요청에 웹 애플리케이션이 응답하는 방법이라고 한다.
출처 : expressjs - 기본 라우팅
</blockquote>
스프링부트를 사용할때 컨트롤러(Controller)라고 했던 개념이 Node.js에서는 라우터(Router)라고 표현하는 것 같다.
<h2 id="Refactor-minor"><a href="#Refactor-minor" title="Refactor minor"></a><a name="refactor">Refactor minor</a></h2>먼저 CRUD 대상 객체를 만들어보자.
이 글을 작성하는 시점에 2020 도쿄 올림픽이 진행중이니 올림픽에 참가중인 국가 이름을 담은 배열을 선언해보겠다. <code>users.js</code> 파일 상단에 배열을 생성해두자.
<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 7 8 9 10 </pre></td><td><pre>const express = require('express'); const router = express.Router(); let participants = [ { id: 1, nation: 'Republic of Korea'}, { id: 2, nation: 'United States'}, { id: 3, nation: 'Great Britain'}, { id: 4, nation: 'Canada'}, { id: 5, nation: 'Japan'} ] </pre></td></tr></tbody></table></figure>

자 근데 배열을 만들고 보니 <code>/user</code> 라는 URI와 파일명이 어울리지 않게되었다. 여기서부터 천천히 리팩토링(?)을 시작해보자.
먼저 파일명을 수정하자.
<img src="https://user-images.githubusercontent.com/33862991/127974808-b4a1437b-4a6c-457c-95e9-255d1301641b.png">
파일명을 수정했다면, 이제 URI도 수정할 차례이다. URI는 <code>app.js</code> 에서 수정하면 된다.
<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 7 </pre></td><td><pre>... var indexRouter = require('./routes/index'); var nationRouter = require('./routes/participants'); var app = express(); ... app.use('/', indexRouter); app.use('/participants', nationRouter); </pre></td></tr></tbody></table></figure>

이렇게 하면 라우터의 요청 URI까지 수정이 되었다.
이제 만들어야 할 라우터는 5개이다.
<ul>
<li>전체 참가국 조회 라우터</li>
<li>단일 참가국 조회 라우터</li>
<li>참가국 등록 라우터</li>
<li>참가국 국가명 수정 라우터</li>
<li>참가국 국가 삭제 라우터</li>
</ul>
<h2 id="GET-전체-참가국-조회-API"><a href="#GET-전체-참가국-조회-API" title="GET - 전체 참가국 조회 API"></a><a name="get-api">GET - 전체 참가국 조회 API</a></h2>전체 참가국 조회 라우터는 따로 생성하지 않아도 이미 users.js에서부터 존재하고 있다. 함수 내 변수명만 수정해주면 된다.
HTTP 메소드 : GET
요청 URI : <code>/participants</code>
Query String : 
Request 객체에 포함된 파라미터 : 
<figure><table><tbody><tr><td><pre>1 2 3 4 </pre></td><td><pre> router.get('/', (req, res, next) =&gt; { res.json(participants) }); </pre></td></tr></tbody></table></figure>

participant의 기본 요청 URI가 <code>/participant</code>므로 <code>/participant</code> 로 요청을 하면, 응답객체(res)에 <code>participants</code>라는 객체를 담아서 json 타입으로 응답한다는 코드이다.
여기서 <code>participants</code>는 우리가 가장 먼저 작성한 배열 객체이다.
Postman 요청 결과
<img src="https://user-images.githubusercontent.com/33862991/127980723-914be3c3-c993-4dc3-885a-ec53bc19d04a.png" alt="GET API">
여기서 잠깐.
응답을 보낼때 사용하는 <code>json()</code>는 content-type 헤더를 application/json으로 고정해서 객체 타입을 json형식으로 바꿔주는 역할을 해준다. 그런데 결국 반환을 하기 위해 마지막에 send()를 호출한다.
어차피 json으로 요청, 응답하는 REST API를 만들것이므로 큰 상관은 없지만 알아둬야 할 것 같다.
<ul>
<li>출처 : <a target="_blank" rel="noopener" href="https://expressjs.com/ko/api.html#res.json">expressjs - res.json(body)</a></li>
</ul>
<h2 id="GET-단일-참가국-조회-API"><a href="#GET-단일-참가국-조회-API" title="GET - 단일 참가국 조회 API"></a><a name="get-api2">GET - 단일 참가국 조회 API</a></h2>이번엔 URI에 id를 요청하면 해당 id의 객체를 반환해서 응답하는 API이다.
HTTP 메소드 : GET
요청 URI : <code>/participants/{id}</code>
Query String : id
Request 객체에 포함된 파라미터 : 
<figure><table><tbody><tr><td><pre>1 2 3 4 5 </pre></td><td><pre> router.get('/:id', (req, res, next) =&gt; { const participant = participants.find(p =&gt; p.id === parseInt(req.params.id)); res.json(participant); }); </pre></td></tr></tbody></table></figure>

<code>/participants/{id}</code>로 GET 메소드로 요청이 들어오면, 요청객체(req)에 담긴 id를 가져와서 <code>participants</code> 배열 객체에서 해당 id에 일치하는 객체를 찾아서 이를 응답객체(res)로 반환하는 코드이다.
Postman 요청 결과
<img src="https://user-images.githubusercontent.com/33862991/127992581-785bb584-baae-48e2-b91d-1aa20a01372c.png" alt="GET API">
<h2 id="POST-참가국-등록-API"><a href="#POST-참가국-등록-API" title="POST - 참가국 등록 API"></a><a name="post-api">POST - 참가국 등록 API</a></h2>요청객체에 객체를 담아 POST 메소드를 요청하는 API이다.
HTTP 메소드 : POST
요청 URI : <code>/participants</code>
Query String : 
Request 객체에 포함된 파라미터 : object { nation }
<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 7 8 9 </pre></td><td><pre> router.post('/', (req, res, next) =&gt; { const participant = { id: participants.length+1, nation: req.body.nation } participants.push(participant); res.json(participant); }); </pre></td></tr></tbody></table></figure>

이번엔 참가국을 등록하는 API이다. POST 메소드를 사용하기 때문에 <code>router.post()</code>로 개발해야 한다.
사실 등록 API는 응답할 필요는 없지만, Post Man에서 제대로 등록이 되었는지 확인하기 위해 응답객체에 <code>participants</code> 객체에 추가된 객체를 담아서 반환하기로 했다.
Postman 요청 결과
<img src="https://user-images.githubusercontent.com/33862991/127980739-3f04ed13-9df9-4ae0-a508-09cfd9d54a1f.png" alt="POST API">
<h2 id="PUT-참가국-국가명-API"><a href="#PUT-참가국-국가명-API" title="PUT - 참가국 국가명 API"></a><a name="put-api">PUT - 참가국 국가명 API</a></h2>이번엔 존재하는 객체를 PUT 메소드로 요청하여 수정하는 API이다.
HTTP 메소드 : POST
요청 URI : <code>/participants/{id}</code>
Query String : id
Request 객체에 포함된 파라미터 : object { nation }
<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 7 8 9 10 </pre></td><td><pre> router.put('/:id', (req, res, next) =&gt; { const participant = participants.find(p =&gt; p.id === parseInt(req.params.id)); if(!participant) { return res.status(404).send('ID was not found.'); } participant.nation = req.body.nation; res.json(participant); console.log("participants : "+participants); }); </pre></td></tr></tbody></table></figure>

QueryString으로 들어온 id값으로 배열 객체에서 조회후, 존재하지 않는다면(<code>undefined</code>) 응답객체에 상태코드 <code>404</code>와 함께 <code>'ID was not found'</code>라는 문구를 보낸다.
그리고 early return 되지 않았다면, <code>participant</code>가 존재하므로 다음 로직이 동작한다. 응답객체의 Body에서 <code>nation</code>을 가져와서 배열에서 <code>id</code>값으로 찾은 객체의 <code>nation</code>에 덮어씌운다. 그리고 응답객체에 새 <code>participant</code>를 json 타입으로 보내고 콘솔에도 log를 남기는 코드이다.
Postman 요청 결과
<img src="https://user-images.githubusercontent.com/33862991/127980743-d3619df3-24b2-4bea-9d3b-5a912c30e2c8.png" alt="PUT API">
<h2 id="DELETE-참가국-국가-삭제-API"><a href="#DELETE-참가국-국가-삭제-API" title="DELETE - 참가국 국가 삭제 API"></a><a name="delete-api">DELETE - 참가국 국가 삭제 API</a></h2>HTTP 메소드 : POST
요청 URI : <code>/participants/{id}</code>
Query String : id
Request 객체에 포함된 파라미터 : 
<figure><table><tbody><tr><td><pre>1 2 3 4 5 6 7 8 9 10 </pre></td><td><pre> router.delete('/:id', (req, res, next) =&gt; { const participant = participants.find(p =&gt; p.id === parseInt(req.params.id)); if(!participant) { return res.status(404).send('ID was not found.'); } const index = participants.indexOf(participant); participants.splice(index, 1); res.json('deleted!'); }); </pre></td></tr></tbody></table></figure>

PUT 요청 API와 마찬가지로 id값으로 객체가 존재하는지 여부를 확인후, 존재하지 않으면 상태코드 <code>404</code>를 반환하고, 객체가 존재하면 해당 객체를 배열에서 제거하고 제거되었음을 알리는 문자열(<code>deleted!</code>)을 반환했다.
Postman 요청 결과
<img src="https://user-images.githubusercontent.com/33862991/127980747-33cd282e-523d-4644-a884-477008f9d749.png" alt="DELETE API">
<hr>
<h3 id="Reference"><a href="#Reference" title="Reference"></a>Reference</h3><ul>
<li><a target="_blank" rel="noopener" href="https://expressjs.com/ko/starter/hello-world.html">expressjs - Hello World 예제</a></li>
<li><a target="_blank" rel="noopener" href="https://expressjs.com/ko/starter/basic-routing.html">expressjs - 기본 라우팅</a></li>
<li><a target="_blank" rel="noopener" href="https://expressjs.com/ko/api.html#res.json">expressjs - res.json()</a></li>
<li><a target="_blank" rel="noopener" href="https://ing-yeo.net/2020/02/study-nodejs-create-simple-restful-api-server/">ING-YEO - 노알못 Node.js 정리 : 초간단 RESTful API 서버 만들기</a></li>
</ul>

 </div></div>

Express로 만드는 CRUD Rest Api

댓글