1-13 Request와 Response

 

1. Request, Response란 뭘까?

 

Request란 클라이언트가 서버에게 전달하려는 정보나 메시지를 담은 객체를 의미합니다.

Request 세부 사항에는 URL, Http method, 헤더(Header),

쿼리 파라미더(query parameter),  바디 데이터(body data)등이 포함됩니다.

 

Response란 서버에서 클라이언트로 응답 메시지를 전송 시켜주는 객체입니다.

Response의 세부 사항에는 상태 코드(Status Code), 응답 데이터(Response Data),

응답 헤더(Respones Header) 등이 포함됩니다.

 

2. 서버 모듈

 

- Node.js의 서버 모듈에는 대표적으로 http 모듈과 Express.js가 존재합니다.

   → 여기서, http 모듈은 Node.js에서 기본 제공하는 Http 서버 모듈입니다.

 

- Express.js는 http 모듈을 확장하여 제공합니다.

 

- Express.js는 기존 http 모듈의 메서드도 사용할 수 있지만,

  Express.js가 추가 제공하는 메서드나 속성들을 사용할 수 있습니다.

 

- 최근에는 Express.js의 메서드가 더욱 편리하기에 기존 http 모듈의 메서드는 잘 사용되고 있지 않습니다.

 

3. Express.js의 흐름 파악하기

 

Express.js 통신 흐름

 

1. 클라이언트는 특정 URL과 데이터를 담은 요청(Request)을 서버에 전송합니다.

2. 서버는 받은 데이터에 따라 필요한 비즈니스 로직을 수행합니다.

3. 서버는 처리된 결과를 클라이언트에게 응답(Response)으로 보내줍니다.

 

4. API 구현하기

 

 rotues/news.js 파일을 생성한 후 진행

 

- index.js

//routes/goods.js

import express from "express";

const router = express.Router();

// Express.js의 라우터를 생성합니다.

// localhost:3000/api/ GET

router.get("/", (req, res) => {

  // "/"는 기본 url이 입력 되면

  // 아래의 로직을 실행시키겠다는 의미 입니다.

  res.json("default url for goods.js GET Method");

});

// localhost:3000/api/about GET

router.get("/about", (req, res) => {

  res.json("goods.js about PATH");

});

export default router;

// 작성한 Router를 외부에서 사용하기 위해

// 내보내줍니다.

 

 

- routes/news.js

// routes/news.js

import express from "express";

const router = express.Router();

/* 뉴스 목록 조회 API */

// 3 HTTP, Method와 URL을 지정한 API를 정의합니다.

// 만약, localhost:3000/api/news 라는 URL로 GET 요청이 들어온다면 해당 코드를 실행합니다.

router.get("/news", (req, res) => {

  // 4. 사용자의 요청에 맞는 데이터를 반환합니다.

  return res

    .status(200) // API의 상태 코드를 200번으로 전달

    .send("뉴스 목록 조회 API 입니다.");

  // API의 결과값을 '뉴스 목록 조회 API 입니다.'로 전달합니다.

});

/* 뉴스 세부 조회 API */

// 3. HTTP Method와 URL을 지정한 API를 정의합니다.

// 만약, localhost:3000/api/news/:newsId 라는 URL로

// GET 요청이 들어온다면 해당 코드를 실행합니다.

router.get("/news/:newsId", (req, res) => {

  const params = req.params;

  // Path Params 데이터 중 newsId를 추출합니다.

  const newsId = params.newsId;

  console.log("클라이언트로 부터 전달받은 뉴스 ID : ", newsId);

  return res.status(200).json({

    data: "뉴스 세부 조회 API 입니다.",

  });

});

// Express 라우터를 외부로 전달합니다.

export default router;

 

가 존재합니다.

 

1. 서버 시작 : Express.js는 지정된 포트 번호(Port)를 사용하여 서버를 시작합니다.

 

app.listen(PORT, () => {

  console.log(PORT, "포트로 서버가 열렸어요!");

});

 

2. 라우터 등록 : 연결하려는 모든 라우터들을 /api 주소에 연결합니다.

 

