기초다지기/Javascript
API
by 김빵그
2024. 12. 16.
Application Programming Interface
말 그대로 응용 프로그램 간의 다리 역할을 하는 인터페이스, 다른 프로그램이나 서비스와 연결하거나 기능을 사용할 수 있도록 기능을 제공하는 것
1. 쉽게 비유하자면 레스토랑의 메뉴판을 생각해라
1. 레스토랑과 주방
- 손님(사용자) 레스토랑(앱)을 이용할 때 주방(서버)로 음식을 주문한다
- 손님은 주방에서 요리사가 음식을 어떻게 만드는지 몰라도 된다
- 중간 메뉴판(API) 손님은 메뉴판을 보고 원하는 음식을 주문한다
2. API 역할
- 메뉴판(API)은 손님(사용자)과 주방(서버) 사이의 소통 수단일 뿐이다
- 메뉴판(API)을 통해 주방(서버)이 제공할 수 있는 음식(기능)을 알게 되고, 그중에서 필요한 걸 주문(요청) 할 수 있다.
2. API 구성 요소
1. 요청(Request)
2. 응답(Response)
- 서버가 요청에 대한 처리 결과를 클라이언트에게 돌려주는 것
3. 규칙(Protocol)
- 요청을 보내는 방식과 응답을 받는 방식이 정해져있다
- 웹에서 많이 쓰이는 건 HTTP/HTTPS
3. REST API
Representational State Transfer
- 정해진 URL과 HTTP 메서드 (GET, POST 등)를 사용해 데이터를 주고받는 방식
- 주요 HTTP 메서드
- GET : 데이터 가져오기 : 조회
- POST : 데이터를 생성하기 : 등록
- PUT : 데이터를 수정하기 :수정
- DELETE : 데이터를 삭제하기
- 리소스 중심
- URL(주소)이 리소스(데이터)를 나타낸다 /users(사용자리스트)/ /users/1 (ID가 1인 사용자 정보)
- 고정된 응답
- 요청 주소에 맞는 데이터를 항상 고정된 형태로 반환
4. GraphQL
페이스북에서 만든 기술, 데이터를 질문(Query) 형식으로 요청하는 방식, Rest보다 유연하고 필요한 데이터만 가져올 수 있다
type User {
id: ID!
name: String!
email: String!
}
type Query {
user(id: ID!): User
}
- 한 번에 여러 데이터 요청 가능 (REST는 여러 URL을 요청해야 하지만, GraphQL은 한 번의 요청으로 다양한 데이터를 가져올 수 있다)
1. 주요 개념
- Schema(스키마)
- 서버에서 제공할 데이터의 모양과 구조를 정의한 것
- 예) 사용자 데이터는 이름(name), 이메일(email)
- Query(쿼리)
- Mutation(뮤테이션)
- 데이터를 생성(create), 수정(update), 삭제(delete)하는 요청
- Query는 조회(read)라면 mutaiton은 변경에 해당한다
- Resolver(리졸버)
- Query나 Mutation 요청을 처리하는 서버의 함수
- 클라이언트가 보낸 요청을 읽고, 데이터를 반환하거나 업데이트
5. REST와 GraphQL 차이점
비교 |
REST |
GraphQL |
요청구조 |
고정된 URL과 HTTP 메서드 사용 |
클라이언트가 필요한 데이터 구조를 직접 정의 |
데이터 반환 방식 |
고정된 응답 구조 |
원하는 데이터만 반환 |
엔드포인트(URL) |
여러 개의 엔드포인트 필요 (/users, /posts) |
하나의 엔드포인트로 모든 요청 처리(/graphql) |
데이터 요청량 |
불필요한 데이터까지 포함될 수 있다 |
요청한 데이터만 반환 |
복잡한 데이터 요청 |
여러 번의 요청 필요 |
한 번의 요청으로 가능 |
사용 난이도 |
배우기 쉽고 간단 |
더 많은 설정 학습 필요 |