코멘토 React 실무 PT 4주차 - API와 Postman

LIVE로 배우는 실무 PT ㅣ 코멘토

 

<4주차 요약 >

 

API란?

클라이언트와 서버 간에 데이터를 주고받는 방식을 정의한 것 (규격)

 

1.REST API란?

HTTP URI를 통해 자원(Resource)을 명시하고,

HTTP Method를 통해 해당 자원에 대한 CRUD Operation을 처리하도록 설계된 아키텍쳐

 

REST 조건을 만족하는 API를 Restful API라고 부르고

REST 설계 규칙 맞춰 API를 작성하는 것을 Restful 하다고 한다.

REST가 필요한 이유

• 애플리케이션 분리 및 통합
• 다양한 클라이언트의 등장
• 최근의 서버 프로그램은 다양한 브라우저와 모바일 환경에서도 통신을 할 수 있어야 함.

REST의 구성요소

자원(Resource): URI

• 모든 자원에 고유한 ID가 존재하고, 이 자원은 Server에 존재.
• 자원을 구별하는 ID는 ‘/groups/:group_id’와 같은 HTTP URI.
• Client는 URI를 이용해서 자원을 지정하고 해당 자원의 상태(정보)에 대한 조작을 Server에 요청. 

행위(Verb): HTTP Method

• HTTP 프로토콜의 Method를 사용.
• HTTP 프로토콜은 GET, POST, PUT, DELETE 와 같은 메서드를 제공. 

표현(Representation of Resource)

• Client가 자원의 상태(정보)에 대한 조작을 요청하면 Server는 이에 적절한 응답(Representation)을 보냄.
• REST에서 하나의 자원 JSON 혹은 XML를 통해 데이터를 주고 받는 것이 일반적.
  

 

HTTP Method

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

 

글 관련 API = /posts

• 글 작성 : POST /posts
• 글 수정 : PATCH /posts/[postid]
• 글 삭제 : DELETE /posts/[postid] 

 

댓글 관련 API = /posts/[postid]/comments

• 댓글 작성 : POST     /posts/[postid]/comments
• 댓글 수정 : PATCH    /posts/[postid]/comments/[commentid]
• 댓글 삭제 : DELETE   /posts/[postid]/comments/[commentid]

 

2.REST API 설계 규칙

path param: /:id

query param: ?type=sale

1. URI는 정보의 자원을 표현해야 한다.

• resource는 동사보다는 명사를, 대문자보다는 소문자를 사용한다.
• resource의 자원은 복수 명사를 사용해야 한다.

ex) GET /Member/1 -> GET /members/1

 

2. 자원에 대한 행위는 HTTP Method로 표현한다.

• URI에 HTTP Method가 들어가면 안된다.

ex) GET /members/delete/1 -> DELETE /members/1

• URI에 행위에 대한 동사 표현(CRUD 기능)이 들어가면 안된다. 

ex) GET /members/show/1 -> GET /members/1

ex) GET /members/insert/2 -> POST /members/2

• 경로 부분 중 변하는 부분은 유일한 값으로 대체한다. (:id는 하나의 특정 resource를 나타내는 고유값이다.)

ex) student를 생성하는 route: POST /students

ex) id=12인 student를 삭제하는 route: DELETE /students/12

 

 

3. 슬래시 구분자(/ )는 계층 관계를 나타내는데 사용한다.

ex) http://restapi.example.com/houses/apartments

 

4. 리소스 간에는 연관 관계가 있는 경우는

• /리소스명/리소스 ID/관계가 있는 다른 리소스명 

ex) GET : /users/{userid}/devices

(일반적으로 소유 ‘has’의 관계를 표현할 때)

 

5. 하이픈(-)은 URI 가독성을 높이는데 사용

불가피하게 긴 URI경로를 사용하게 된다면 하이픈을 사용해 가독성을 높인다.

 

6. 밑줄(_)은 URI에 사용하지 않는다.

밑줄은 보기 어렵거나 밑줄 때문에 문자가 가려지기도 하므로 가독성을 위해 밑줄은 사용하지 않는다.

 

 

7. URI 마지막 문자로 슬래시(/ )를 포함하지 않는다.

명확한 URI를 만들어 통신을 해야하기 때문. 혼동을 주지 않도록 URI 경로의 마지막에는 슬래시(/)를 사용하지 않는다.
Ex) http://restapi.example.com/houses/apartments/ (X)

 

8. 파일확장자는 URI에 포함하지 않는다.

• Message Body 내용의 포맷을 나타내기 위한 파일 확장자를 URI 안에 포함시키지 않는다.
• 필요한 경우 Accept header를 사용한다.  

Ex) http://restapi.example.com/members/soccer/345/photo.jpg (X)

Ex) GET / members/soccer/345/photo

HTTP/1.1 Host: restapi.example.com Accept: image/jpg (O)

 

 

3.Status 코드 종류

1xx : 전송 프로토콜 수준의 정보 교환

2xx : 클라어인트 요청이 성공적으로 수행됨

3xx : 클라이언트는 요청을 완료하기 위해 추가적인 행동을 취해야 함

4xx : 클라이언트의 잘못된 요청

5xx : 서버쪽 오류로 인한 상태코드

 

 

4.Postman 활용

• 목서버(Mock Server)란
  • 실제 서버처럼 요청을 받고 응답을 주는 가짜(Mock) 서버를 의미
• Postman란
  • API 개발을 보다 빠르고 쉽게 구현 할 수 있도록 도와주며, 개발된 API를 테스트하여 문서화 또는 공유 할 수 있도록 도와 주는 툴Postman은 모든 API 개발자를 위해서 다양한 기능을 제공한다.

 

구현한 Postman API 문서

whatToDo API

Collections에서 API를 저장할 수 있음.

  

response결과를 example로 저장해 Mock서버 등에서 데이터로 이용 가능함.

 

Mock collection을 통해 자신만의 Mock 서버를 생성 가능할 수 있음.

 

Environments에서 환경변수를 설정할 수 있음.

 

View documentation을 통해 api를 문서화할 수 있음.

 

api에 대한 설명을 추가 가능.

문서에서 지금까지 저장한 api정보를 모두 파악할 수 있음.

 

문서를 publish할 수 있음.

[TIL] Postman으로 API문서 만들기

 

 

5.React에 API 연동하기

Axios : HTTP 통신을 구현할 때 사용하는, 인기있는 Javascript 라이브러리

 

*참고

인터셉터 | Axios 러닝 가이드

 

 

6.프로젝트를 통해 알게 된 것

1. github-page로 배포시 발생하는 .env ignore 문제

Github Actions를 이용하여 gh-pages 자동 배포하기

이때 github token이 필요한데 아래의 링크를 참고해 해결하였다.

[GitHub] 깃허브 토큰(Token) 생성하는 법

 

2. npm로 설치한 라이브러리 삭제할 때는 Package-lock 삭제

 

3.CSS 관련

• flex-wrap

초보자를 위한 Windows(윈도우즈), HTML과CSS를 사용한 홈페이지 작성과 엑셀(EXCEL),메일(outlook mail),포

• z-index 동작하지 않을때 앞으로 보내고 싶은 div의 position을 relative로 지정한다.

z-index가 동작하지않는 이유 4가지 (그리고 고치는 방법)