스웨거를 통해 백엔드와 통신을 해보자!!
스웨거는 우리가 코드로 구현하기 전에 미리 정보를 주고 받을 수 있는 사이트이다.
무슨 resport가 나오는지, user 정보가 잘 전달되는지 확인할 수 있다.
Swagger 사용
swagger를 사용하는 예시를 들어보자.
회원가입시 데이터를 주고받을 때
오른쪽 위에 try it out을 눌러 예시 데이터에 원하는 값을 넣을 수 있다.
이렇게 원하는 값을 바꿔 넣으면
201 코드가 뜨면 오류 없이 값을 줬다는 의미이다.
위의 정보들은 response.data에 넘어오게 되는데
예를들어, username을 알고 싶다면 객체를 타고 들어가 response.data.username 으로 찾으면 되는 것이다.
또 다른 예시로
로그인을 요청할 때를 예시로 들어보면
로그인을 요청했을 때
백에서 토큰 두개가 들어오게 됩니다.
이 토큰은 '메시지 + user데이터' 들로 이루어진 하나의 정보 덩어리들이다.
프론트에서 해야할 일은
우리가 넣고 싶은 유제 데이터에다가 시크릿 키를 하나 넣어서 저런 토큰을 하나 만든 후,
헤더에 담아서 보내는 일을 하면 된다.
예를 들어,
" {name: wnstj} + 'secretKey' = 토큰 " 이 하나의 덩어리가 되는데
'secretKey'를 이용해서 복호화를 풀면 유저의 name이 wnstj인 것을 알 수 있게 되는것이다.
스웨거는 요런 토큰을 만들어 준다.
accessToken 이라는 이름의 토큰으로 만들어 지게 되는데, 이를 헤더에 담아서 보내면 된다.
이러면 유저의 정보를 백에다가 보내지도록 만들게 되는 것이다.
왜 헤더에 담아야 하는 것인가?
만약,
나의 정보를 알아낼 수 있는 api일 때(마이페이지라고 가정할 때)
콘솔에서 401 에러를 출력하게 된다.
왜냐, 이는 헤더에 토큰을 담지 않아서 뜨는 오류인데,
쉽게말해 나의 정보를 알아낼 수 있는 api에서 나에 대한 정보각 없는 상황인 것이다.
서버에는 내가 누군지 모르는 상황인 것이다.
그래서 헤더에 엑세스 토큰을 넣어야 하는 것이다.
그렇게 한다면 서버가 알아서 accessToken을 서버에 주게 되어 알아서 내가 누군지 알아차려주는 것이다,
백엔드에게 요청하는 코드를 작성할 때
먼저 원하는 값을 예시코드에 적은 후 execute 한 후 URL을 확보해준다.
그런 후 axios 라는 곳에 주소와 함께 데이터를 보내야 한다.
먼저 post인지 get인지 정해야 한다.
데이터를 조회할 땐 get, 보낼 땐 post, 지금은 로그인 토글을 보내야 하므로 post를 쓰게 된다.
{
"loginId": "wnstjwnstj",
"password": "wnstjwnstj"
}그리고 서버주소 뒤에 정보들을 적은 후,
스웨거의 내용들을 뒤에 따라 적으면 된다.
이때, 헤더가 필요한 상황일 때
{ headers: {Authorization: accessToken} }을 .post 안에 추가하면 된다.
응용
input 두 곳에 loginId, password를 입력받은 후 버튼을 누를 때 api가 호출 되도록 + accessToken 값이 출력되도록 만들어보자!!
코드 :
