[VSCode] 💽 Thunder Client (포스트맨 대신 이거 쓰자)

보통 웹개발할 때 API 요청에 대한 결과를 체계적으로 확인하기 위해 포스트맨(Postman) 을 많이 들 사용한다. Postman은 API 개발, 테스팅, 문서화 및 모니터링을 위한 인기있는 플랫폼이다. 개발자들이 API 요청을 생성하고, 응답을 테스트하며, 협업을 통해 API를 관리할 수 있게 도와준다. 크롤링, RESTful 서비스, GraphQL 등 다양한 유형의 API와 커뮤니케이션할 때 유용한 도구로 사용된다.

하지만 단순히 API를 테스트 하는 목적으로서 포스트맨을 사용한다면 너무 기능이 과하고 무겁다. 

따라서 VSCode 에디터 내에서 간단한 조작만으로 API 테스트를 빠르고 수월하게 할 수 있는 익스텐션을 소개해본다.

 

Thunder Client

Thunder Client 는 Postman과 유사하게 API 요청 생성, 테스트, 디버그, 모니터링의 수행을 도와주는 VSCode 확장툴이다.

HTTP 요청 및 응답의 생성과 테스트 및 다양한 인증 방식 지원 (예: OAuth2, Bearer Token 등), 환경 변수 이용으로 서로 다른 개발 환경에서 동일한 요청 템플릿 사용 가능하다. 쓸데없는 기능을 내치고 API 테스트에 집중되어 있어 작업 흐름을 간소화하고 VSCode 와의 통합으로 더욱 편리한 경험을 제공한다.

Thunder Client - Visual Studio Marketplace

 

Thunder Client 사용법

 

요청 등록

VSCode 익스텐션을 설치하면 좌측 메뉴목록에 번개표시의 썬더 클라이언트 메뉴가 생성된다.  해당 메뉴를 클릭하면 리퀘스트(Request)를 관리할 수 있는 목록과 리퀘스트 상세 정보 그리고 응답 결과를 확인할 수 있는 패널이 뜬다.

그리고 상단에 있는 New Request 버튼을 클릭해보면,  테스트할 상세 요청 정보를 넣을 수 있는 창과 응답 결과를 볼 수 있는 창을 확인할 수 있다. 일반적으로 단일 요청에 대한 테스트를 빠르게 진행해볼 때 유용한 기능이다.

API 호출에 필요한 메서드(Method), 쿼리(Query), 헤더(Headers), 바디(Body) 등을 추가하여 사용할 수 있다. 개발된 REST API 형태에 맞춰서 요청 테스트를 진행해 본다.

 

테스트 목록

또한 Collections 라는 유용한 기능이 있는데, 프로젝트마다 사용하는 API 목록이 다른데 이 때 콜렉션을 활용하면 프로젝트마다 API 목록을 정리해 놓을 수 있어서 좋다.

 

환경 변수

중복적으로 사용되는 값들을 환경변수로 설정할 수 있다. 상단 Env를 누르고 New Environment를 선택하면 프로젝트마다 환경변수를 적용할 수 있다. 프로젝트에서 사용하는 변수들을 여기에 등록해 두면 된다.

BASE_URL / API_KEY / TOKEN 이라는 글로벌 변수를 정의

환경변수를 등록했다면, 이제 아래 이미지처럼 {{Variable}} 형식으로 URL에 환경변수를 추가해서 사용하면 된다.

환경변수는 경로(url) 뿐만 아니라 쿼리(Query), 헤더(Headers) 등 필요한 곳에 추가해서 사용할 수 있다.

---

# 참고자료

https://garve32.tistory.com/34

https://webruden.tistory.com/840