📚 GraphQL과 Apollo
Chapter 1. GraphQL이 뭐고 왜 쓰나요?
Lesson 2. GraphQL이 등장하기 전 - REST API란?
REST API란?
소프트웨어간 정보를 주고받는 방식
  • GraphQL 이전부터 사용
  • '다른' 방식 - 용도와 작업특성에 따라 적합한 것 사용
REST API를 알아보는 이유
  • GraphQL의 등장 배경과 목적을 알기 위함

참고영상



소프트웨어간 소통

[ { name: '30분짜장', category: 'chinese', tel: '##-####-####', rating: 4.6 }, { name: '피자파자마', category: 'italian', tel: '##-####-####', rating: 3.9 }, { name: '공중떡볶이', category: 'snack', tel: '##-####-####', rating: 4.9 }, ///... ]

데이터를 주고받을 주체들간 약속된 형식

05


  • URI 형식(어떤 정보를) X 요청 방식(어떻게 할 것인가)

요청 형식 용도
GET 정보 받아오기
POST 정보 입력하기
PUT/PATCH 정보 수정하기
DELETE 정보 삭제하기

요청 보내기 실습

  • 1-2-rest-api 프로젝트 실행

    # nodemon 설치 npm install -g nodemon # # 프로젝트 모듈 설치 npm install # # 프로젝트 실행 명령어 (해당 프로젝트 폴더에서) nodemon index.js # 브라우저에서 localhost:3000 으로 확인
  • VS Code의 Edit csv 확장 - 데이터 수정에 용이
  • Postman을 사용하여 정보 요청해보기

Postman

  • API 및 클라이언트 요청을 테스트할 수 있는 툴
  • Chrome Extension으로 설치

1. 팀(들), 팀원 목록 받아오기

요청 형식 URI
GET localhost:3000/api/team
GET localhost:3000/api/team/{id 번호}
GET localhost:3000/api/people
GET localhost:3000/api/people?{변수}={값}&{변수}={값} ...
GET localhost:3000/api/team/{id 번호}/people

2. 팀 추가하기

요청 형식 URI
POST localhost:3000/api/team

3. 팀 수정하기

요청 형식 URI
PUT localhost:3000/api/team/{id 번호}

4. 팀 삭제하기

요청 형식 URI
DELETE localhost:3000/api/team/{id 번호}


REST API의 한계

Case 1. 각 팀의 매니저와 오피스 호수만 필요할 때

[ { "manager": "Mandy Warren", "office": "101A", }, { "manager": "Stewart Grant", "office": "101B", }, { "manager": "Smantha Wheatly", "office": "102A", }, // ... ]
  • Overfetching

    💡 딱 필요한 정보들만 받아올 수는 없을까?


Case 2. 특정 팀의 매니저와 팀원들 명단이 필요할 때

{ "manager": "Mandy Warren", "members": [ { "first_name": "Nathan", "last-name": "Jenkins" }, { "first_name": "Isabella", "last-name": "Martin" }, { "first_name": "Kate", "last_name": "Owen" }, //... ] }
  • Underfetching

    💡 필요한 정보들을 요청 한 번에 받아올 수는 없을까?

📚 GraphQL과 Apollo