[Insomnia]RESTfulAPI (기존 웹상의 데이터를 접근하는 방식에서 수정된 'REST'방식의 접근 방법)

정의

1. REST (Representational State Transfer)
2. 웹 상의 자원(데이터)을 자원의 이름으로 표현해서 자원의 상태(값, 정보)를 주고받는 행위를 의미한다.
3. RESTful API와 REST API는 같은 의미라고 생각하면 된다.
4. HTTP URI를 통해 자원을 명시하고, HTTP Method를 통해 해당 자원에 대한 CRUD 처리를 적용한다.
5. REST 아키텍쳐를 구현한 API (*아키텍쳐: 시스템구조를 의미)
6. HTTP 기반의 웹기술 구현

설계규칙

1. URI에서 자원을 표시한다.
2. URI에 동사(list,add,edit...)를 표시하지 않는다.
3. HTTP Method를 사용해서 행동을 표시한다.

   GET :: 리소스 요청 [있는걸 조회하는거]
   POST :: 데이터 생성 [없는걸 만드는거, 이미있는데 만들려하면 ERROR]
   PUT :: 데이터 수정(전체 수정, 주로 PATCH 보다 많이 쓰인다. [없으면 생성, 있는걸 고치는거 수정]
   PATCH :: 데이터 수정(일부수정)
   DELETE :: 데이터 삭제 [큰기업애서는 잘 쓰이지않는다 대신, 컬럼에 DELETED : TRUE/FALSE 를 주고 조건을 준다 (조건: "DELETED:TRUE는 조회하지않는다.")]

4. URI + HTTP Method
5. 구분자는 '/'를 사용한다.
6. URI 마지막에 '/'를 적지 않는다.

   http://localhost/board (O)
   http://localhost/board/ (X)

7. URL 에 하이픈(-)을 간간히 사용한다.
8. URL에 언더바('_')는 사용하지 않는다 (에러는 안남. 가독성때문애)
9. 파일 확장자를 사용하지 않는다.
10. 반환하는 데이터는 주로 데이터만 반환한다.
11. OpenAPI는 대부분 REST 방식으로 구현되어 있다.

REST 방식

(GET) http://localhost/board
(POST) http://localhost/board
(PUT) http://localhost/board/:id
(DELETE) http://localhost/board/:id
(GET) http://localhost/board/검색어

fetch 사용법

• fetch()함수는 첫번째인자로 url, 두번째인자로 optional객체를 받고, Promise타입의 객체를 반환한다. 반환 된 객체는 API호출이 성공했을 경우에는 response(응답)객체를 resolve하고, 실패하면 error(예외)객체를 reject한다.

fetch(url, options)
  .then((response) => console.log("response: ", response))
  .catch((error) => console.log("error: ", error) )

• option객체에는 HTTP방식(method), HTTP요청헤더(headers), HTTP요청전문(body) 등을 설정해 줄 수 있다.
• response객체로부터는 HTTP응답상태(status), HTTP응답헤더(headers), HTTP응답전문(body) 등을 읽어 올 수 있음.

API테스트 플랫폼

• REST는 API인데 여기서 태스트 결과는 매법 웹페이지를 통해서 확인헀다. 하지만 json형식으로 된 데이터를 확인하기엔 많은 불편함이 있기 때문에 개발된 API를 테스트하기 위한 플랫폼이 여러개 존재한다.

  POSTMAN, Insomnia, VSC

queryKey 와 queryFn의 관계

const {data: activeProjectsData} = useQuery ({
  queryKey: ['myProjects', filteredPidList],
  queryFn: getActiveProjects,
  staleTime: staleTime.myProjects,
  enabled: !!currentPidList
})

==> queryKey에 있는 데이터를 queryFn이 매개변수로 사용가능
	const getActiveProjects = async(params: any) => {
      console.log(params, `params`);
    };

• queryKey: useQuery마다 부여되는 고유 Key값
• queryKey의 역할: React-Query가 query 캐싱을 관리할 수 있게 도와준다.
• queryFn: query Function으로 promise 처리가 이루어지는 함수이다. 즉, axios를 이용해 서버에 API를 요청하는 코드

useMutation

• useMutation: React-Query를 이용해 서버에 데이터 변경작업을 요청할 때 사용한다. (✳︎ 데이터조회를 할 때는 useQuery를 사용)