Rest API 간략하게

2024년 4월 9일 프론트엔드 강의 요약

 

REST API(Representational State Transfer API)

'REST'를 기반으로 만들어진 'API'

 

• API: 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스

 

API 요청/응답

 

 

클라이언트가 특정 기능을 이용하기 위해 어떤 주소로 요청을 보내면 서버가 응답해주는 체계

Client --- 클라이언트 입장에서 요청의 종류는 크게 4가지(CRUD) → Server

 

• REST: 자원을 이름으로 구분하여 해당 자원의 상태를 주고 받는 모든 것을 의미
  1. HTTP URL(Uniform Resource Identifier)를 통해 자원(Resource)을 명시
  2. HTTP Method(POST, GET, PUT, DELETE, PATCH ...)를 통해
  3. 해당 자원(URL)에 대한 CRUD Operation을 적용

 

• RESTFUL: CRUD 요청을 하나의 경로(주소)로 관리하고 메소드를 통해 구분
  1. Create - POST
  2. Read - GET
  3. Update - PUT / PATCH / *POST
  4. Delete - DELETE

 

클라이언트가 특정 기능을 이용하기 위해 어떤 주소로 요청을 보내면 서버가 응답해주는 체계

Client ← 서버의 입장에서 응답의 종류는 크게 3가지(200 - OK, 400 - ERR, 500 - ERR) --- Server

 

• 404 ERR: 페이지 찾을 수 없는 에러 (페이지 없음)

 

Status Code 종류

• 200 OK - 요청 성공. 서버에서 정상적으로 요청을 처리하고 응답
• 301 Moved Permanently - 페이지 영구 이동. SEO를 위해 모든 링크 권한 업데이트 필요
• 401 Unauthorized - 서버에 인증 필요. 인증되지 않은 클라이언트
• 403 Forbidden - 리소스를 볼 권한이 없는 인증된 클라이언트
• 404 Not Found - 페이지 없음
• 500 Internal Server Error - 서버 측 오류. 일반적으로 서버 측 코드에서 버그나 예외가 발생
• 503 Server Unavailable - 서버 측 오류. 일반적으로 호스팅 플랫폼 문제, 과부하 또는 유지 보수 문제로 인해 발생

 

Axios

• Node.js와 브라우저를 위한 Promise 기반 HTTP 비동기 통신 라이브러리
• Request(요청), Reply(응답)을 JSON 형태로 자동 변경
• API 요청 중단 가능
• Response Timeout 지정 가능

 

설치 명령어
npm install axios
yarn add axios

모듈 불러오기
import axios from "axios"

 

사용 예시

• Main
  • GET: 포스팅 목록들을 조회하여 페이지에서 카드 형태로 출력
  • PUT: 포스트 카드의 하트를 클릭하면 숫자가 증감
• Detail
  • GET: 단건의 포스팅 상세 내용에 대한 정보를 조회하여 화면에 출력
• Write
  • POST: 포스팅 제목과 내용을 함께 전달하여 포스팅 등록

 

Swagger

Web API 문서화를 위한 도구로 API들이 가지는 명세를 관리하는 도구

 

서버와 클라이언트 개발자 간 API에 대한 소통을 위해 등장하였으며, 엑셀파일로 API에 대한 정보를 주고 받았으나 API의 정보를 추가 및 변경하면 일일이 수정하고 코드를 확인해야 하는 불편함에서 등장

 

스웨거에서의 API의 '명세'는 물론 'Test'도 가능

 

Swagger

 

로컬에서 Fake-Server 생성하는 방법, JSON-Server

JSON-Server

• 아주 짧은 시간에 'REST API'를 구축해주는 라이브러리
• API 서버의 기본적인 기능을 대부분 갖췄지만 프로덕션 전용 X
• 프로토타입을 만들기 위한 Fake Server
• 'Yam'을 사용하되, 'Nvm'을 사용하는 경우라면 제대로 동작하지 않을 가능성 존재
• 프로젝트 루트 경로에 'data.json' 파일 생성

 

설치 명령어
Npm install json-server

서버 실행 명령어
json-server -- watch data.json --port 4000

 

json-server 예시

 

 

아하모먼트!

취업전 - 직후

• 채용공고 자격에 미달되더라도 지원할 것
• 모르는 건 모른다고 답변하지만, 답에 근접하도록 할 것
• 에러를 마주할 때, 정답이 아니더라도 집요하게 해결해볼 것
  • 질문으로 해결
  • 구글링으로 해결
  • StackTrace 분석으로 해결

 

신입 테크트리

 

3년차 이후

• 코드 가독성이 좋고 유지보수가 쉬운, 변화와 확장에 유연하게 설계하는 것
• 사업(도메인)에 대해 전략적인 사고를 갖는 것
• 최신 기술 트렌드를 놓치지 않는 것