개요

Node.js와 express를 사용하여 간단한 정보를 제공하는 WebAPI를 만드는 단계를 설명합니다.

환경

Windows 10
Node.js v8.9.1npm 5.5.1익스프레스 4.16.0express-generator
Google 크롬 71.0.3578.98Visual Studio Code

간단한 WebAPI를 만드는 단계

준비

설치

Node.js 설치

npm 설치

express 설치

express-generator 설치 (express 명령 사용)

npm init

WebAPI 소스를 저장하는 폴더를 만들고 명령 프롬프트에서 해당 폴더로 이동하여 다음 명령을 실행합니다.
여러가지 들리지만 아무것도 변경하지 않고 Enter 키를 눌러 진행한다.

$ npm init

GET 응답으로 Hello World 보기

코드

index.js

// expressフレームワーク
const express = require('express');
const app = express();

// ルート設定
app.get('/', (req, res) => res.send('Hello World'));

// イベント待機
app.listen(3000, () => console.log('Listening on port 3000'));

실행 결과

명령 프롬프트에서 다음 명령을 실행하여 Node 서버를 시작합니다.

$ node index.js

웹 브라우저를 시작하고 http://localhost:3000으로 이동합니다. "Hello World"라는 문자가 표시되는지 확인합니다.

무슨 일이 일어나고 있는지

웹 브라우저가 노드 서버에 GET 메서드에 대한 HTTP 요청을 보내기

Node 서버는 받은 GET 메소드의 HTTP 요청에 대해 'Hello World'라는 문자열을 HTTP 응답으로 반환합니다

웹 브라우저는 받은 HTTP 응답을 그립니다

GET 응답으로 JSON 반환

위의 Hello World에서는 문자를 반환했지만 WebAPI가 제공하는 정보는 JSON 형식으로되어있는 것이 대부분이라고 생각하기 때문에 다음은 JSON 형식의 데이터를 WebAPI가 반환하도록 index.js를 개선하고 봐.

"ppap"이라는 WebAPI를 작성해, 이 WebAPI에 GET 메소드로 HTTP 리퀘스트를 보내면(자) HTTP 응답으로 ppap의 내용(ppap로 사용하는 물건과 그 순서)을 포함한 JSON 형식으로 돌려준다.

코드

index.js

// expressフレームワーク
const express = require('express');
const app = express();

// ルート設定
app.get('/', (req, res) => res.send('Hello World'));

// api-ppapの設定
app.get('/api/v1/ppap', (req, res) =>{
    const ppap = [
        { object:'pen', order:1 },
        { object:'pineapple', order:2 },
        { object:'apple', order:3 },
        { object:'pen', order:4 }
    ];
    res.json(ppap);
});

// イベント待機
app.listen(3000, () => console.log('Listening on port 3000'));

실행 결과

Ctrl+C에서 노드 서버를 한 번 중지하고 다음 명령으로 노드 서버를 다시 시작하십시오.

$ node index.js

웹 브라우저를 시작하고 http://localhost:3000/api/v1/ppap으로 이동합니다.
ppap에서 사용하는 순서와 순서가 JSON 형식의 문자열로 표시되는지 확인합니다.　 1

GET 이외의 방법

이번은 HTTP의 GET 메소드를 대상으로 WebAPI로부터 정보를 제공하는 방법을 해설했지만, GET 메소드 이외에도 HTTP 통신에는 이하의 메소드가 있다.


방법
사용할 장면


GET
데이터 검색

POST
데이터 등록

PUT
데이터 업데이트

DELETE
데이터 삭제


WebAPI를 이용해 데이터의 취득 뿐만이 아니라, 데이터의 등록·갱신·삭제까지 실시하고 싶은 경우는, 이러한 메소드를 구분할 필요가 있다.



WebAPI의 URL은 ルートURL/api/バージョン/api名로 하는 것이 일반적인 것 같다 ↩