GET / POST로 데이터 전송하기 (실습)

HTTP서버는 미리 생성해놨으며, HTTP 통신으로 데이터를 송수신하는 API를 구현해볼 것이다.

 

• 서버는 경로와 HTTP 메서드에 따라 작업의 분기 처리가 가능하다.
• GET /api 요청을 보내면 /api 경로에 대한 GET 작업을 처리한다.
• POST /api는 같은 경로에 대해 POST작업을 처리한다
• 처리 경로를 선택하는 과정을 routing(라우팅)이라고 한다

---

//routes/api.js

const express = require("express");
const router = express.Router();

router.get("/", (req, res) => {
    res.send({ message: "Hello" });
});

module.exports = router;

1. Express를 불러온 뒤 라우팅용 객체를 생성하고 GET 메서드로 요청을 받았을 때의 처리를 정의한다.
2. 여기서는 단순한 JSON 데이터를 반환하도록 한다.
3. 마지막으로 다른 파일에서도 라우팅용 객체를 불러올 수 있도록 exports를 선언한다

---

//routes/sercer.js

const express = require("express");
const api = require("./routes/api");  // 추가

const app = express();

1. api.js를 생성한 후 server.js에서api.js를 불러온다.
2. 여기서는 변수명으로 'api'를 사용한다.
3. server.js에서 api.js를 불러오는 코드르르 Express를 불러오는 코드 뒤에 추가

---

// /api경로와 라우팅 객체를 연결 (server.js)

app.use(express.static("public"));

app.use("/api", api);  //추가
app.get("/", (req, res, next)=> {

• 불러온 라우팅 객체를  /api 경로에 연결하는 코드를 server.js에 추가한다

---

1. 서버를 껐다가 다시 연결하고 브라우저에서 /api로 이동하면 사진과 같이 JSON 문자열이 표시된다
2. 이러면 정상적으로 동작하는 것으로 볼 수 있다.\

---

//브라우저 콘솔

const response = await fetch("http://localhost:3000/api/");
await response.json();

/api에 접속하고 개발자 도구 > 콘솔로 이동해서 위 코드를 입력한다

fetch 함수로 /api 경로에 요청을 보낸다

response.json()을 실행해 응답값에서 JSON 데이터를 가져오면 'Hello'가 출력된다

---

//routes/api.js
// 1~6라인 추가

1 router.use(express.json());
2 router.post("/", (req, res) => {
3     const body = req.body;
4     console.log(body);
5     res.end()
6 })
7 
8 module.exports = router;

1.  브라우저에서 전송하기 위한 POST 메서드의 라우팅 처리를 api.js에 추가해본다
2. 앞의 GET 메서드 처리에 이어서 다음 코드를 추가한다.
3. 첫 줄은 브라우저에서JSON 데이터를 가져오기 위한 설정이다. req.body에는 요청하는 리퀘스트의 바디를 보관한다
4. 실제 웹 애플리케이션에서는 리퀘스트 바디의 데이터를 DB에 등록하거나 리소스 생성에 사용한다. 하지만 여기서는 가져온 리퀘스트 바디를 console.log로 터미널에 표시만 할 것이다

---

//콘솔

await fetch("http://localhost:3000/api/", {
    method: "POST",
    body: JSON.stringify({ message: "안녕하세요" }), 
    headers: { "Content-type": "application/json" }
});

1. 서버의 POST 메서드 처리 작업이 끝났고 fetch 함수를 사용해서 API에 POST 요청을 해본다.
2. HTTP서버를 재시작하고 브라우저에서 3000/api에 접속한다. 
3. 콘솔 창을 열고 위 코드를 입력해 실행하준다. HTTP 헤더에 Content-type:application/json을 지정해 데이터의 형식이 JSON인 것을 서버에 알려준다

---

• 요청이 성공하면 리퀘스트 바디가 Node.js의 실행 중인 터미널에 표시된다