프론트개발을 하면서 api 연동을 할 때 에러가 종종 발생한다.
이때 프론트엔드로 힘든건 "내가 잘못 코드를 짠게 맞나 ..?" 하는 불안감이 있다는 것이다
"백에서 변수명을 잘못알려준거면 ??"
"백에서 엔드포인트를 잘못 쓴거면 ??"
다행하게도 지금까지 그런적은 거의 없다 ! 그리고 있다고 해도 백에게 물어봐서 금방 해결할 수 있었다.
하지만 .. 소켓 .. 소켓이 문제였다 ..
이번에 구현하고 있는 서비스에서 웹소켓을 구현했는데, 사용한 곳은
사용자가 축제 부스에 대기를 걸면, 실시간으로 운영자 도메인에서 대기카드가 보여야 했다!
이걸 웹소켓으로 구현했는데, 백엔드를 계속 괴롭혀야했다 ..
사용자가 대기를 거는걸 admin 계정에서 테스트를 해볼 수가 없었기 때문이다 !! (백엔드는 파이썬 장고 환경이었다.) 물론 대기는 admin에서 걸리지만, 소켓으로 볼 수는 없다고 했다 ...
그래서 계속 백엔드에게
"지금 대기 걸어줘!!!!" 라고 했는데 알고보니 postman을 쓰면 테스트 해볼 수 있다는 것 아니겠는가 ??
postman은 개발된 API를 쉽게 테스트할 수 있게 도와주는 서비스다.
지금까지는 postman 해보기 귀찮기도 했고, 굳이 필요성을 못느꼈어서 안했는데 이참에 배워보자 하고 처음 사용해보았다.
postman 설치
우선, 데스크탑에 postman을 설치한다.
https://www.postman.com/downloads/
본인 노트북 사양에 맞게 설치하면 된다.
이후 회원가입, 로그인을 수행한다.
Postman 사용하기
보통 우리는 http이기에 해당 버튼을 클릭해준다.
이후 메서드를 선택한다 (GET, POST, DELETE 등등)
엑세스 토큰 발급 받기
보통 서비스에서는 사용자가 로그인 했는지 안했는지에 따라 api 요청 가능 여부가 달라진다.
그래서 로그인 후 발급받는 엑세스토큰을 헤더에 담아 bearer로 요청하는데, postman에서도 해당 절차가 필요하다.
메서드(일반적으로 POST)를 선택하고 백엔드 서버 + 로그인 엔드포인트를 입력한다.
- 메서드 선택
- body에 api 명세서에 적혀있는 request body에 내용 채워주기 (우리는 유저 핸드폰 번호와 비밀번호였다.)
- send 누르기
이렇게 하면 백엔드에서 설정해놓은 엑세스 토큰과 리프레시 토큰이 발급된다!!
이후 해당 엑세스 토큰을 복사해놓는다 !
api 테스트
위에서 발급한 엑세스 토큰을 가지고 다른 api를 테스트 해볼 수 있다.
이렇게 Auth 탭에서 Auth Type을 선택하고, 해당 토큰을 넣어주면 된다!
그리고 body에 request body를 넣어주고 send를 누르면 백엔드에서 보내주는 response를 확인할 수 있다!
소켓
소켓에서도 플로우는 비슷하다.
우선 new를 누르고 Websocket을 클릭한다. (해당 서비스는 Socket.IO를 사용하지 않았다!)
소켓은 header 인식이 불가능하다고 한다! 그래서 url에 token을 포함해서 보내줘야 한다.
우리의 url은 다음과 같았다.
wss://백엔드 배포주소/ws/waiting/user?token={access}{access} 자리에 토큰을 넣어주면 된다!
이렇게 하고 connect를 하면 문제가 없다면 연결이 잘 된 것을 확인할 수 있다.
프론트에서 웹소켓 테스트
이렇게 연결하고 다시 http api로 가서 사용자가 부스 거는 api를 호출해주면 방금 위에서 테스트한 웹소켓 response에 해당 내용이 잘 호출된걸 확인할 수 있다!
이제 Postman을 더 유용하게 사용해야겠돠
Thanks to my Backend ..
