규도자 개발 블로그
JSON을 테스트하는 가장 좋은 방법. POSTMAN과 JSON Placeholder 본문
JSON을 테스트하는 가장 좋은 방법. POSTMAN과 JSON Placeholder
규도자 (gyudoza) 2019. 1. 23. 00:12JSON을 테스트하는 가장 좋은 방법. POSTMAN과 JSON Placeholder
JSON(JavaScript Object Notation). 웹프로그래머라면 뗄레야 뗄 수 없는 만능 자료형이라고 할 수 있다. 가끔씩 파싱 중 골머리를 썩게 하는 거 빼곤 플랫폼 언어 가릴 것 없이 거의 모든 곳에서 통용되어 ajax를 통한 동일 사이트 안에서의 갱신도, restful API를 이용한 데이터 교환에서도 거의 정석이라고 할 수 있을 정도로 고착화돼있다. 자료형이 JSON이 아니면 왜 이렇게 만들었는지 의문이 들 정도로 말이다.
이 JSON을 테스트하기 좋은 방법이 있다. 송신 및 수신 값을 확인할 때는 POSTMAN, 코드 내에서 정형화된 JSON데이터가 필요할 땐 JSON Placeholder.
POSTMAN
위 문단의 POSTMAN을 클릭하면 POSTMAN의 공식홈페이지로 이동할 수 있다. 각자의 OS에 맞는 버전을 다운받아 설치하자. 해당 앱을 사용하는 데에는 회원가입이 필요하다.
앱의 초기화면이다. 아주아주 간단한 사용법을 알아보겠다. POSTMAN은 뚫려있는 API Route에 데이터를 주고 받기 쉽게 해주는 툴이다. Request버튼을 눌러보자.
POSTMAN은 API요청을 리퀘스트 단위로 관리한다. 폴더가 없으면 Create Folder버튼을 눌러 저장할 폴더를 생성한 뒤에 선택하여 Save to (디렉토리명)버튼을 누르자. 그러면 아래와 같은 화면이 출력된다.
아주아주 직관적인 UI이다. 중간에 주소를 입력하는 곳이 있고 그 왼쪽에 메소드를 정하는 셀렉트박스가 있다. 해당 셀렉트박스를 누르면 GET, POST, PUT, DELETE뿐 아니라 10댓개의 많은 메소드들을 확인할 수 있다. 어차피 여기에서 자주 쓰게 되는 건 위 네 개의 메소드들 뿐이다. 이제 한번 JSON을 테스트해보자.
JSON Placeholder
이름에서 유추할 수 있다시피 이 사이트는 JSON을 테스트할 수 있는 사이트이다. 간단하게 설명하자면 API호출을 통해 불러와야 할 정형화된 데이터가 필요할 때 사용하는 곳이라고 보면 된다.
이곳 공식홈페이지인데 포스트를 쓸 당시인 2019년 1월 22일경에는 스폰서가 붙어 있지 않은 모습이다. 안쓰럽지만... 일단 아래로 내려보자.
아주 간단한 사용 예가 나와있다. 위 Try it버튼을 누르기 전에는 아래 있는 Json데이터가 출력되지 않는다. 내가 눌러서 나온 것이다. 위 사용 예처럼 해당 주소로 API요청을 보내면 정해져있는 Json데이터를 리턴해준다. 한번 POSTMAN으로 테스트해보자.
JSON Placeholder에서 제공해주는 기본 주소인 https://jsonplaceholder.typicode.com/의 뒤에 위에서 제공하는 다른 endpoint를 입력하면 해당 데이터들을 리턴해준다. 스크린샷에서는 엔드포인트를 posts로 하였고 (https://jsonplaceholder.typicode.com/posts) 설명대로 100개의 post데이터를 던져주는 모습이다. 다른 사용 예인 comments나 users도 같이 작동하며 endpoint의 뒤에 따로 idx를 지정해주면 해당 데이터만 가져오기도 한다.
물론 GET뿐만이 아닌 다른 Restful API 메소드들도 지원한다.
깃허브에 전용 repo를 만들고 Json Placeholder에서 제공하는 api루트를 통해서 해당 내용을 조작하는 방식인데 해보진 않아서 잘 모르겠다. 사실 이방법보다는 간단하게 웹서버에 postdata를 그대로 리턴해주는 post루트나 수정한 그대로 리턴해주는 put루트 등을 만들어 실험해보는 게 더 쉽고 간단한 방법 같다.
POSTMAN에 대해서 더 설명해보자면 메소드가 GET일 때는 아래와 같이 Params에 데이터를 입력하면 자동으로 해당 매개변수가 적용된 url을 생성해준다.
이번엔 메소드를 POST로 바꿔보자. 그러면 GET과는 달리 Body탭이 활성화되는데 해당위치에서 데이터를 Post요청 안에 담아 보낼 수 있다.
물론 Json Placeholder에서는 Route가 어떻게 설정돼있는지 몰라 어떻게 하면 내가 보낸 값을 그대로 받을 수 있는지 모르겠다. 그래고 아래 결과창에서 Cookies와 Headers등을 확인하여 서버상태 및 디버깅에 활용할 수도 있다. 정말 엄청나게 좋은 도구인 것 같다.
이런식으로 요청에 대한 Header 또한 확인할 수 있으며 좌측에는 내가 요청했던 Api Call들이 히스토리 형식으로 저장돼 내가 언제 어떻게 Api Call을 했는지 확인할 수 있다. 종료하면 이 상태 그대로 저장되며 다음에 열 때 언제든 확인할 수 있다.
글을 쓰면서 알았는데 New창에서 Mock Server가 있는데 아마 가짜 API서버를 생성하여 API테스트를 진행할 수 있는 것 같다. 알면 알수록 좋은 툴이다. 다음에는 한번 좀 더 POSTMAN을 파봐야겠다. 진짜 디자인도 예쁘고 기능도 강력하고 알면 알수록 대단하고 좋은 도구 같다. 널리널리 알려졌으면 좋겠다.
'HTML/CSS/JS > JavaScript' 카테고리의 다른 글
[JavaScript/자바스크립트] 프로토타입(Prototype)에 대한 이해 (0) | 2019.03.25 |
---|---|
[JavaScript/자바스크립트] 숫자 천 단위마다 콤마 찍는 내장 함수(toLocaleString) (0) | 2019.03.10 |
[JavaScript/자바스크립트] 숫자를 만, 억, 조, 경 등 만 단위 한글로 찍기 + 자바스크립트 연산의 한계값 (6) | 2019.01.05 |
[JavaScript/자바스크립트] 콤마 찍혀있는 숫자를 정수형으로 변환해주는 함수 (0) | 2018.10.19 |
[JavaScript/자바스크립트] 숫자 천 단위마다 콤마 찍는 함수 (0) | 2018.10.18 |