26일차 - Node.js 입문(2) API와 REST API 개념

이상민·2024년 9월 3일

TIL node.js 내일배움캠프

TIL

목록 보기

26/48

API와 REST API의 개념

API(Application Programming Interface)란?

출처: https://velog.io/@gomuzom/RESTful-Api

🎈 API(Application Programming Interface)는 서로 다른 소프트웨어나 어플리케이션 간을 연결해주는 매개체이자 약속이라고 볼 수 있다.

만약 우리가 날씨정보나 미세먼지를 확인하기위해 앱을 들어가 확인한다면, 앱은 날씨나 미세먼지 정보를 제공하는 서버에게 정보를 요청해야 한다. 이 때 바로 서버간의 통신을 도와주는것이 API라는 것이다 !!
즉 우리가 앱을 이용해 API를 통해 서버에 날씨 정보를 요청(Reqeust)하게되면, 서버는 이 요청을 처리한 뒤, 최종적인 날씨 정보를 API를 통해 날씨 어플리케이션에 우리에게 반환(Response)하는것이라 할 수 있는 것이다.
(API는 브로커다💁‍♀️)

우리가 API를 작성한다는 의미는?

웹 어플리케이션(프론트엔드)에서 원하는 기능을 수행하는 URL과 인터페이스를 제공한다는 의미.

그럼 REST API는 뭐에요?🤷‍♀️

REST ? 쉬다 ? 휴식하다 ? REST IN PEACE 뭐시기 그 뜻인가 ?
아니다.. 여기서 REST란 wiki백과사전에 따르면 “Representational State Transfer”의 줄임 말로, 월드 와이드 웹과 같은 분산 하이퍼미디어 시스템을 위해 네트워크 상에서 자원을 쉽고 명확하게 식별하고 조작할 수 있게 도와주는 소프트웨어 아키텍처의 한 형식이라고 한다.

쉽게 설명하자면, URL, Headers, Method 등 네트워크 표현 수단을 사람이 봐도 이해하기 쉬운 표현으로 정의한다고 이해하면 된다.
REST API는 HTTP를 통해 웹 서비스의 자원에 접근하는 방식을 “REST 아키텍쳐”의 규칙을 따라 구현된 API라고 생각하면 된다.

REST API의 구성 요소

REST API의 구성은 크게 세 가지로 이루어 진다.

자원(Resource) - URL

우리가 만들 소프트웨어가 관리하는 모든 것을 자원(Resource)으로 표현

행위 - HTTP method

Create : 생성(POST)
Read : 조회(GET)
Update : 수정(PUT),(PATCH)
Delete : 삭제(DELETE)

표현

해당 자원을 어떻게 표현할지에 대한 방법으로, 보통 JSON, XML 같은 형식을 이용해서 자원을 표현한다.

REST API 예시

router.get('/books', (req, res) => { // /books 라는 URL을 통해 전체 책 목록을 불러와 응답해 주는 역할을 하는 API
	res.json({ success: true, data: getAllBooks() }); // req : 요청 res : 응답
});

위 예시와 같이 Http 메서드인 GET은 리소스를 조회하는 역할을 담당하므로, 이 코드는 전체 책 목록을 조회(Read)하고, 그 결과를 JSON 형식으로 반환한다. 이렇게 API가 “REST 원칙”에 따라 구현되었으므로, 이 API는 RESTful 하다 볼 수 있습니다

Routing 이해 및 Router 학습 !

Routing이란?

🎈 Routing이란 클라이언트의 요청 조건(Http, 주소 등)에 대응해 응답(Response)하는 방식을 의미한다.

그럼 Router란 ?

🎈 Router는 클라이언트의 요청을 쉽게 처리 할 수 있게 도와주는 Express.js의 기본 기능중 하나

라우터 예시)

router.METHOD(PATH, HANDLER);

router: Express.js의 라우터를 정의하기 위해 사용.

METHOD: HTTP Method를 나타낸다. (ex: get, post, put, patch, delete 등..)

PATH: 실제 서버에서 API를 사용하기 위한 경로를 나타낸다. (ex: users, posts 등..)

HANDLER: 라우트가 일치할 때 실행되는 함수를 의미한다.

API Client

API Client란 ?

🎈 API Client란 개발단계에서 우리가 작성한 API의 요청을 확인하거나 테스팅 할 때 도움을 주는 툴이다. API Client를 사용함으로 개발 속도를 높이거나 잘못된 API 요청으로 인한 치명적인 에러를 예방하는데 도움을 받을 수 있음 !!

