3일차) [React/JS] 통신 / rest-API vs graphql-API

김재범·2022년 7월 6일
1

코드캠프

목록 보기
3/46
post-thumbnail

통신이란?

데이터의 이동


반드시 한 명이 요청을 하면 그것에 대해서 응답 필요

FRONT END는 작성자, 비밀번호 등 내용을 STATE에 포장

HTTP 길로 백엔드 컴퓨터에 전송

프론트엔드 -> (HTTP) -> 백엔드 -> DB -> 백엔드 -> 응답

상태코드

백엔드로부터 받을 때 나타나는 코드

  • 1xx (정보): 요청을 받았으며 프로세스를 계속한다
  • 2xx (성공): 요청을 성공적으로 받았으며 인식했고 수용하였다
  • 3xx (리다이렉션): 요청 완료를 위해 추가 작업 조치가 필요하다
  • 4xx (클라이언트 오류): 요청의 문법이 잘못되었거나 요청을 처리할 수 없다(프론트엔드 오류)
  • 5xx (서버 오류): 서버가 명백히 유효한 요청에 대해 충족을 실패했다(백엔드 오류)

상태코드 주소

API(함수)

백엔드 개발자는 프론트에서 보내오는 요청을 처리하는 함수를 만듬

ex) 게시물 저장 API, 프로필 저장 API, 프로필 조회 API

API를 담당하는 함수를 만드는 방식

  • REST
  • GRAPHQL

기존에는 95% REST 사용, 그러나 최근에 GRAPHQL을 많이 사용(facebook, airbnb, github 등)

  • restAPI는 하나를 요청해도 백엔드 개발자가 세팅한 내용을 모두 받아야 함(무거움, 느림)
  • GraphqlAIP는 세팅 된 내용이 많아도 요청한 내용만 따로 받을 수 있음(가벼움, 빠름)

JSON (Javascript Object Notation)

자바 스크립트 객체 표기법

CRUD (Create Read Update Delete)

  • 만들고 조회하고 수정하고 삭제
  • 어떤 특정 기능을 만들 때 그 기능에 대한 API는 최소 4개(+1)
    +1은 목록 조회 -> 최소 기능 5개를 구현해야 함

    EX) 게시글을 만들 때 등록, 조회, 수정, 삭제, 목록 조회

API와 CRUD


생성, 수정, 삭제는 데이터베이스를 변경 시키는 것 => MUTATION
조회는 꺼내오는 것(QUERY)

vscode 에서 rest-api, graphql-api 사용하는 예시

한장 요약

restful

이름은 같게 하고 method만 다르게 하여 표현하기
ex) 게시글 조회담당자(API) = http://naver.com/board/1 = 게시글 수정담당자 = 게시글 삭제 담당자

RestAPI를 알아야 하는 이유

  • 우리가 취업하는 회사가 RestAPI를 사용할 수 있음
  • 백엔드 개발자 회사에서 무료로 API를 만들고 공개하는 것들이 있음
    Ex) 날씨정보, 코로나 정보 등 -> openAPI, publicAPI
    대부분의 openAPI는 restAPI로 되어있음

REST API & graphqlAPI 설명서&연습도구

<< 연습용 >>
swagger주소: http://example.codebootcamp.co.kr/api-docs
playground주소: http://example.codebootcamp.co.kr/graphql

<< 포트폴리오용 >>
playground주소: http://backend08.codebootcamp.co.kr/graphql

※ 플레이그라운드 사용시 ProductAPI로 연습 (실무용이고 나머지는 오류있음)

profile
지식을 쌓고 있습니다.

0개의 댓글