import goodsRouter from "./routes/goods.js";

import newsRouter from "./routes/news.js";

// localhost:3000/api -> goodsRouter

// localhost:3000/api -> newsRouter

// 2. 라우터를 등록 합니다.

app.use("/api", [goodsRouter, newsRouter]);

 

3. API 정의 : 등록된 각 라우터를 순서대로 검토하여, HTTP Method와

                     URL이 일치하는 API를 찾아 해당 API를 수행하게 됩니다.

 

/* 뉴스 목록 조회 API */

// 3 HTTP, Method와 URL을 지정한 API를 정의합니다.

// 만약, localhost:3000/api/news 라는 URL로 GET 요청이 들어온다면 해당 코드를 실행합니다.

router.get("/news", (req, res) => {

});

 

4. 결과 반환 : API에서 모든 비즈니스 로직 처리가 완료된 후, 클라이언트에게 결과를 전달하게 됩니다.

 

router.get("/news", (req, res) => {

  // 4. 사용자의 요청에 맞는 데이터를 반환합니다.

  return res

    .status(200) // API의 상태 코드를 200번으로 전달

    .send("뉴스 목록 조회 API 입니다.");

  // API의 결과값을 '뉴스 목록 조회 API 입니다.'로 전달합니다.

});

 

 

5. API 분석하기 - 목록 조회하기

뉴스 목록 조회 API는 클라이언트가 GET/api/news/ 에 요청을 보낼 경우 실행됩니다.

 

해당 API는 GET 메서드로 /api/news URL에 요청이 들어오면, 특별한 비즈니스 로직 처리 없이

'뉴스 목록 조회 API 입니다.' 라는 결과값을 클라이언트에게 반환(Response)하도록 구현 돼 있습니다.

 

- 상태코드(Status Code)를 설정하기 위해  res.status(value),

- 결과값을 전달하기 위해서는 res.send(value)를 사용하였습니다.

 

 

/api/news 파일을 만들고, URL을 입력해줍니다.

Send 버턴을 누른 후, State(200 OK or 404)를 확인하고

출력된 결과를 확인해줍니다.

 

 

6. API 분석하기 - 세부 조회

 

뉴스 세부 조회 API는 클라이언트가 GET/api/news/:newsId에 요청을 보낼 경우 실행됩니다.

 

해당 API는 GET 메서드로 /api/news/:newsId URL의 요청을 처리합니다.

여기서 중요한 부분은 :newsId 에 해당하는 경로 변수 (Path Params)입니다.

이는, req.params을 통해 사용할 수 있고, 해당 데이터를 params 변수에 할당하여,

그 중 newsId만을 따로 추출하여 사용하도록 구현하였습니다.

 

이 API는 클라이언트로 부터 받은 newId를 서버 콘솔에 출력한 후, 결과를 JSON 형태로 반환하도록 구현 돼 있습니다.

 

/* 뉴스 세부 조회 API */

// 3. HTTP Method와 URL을 지정한 API를 정의합니다.

// 만약, localhost:3000/api/news/:newsId 라는 URL로

// GET 요청이 들어온다면 해당 코드를 실행합니다.

router.get("/news/:newsId", (req, res) => {

  const params = req.params;

  // Path Params 데이터 중 newsId를 추출합니다.

  const newsId = params.newsId;

  // 서버 콘솔에 클라이언트가 전달한 newsId를 출력합니다.

  console.log("클라이언트로 부터 전달받은 뉴스 ID : ", newsId);

  // 4. 사용자의 요청에 맞는 데이터를 json 형태로 반환합니다.

  return res.status(200).json({

    data: "뉴스 세부 조회 API 입니다.",

  });

});

 

 

파일이름을 /api/news/:newsId로 만들어주고

URL을 입력한 후, Send를 눌러줍니다.

 

그럼 현재는 아직 newsId에 대한 로직이 없어 JSON 파일 형식으로

data : "뉴스 세부 조회 API 입니다"가 출력 되는걸 볼 수 있습니다.

 

그리고, 터미널에도 해당 URL로 클라이언트가 접속 했음을 확인할 수 있습니다.