대표적인 API Client로는 Postman, Insomnia 가 있다. 이 두가지의 API Client는 API 요청(Request)을 손쉽게 구성할 수 있고, 응답(Response)을 직관적으로 확인할 수 있게 도와줌 !

Request와 Response

Request, Response란 또 뭐일까?

먼저 Request 란 말 그대로 클라이언트가 서버에게 요청하려는 정보나 메시지를 담은 객체를 의미한다.
세부 사항으로는 URL, Http method, 헤더(header), 쿼리 파라미터(query parameter), 바디 데이터(body data) 등이 포함된다.

Response란 서버에서 클라이언트로 응답 메시지를 전송시켜주는 객체다. Response의 세부 사항에는 상태 코드(status code), 응답 데이터(response data), 응답 헤더(response header) 등이 포함됩니다.

Express.js의 흐름 파악

💪 Express.js 통신 흐름
1. 클라이언트는 특정 URL과 데이터를 담은 요청(Request)을 서버에 전송
2. 서버는 받은 데이터에 따라 필요한 비즈니스 로직을 수행
3. 서버는 처리된 결과를 클라이언트에게 응답(Response)으로 보내줌

API 구현해보기

app.js 만들어주기

// app.js

import express from 'express';
import goodsRouter from './routes/goods.js';
import newsRouter from './routes/news.js';

const app = express();
const PORT = 3000; // 서버를 열 때 사용할 포트 번호

app.get('/', (req, res) => {
  res.send('Hello World!');
});

// localhost:3000/api -> goodsRouter
// localhost:3000/api -> newsRouter
// 2. 라우터를 등록 합니다.
app.use('/api', [goodsRouter, newsRouter]);
// 1. Express.js의 서버를 엽니다.
app.listen(PORT, () => {
  console.log(PORT, '포트로 서버가 열렸어요!');
});

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 // Express.js의 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) => {
  // 클라이언트가 전달한 Path Params 데이터를 받아옵니다.
  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 입니다.',
  });
});

// Express 라우터를 외부로 전달합니다.
export default router;

Express.js 흐름 분석

app.js 파일은 서버의 설정과 기본적인 동작을 정의하는 곳이다. 여기서 라우터(Router)를 이용해 특정 HTTP Method와 URL로 들어오는 요청(Request)을 어떤 함수에서 처리할 지 연결해주는 역할을 담당하게 된다.

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

// 1. Express.js의 서버를 엽니다.
app.listen(PORT, () => {
  console.log(PORT, '포트로 서버가 열렸어요!');
});

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

import goodsRouter from './routes/goods.js';
import newsRouter from './routes/news.js';

// 2. 라우터를 등록 합니다.
app.use('/api', [goodsRouter, newsRouter]);

3. API 정의: 등록된 각 라우터를 순서대로 검토하여, HTTP Method와 URL이 일치하는 API를 찾아 해당 API를 수행하게 된다.

// routes/news.js

/** 뉴스 목록 조회 API **/
// 3. HTTP Method와 URL을 지정한 API를 정의합니다.
// 만약, localhost:3000/api/news 라는 URL로 GET 요청이 들어온다면 해당 코드를 실행합니다.
router.get('/news', (req, res) => {
   ...
});

4. 결과 반환: API에서 모든 비즈니스 로직 처리가 완료된 후, 클라이언트(ex: 웹 브라우저)에게 결과를 전달하게 됨.

router.get('/news', (req, res) => {
  // 4. 사용자의 요청에 맞는 데이터를 반환합니다.
  return res // Express.js의 res 객체를 반환합니다.
    .status(200) // API의 상태 코드를 200번으로 전달합니다.
    .send('뉴스 목록 조회 API 입니다.'); // API의 결과값을 '뉴스 목록 조회 API 입니다.'로 전달합니다.
});

API 분석하기 - 목록 조회

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

해당 API는 GET 메서드로 /api/news URL에 요청이 들어오면, 특별한 비즈니스 로직 처리 없이 '뉴스 목록 조회 API 입니다.'라는 결과값을 클라이언트에게 반환(Response)하도록 구현되어 있다.

/** 뉴스 목록 조회 API **/
// 만약, localhost:3000/api/news 라는 URL로 GET 요청이 들어온다면 해당 코드를 실행합니다.
router.get('/news', (req, res) => {
  return res // Express.js의 res 객체를 반환합니다.
    .status(200) // API의 상태 코드를 200번으로 전달합니다.
    .send('뉴스 목록 조회 API 입니다.'); // API의 결과값을 '뉴스 목록 조회 API 입니다.'로 전달합니다.
});

