나도 불과 일주일전 까지
REST API,RESTful API가 뭔지 몰랐다
이력서 지원 자격요건으로 있길래 알면 취업에 유리하겠구나 싶어 배운다
알고나니 마냥 어려운건 아니더라 나같이 몰랐던 사람들에게도 같이 도움이 되는 글이었음 좋겠다
이 글로 인해 'REST API로 이런걸 해봐야지' 란 생각이 들었다면 성공
REST API
일단 API가 기능을 빌려쓰는거 라는건 알겠는데 저건 뭐지
바로 요청과 응답 방식이 정해진 API를 REST API라고 하는거였다
우리가 하는 요청에는 4가지가 있고 (CRUD)
CREATE, READ, UPDATE, DELETE
HTTP를 사용해 요청하는데
HTTP 메서드론 GET, POST, PETCH, DELETE, PUT 이 있다
REST API는 요청과 응답의 방식이 정해져 있다고 했다
아래처럼 HTTP 메서드로 무슨 요청을 하는지 바로 파악하게 해준다
GET /users/123 # 123 user 정보를 가져온다
POST /users # 새로운 사용자 생성
DELETE /users/123 # 123 user 정보를 삭제한다
PUT /users/123 # 123 user 정보 전체 수정
PATCH /users/123 # 123 user 정보 부분 수정
GET /users # 사용자 목록 조회url 을 작성할땐 아래 처럼 동사를 사용하지 말자
❌ 잘못된 예시 (동사 사용):
GET /getUser/123
POST /createUser
DELETE /deleteUser/123
PUT /updateUser/123
GET /searchUsersRESTful API
REST에 ful 이 합쳐진 이 아니는 뭐가 다를까
REST의 설계 규칙을 잘 지켜서 설계된 API를 RESTful API라고 한다
방금 우리가 일관된 url과 명확한 메서드로 표현한 예도
REST스러운 RESTful API다
GET /users/123 # 123 user 정보를 가져온다
POST /users # 새로운 사용자 생성
DELETE /users/123 # 123 user 정보를 삭제한다
PUT /users/123 # 123 user 정보 전체 수정
PATCH /users/123 # 123 user 정보 부분 수정
GET /users # 사용자 목록 조회카카오 로그인 연동 속 REST API
최근에 프로젝트에 카카오 로그인 기능을 넣으면서 REST API를 사용해봤다
자바스크립트에 내장되어있는 fetch 메서드를 통해
상황별 HTTP 요청을 확인해보자
❶ GET, 인가 코드 받기
일단 첫번째 상황
서버에 url을 요청해 응답으로 인가 코드를 받기
먼저 공식문서로 어떻게 하면 되는지 안내 받기
엉 쿼리파라미터 필수인 사항들을 url뒤에 붙여 요청하면 되겠다
(쿼리 파라미터는 url뒤에 물음표와 함께 붙는 키-쌍 으로
url에 특정한 조건을 주고싶을 때 사용한다)
const KAKAO_AUTH_URL = `https://kauth.kakao.com/oauth/authorize?client_id=${REST_API_KEY}&redirect_uri=${REDIRECT_URI}&response_type=code`;
<a href={KAKAO_AUTH_URL}/>그래서 링크를 클릭하면 서버에 요청해서 응답을 받을수있게 했다
응답은 redirect_uri에 GET 요청으로 전달되는데
파라미터에 내가 원하는 code가 담겨있구나
받은 응답
http://localhost:3000/auth/kakao/callback?code=yGz…1dxQw0t78KJKLR4RgAAAAQKKiVPAAABlSHGSvPokopMIboAuA
?code= 뒤에 문자들이 있다
이렇게 인가코드 받기 성공 🎉
❷ POST, 토큰 받기
두번째 상황
토큰 받기 요청을 하자
이번에도 어떻게 요청하면 좋을지 공식문서로 가이드 확인
여기서 추가 지식
•GET,DELETEurl만으로 요청이 가능한 가벼운 애들
•POST,PUT,PETCH는 데이터를 생성, 추가, 업데이트 하느라 추가정보가 필요한 무거운 아이들이다
공식문서에선 Content-Type을 헤더에 담고
grant_type, client_id, redirect_uri, code를 본문에 담아
POST로 요청하길 원하고 있다
그렇다면 해주기
const tokenResponse = await fetch("https://kauth.kakao.com/oauth/token", {
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: `grant_type=authorization_code&client_id=${process.env.REACT_APP_REST_API_KEY}&redirect_uri=${process.env.REACT_APP_REDIRECT_URI}&code=${code}&client_secret=${process.env.REACT_APP_CLIENT_SECRET}`,
})
const tokenData = await tokenResponse.json();그리고 반응을 받아서 우리가 요청한 토큰 정보 수집하기
.json은 fetch의 메서드로 응답의 본문을 확인하게 해준다
이렇게 access_token 도 받기성공 🎉
❸ GET/POST, 사용자 정보 가져오기
이번에도 공식문서 보고 생각해보기
어떻게 하면 좋을까
Authorization, Content_Type 정보를 헤더에 담아POST로 요청하기
const response = await fetch('https://kapi.kakao.com/v2/user/me', {
headers: {
Authorization: `Bearer ${accessToken}`,
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8',
},
});
const data = await response.json();이번에도 서버에게 사용자 정보 받기 성공
마무리
암튼 이렇게 완료했다
다음엔 UPDATE, DELETE , PATCH 까지 제대로 써보고 싶다
