API란 HTTP 요청을 Back-end 컴퓨터에 보냈을 때 실행되는 Back-end 기능이다. 즉 Back-end 개발자가 만든 함수로 API에 요청할 때 보내는 데이터는 API 함수로 들어갈 인자이고, 응답으로 받게 되는 데이터가 API 함수의 return 데이터이다. API를 알아보기 전에 HTTP에 대해서 간단히 정리해보자.
HTTP(hypertext transfer protocol)
HTTP는 hypertext transfer profocol의 약자로 '인터넷에서, 웹 서버와 사용자의 인터넷 브라우저 사이에 문서를 전송하기 위해 사용되는 통신 규약'을 의미한다. 간단하게 두 컴퓨터간에 텍스트 데이터를 주고 받는 길이다. HTTP라는 길로 요청(request)과 응답(response) 2가지를 서로 주고 받을 수 있다.
요청(Request)와 응답(Respose)를 살펴보면, 요청은 작성한 게시물의 텍스트 데이터를 HTTP를 통해 Back-end 컴퓨터로 보내고 이 데이터를 데이터 베이스에 저장해달라는 요청이다. 응답은 요청을 받은 Back-end 컴퓨터가 성공, 실패 등 처리 결과를 응답한다.
응답할 때 응답 상태코드라는 것을 함께 보내주는데 응답 상태코드는 100~599까지의 숫자로 구성되어 있다. 응답 상태코드들에 대한 내용은 MDN 사이트를 활용하자. https://developer.mozilla.org/ko/docs/Web/HTTP/Status
HTTP 상태 코드 - HTTP | MDN
HTTP 응답 상태 코드는 특정 HTTP 요청이 성공적으로 완료되었는지 알려줍니다. 응답은 5개의 그룹으로 나누어집니다: 정보를 제공하는 응답, 성공적인 응답, 리다이렉트, 클라이언트 에러, 그리고
developer.mozilla.org
API 종류(rest-API vs graphql-API)
API의 종류는 크게 rest-API와 graphql-API로 2가지가 존재한다. rest-API가 먼저 나왔으나 페이스북에서 조금 더 효율적인 grqphql-API를 만들게 되었다고 한다. 하지만 실무에서는 rest-API를 활용하는 곳이 있으니 두 가지를 모두 알아둘 필요가 있다고 한다,
| rest-API | graphql-API | |
| API 함수 이름 예시 : 티스토리에서 1번 게시글 조회 |
주소처럼 생긴 이름 https://tistory.com/board/1 |
일반 함수와 같은 이름 board(1) |
| 요청 담당자 | axios | apollo-client |
| 응답 결과물 | 모든 데이터 | 필요한 데이터 |
API와 CRUD
API는 크게 4가지 방식으로 구분할 수 있다. CRUD라고 불리는데 CREATE, READ, UPDATE, DELETE를 의미한다.
| axios (rest-API) |
apollo-clinet(graphql-API) | |
| 생성(CREATE) | POST | MUTATION |
| 수정(UPDATE) | PUT | |
| 삭제(DELETE) | DELETE | |
| 조회(READ) | GET | QUERY |
실제 사용방법은 위 사진처럼 다르다.
graphql-API 실전사례
프로필을 생성하는 API로 createProfile에 내용들을 객체로 저장을 한다. mutation 명령어를 사용하여 createProfile에 내용들을 입력한다. 입력해야하는 내용들은 Back-end 개발자가 알려주는 내용이 있을 것이다.
createProfile을 활용하기 위해서 name, age, school의 내용을 입력하고 응답 받을 때 필요한 내용들 _id, number, message 중에 원하는 부분만 받으면 된다. 나의 경우에는 name, age, school을 입력하고 message만 요청했을 때, 입력한 내용은 저장이 되고 message에서 "프로필이 정상적으로 등록되었습니다."의 응답을 받을 수 있었다.
# Write your query or mutation here
mutation{
createProfile(name:"루피", age:15, school:"밀짚모자"){
message
}
}{
"data": {
"createProfile": {
"message": "프로필이 정상적으로 등록되었습니다."
}
}
}
다만 실무에서는 객체를 받을 때 Input을 넣어 대체한다.
mutation{
createProduct(seller:"김재민", createProductInput : {name:"맥북", detail:"M1 Air", price:1000000}){
_id
number
message
}
}{
"data": {
"createProduct": {
"_id": "c7fc374e-cb8e-4716-8835-05f8d4b475d8",
"number": null,
"message": "상품이 정상적으로 등록되었습니다."
}
}
}creatProductInput 안에 객체를 입력하게끔 하는 이유는 이후에 어떠한 데이터를 조회할 때 하나의 데이터를 가지고 속해있는 객체를 조회하게 될텐데 기준이 되는 데이터를 밖으로 꺼내고 그 외의 데이터들은 Input으로 분리를 시켜주는 것이다.
프론트엔드 개발자가 된다면 백엔드 개발자와 API에 대해서 많이 의사소통을 하게 될 듯 싶다. API의 구조에 대해서 더 공부할 필요를 느꼈던 공부.
댓글