이후 node app.js 로 실행시켜 3000 포트 서버를 열어준뒤, http://localhost:3000/api/news 를 검색해보면 뉴스 목록 조회 API 입니다. 라고 정상적으로 뜨는 모습을 볼 수있고,

http://localhost:3000/api/news/:newsId 를 검색해보면 마찬가지로 정상적으로 출력되는 모습을 확인 할 수 있다!

Express.js의 req, res 객체 알아보기

req 객체

클라이언트에서 서버로 보내는 메시지를 요청(Reuqest)이라고 부른다.

req.app : req 객체를 통해 Express.js의 app 객체에 접근할 수 있다.

req.ip: 요청한 Client의 ip 주소가 담겨 있다.

🔻 req.body: Request를 호출할 때 body로 전달된 정보가 담긴 객체

express.json() Middleware를 이용하여야 해당 객체를 사용할 수 있다.
app.post('/', (req, res) => {
  // Request에서 body 데이터를 ReqBody 변수에 할당한다.
  const ReqBody = req.body;
  return res.status(201).json({});
});
🔻 req.params: 라우터 매개 변수(Path Params)에 대한 정보가 담긴 객체
app.get('/:name', (req, res) => {
  // Request에서 Path Params 데이터의 name Key를 가진 Value를 name 변수에 할당한다.
  const { name } = req.params;
  return res.status(200).json({});
});
🔻 req.query: Request를 호출할 때 쿼리 스트링으로 전달된 정보가 담긴 객체
app.get('/', (req, res) => {
  // Request에서 Query String 데이터를 ReqQuery 변수에 할당한다.
  const ReqQuery = req.query;
  return res.status(200).json({});
});
req.cookies: Request를 호출할 때 Cookie 정보가 담긴 객체

cookie-parser Middleware를 이용하여야 해당 객체를 사용할 수 있다.

req.get(Header): 헤더에 저장된 값을 가져오고 싶을 때 사용.

res 객체

서버에서 클라이언트에게 보내는 메시지를 응답(Response)이라고 부른다.

res.app : res 객체를 통해 Express.js의 app 객체에 접근할 수 있다.

🔻 res.status(코드) : Response에 HTTP 상태 코드를 지정함
app.post('/', (req, res) => {
  return res.status(201).json({key: 'Value'});
});
🔻 res.send(데이터) : 데이터를 포함하여 Response를 전달

ex) res.send('Hello, World');
app.post('/', (req, res) => {
  return res.status(201).json({key: 'Value'});
});
🔻 res.json(JSON) : JSON 형식으로 Response를 전달

ex) res.json({ message: 'Hello, World' });

res.end() : 데이터 없이 Response를 전달

res.redirect(주소) : 리다이렉트할 주소와 함께 Response를 전달합

ex) res.redirect('https://naver.com');

res.cookie(Key, Value, Option) : 쿠키를 설정할 때 사용.

res.clearCookie(Key, Value, Option) : 쿠키를 제거할 때 사용.

이상민

TIL

이전 포스트

25일차 - Node.js 입문(1) Express.js

다음 포스트

26일차 - Node.js 입문(2) API와 REST API 개념

TIL

API와 REST API의 개념

API(Application Programming Interface)란?

우리가 API를 작성한다는 의미는?

그럼 REST API는 뭐에요?🤷‍♀️

REST API의 구성 요소

REST API의 구성은 크게 세 가지로 이루어 진다.

REST API 예시

Routing 이해 및 Router 학습 !

Routing이란?

그럼 Router란 ?

API Client

API Client란 ?

Request와 Response

Request, Response란 또 뭐일까?

Express.js의 흐름 파악

API 구현해보기

app.js 만들어주기

news.js 도 만들어주기

Express.js 흐름 분석

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

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

3. API 정의: 등록된 각 라우터를 순서대로 검토하여, HTTP Method와 URL이 일치하는 API를 찾아 해당 API를 수행하게 된다.

4. 결과 반환: API에서 모든 비즈니스 로직 처리가 완료된 후, 클라이언트(ex: 웹 브라우저)에게 결과를 전달하게 됨.

API 분석하기 - 목록 조회

Express.js의 req, res 객체 알아보기

req 객체

res 객체

25일차 - Node.js 입문(1) Express.js

27일차 - Node.js 입문(3) REST API 개발 let's go

0개의 댓글