vscode) Thunder client - Environment Variable 적용하기
ThunderClient는 vscode에서 사용할 수 있는 Api Test 익스텐션입니다.
Postman의 많은 기능들을 Thunderclient에서도 사용할 수 있는데, 그 중 Environment Variable을 적용하는 방법과 accessToken, refreshToken을 가져와 전체 Api Collection에 적용하는 방법을 기록하려 합니다.
먼저 Vscode의 Extension에서 Thunder client를 검색하여 다운로드 받는다면 아래와 같이 사이드 드로어에 아이콘이 생성된 것을 볼 수 있습니다.
아이콘을 클릭한번으로 간단하게 Thunder Client를 시작할 준비가 되었습니다.
New Request 버튼 아래에 Activity, Collections, Env 탭이 보이는데 Env 탭을 누른 뒤, 햄버거 바를 클릭하여 새로운 Environment Collection을 생성합니다.
저는 Environment라 작명하였는데, 본인의 목적에 맞게 작명하시면 됩니다.
작명한 환경변수리스트를 클릭하면 새로운 창으로 진입되는데요,
테스트로 Variable Name을 host로, Value를 localhost:3000로 만들어 보겠습니다.
입력한 뒤 꼭 세이브를 눌러주셔야 합니다!
여기서 잠깐! 바로 적용할 수 있지만 여러개의 api를 만들고 관리한다는 가정하에, 먼저 Collection을 생성하도록 하겠습니다.
Collections 탭에서 햄버거 - New Collection을 클릭하여 컬렉션을 생성합니다.
저는 nestjs와 simple이라는 컬렉션을 만들었습니다.
컬렉션 오른쪽 상단의 ''' 버튼을 클릭하여 Settings에 진입합니다.
그리고 새로운 창의 Environment 탭으로 이동해주세요.
Attatch Env to this Collection에 자신이 작명한 환경변수 컬렉션을 넣어주세요.
입력한 뒤 꼭 세이브를 눌러주셔야 합니다!
이제 컬렉션에 수집될 Activity를 생성할 차례입니다.
New Request 버튼을 클하여 환경변수의 적용 없이 http://localhost:3000/foo Activity를 만들어 볼텐데요.
저는 http://localhost:3000/auth/register/email,http://localhost:3000/auth/login/email을 생성하겠습니다.
정상적으로 실행이 되시는지 확인하고, ctrl + s를 눌러 Activity를 저장한 뒤,
생성된 Activity의 오른쪽 하단의 ''' 버튼을 눌러 Save To Collection으로 생성한 컬렉션에 넣어줍니다
이제 컬렉션으로 이동하여 환경변수 host를 요청 URL에 적용해볼까요?
환경변수의 실제 사용은 매우 간단합니다. {{ }} 두개의 중괄호 안에 환경 변수를 넣어 적용할 수 있습니다.
정상적으로 host의 value가 입력되어 요청이 보내지는 것을 확인할 수 있습니다.
이제 환경변수 host만 변경한다면, 해당 컬렉션에 있는 모든 baseURL을 손쉽게 변경할 수 있게 되었습니다.
여기에서 끝나지 않고 Thunder Client는 postMan의 tests와 script 기능도 제공합니다.
서버의 응답값이 json일 때, 데이터 내부의 특정 프로퍼티를 가져와 환경 변수로 저장하는 방법을 알아보겠습니다.
저는 login/email에 요청이 성공할 때 돌려받는 데이터 중에서 accessToken과 refreshToken을 가져와 환경변수로 저장하겠습니다.
방법은 매우 간단합니다
먼저 Tests로 이동하여
select의 값을 Set Env Variable로 넣어주고, value에 {{accessToken}}과 {{refreshToken}}을 넣어줍니다
요청을 보낸 뒤 Environment에 이동하면 아래와 같이 환경변수가 자동 저장되어 있는 것을 확인할 수 있습니다!
이후 {{host}}를 사용했던 것처럼, 해당 컬렉션 내에서 어느곳에서든지 사용할 수 있습니다!
여기까지 간단한 Thunder Client 사용법이었습니다.
