개발 중에는 API에 요청을 하는 것이 일반적입니다. 외부 API 또는 자체 백엔드 서버의 API에 대한 요청일 수 있습니다.
Postman과 같은 타사 도구를 사용하여 API 호출을 수행할 수 있습니다. 하지만 VS Code 확장 프로그램을 사용하면 VS Code 내에서 바로 API 호출을 수행할 수 있습니다. 여기서는 VS Code에서 API 요청을 수행하는 방법을 알아봅니다.
VS Code REST 클라이언트 확장
VS Code의 확장 기능은 Visual Studio Code 에디터의 기능을 향상시키는 플러그인 또는 애드온입니다. VS Code 확장 마켓플레이스에서는 프로그래밍 작업에 도움이 되는 여러 유형의 확장을 제공합니다. 언어 지원을 추가하기 위한 확장 프로그램이 있습니다. 특정 프로그래밍 언어에 대한 자동 완성 기능 등을 제공하는 확장 프로그램도 있습니다. 확장 프로그램을 사용하면 VS Code로 더 쉽게 프로그래밍할 수 있습니다.
REST 클라이언트 확장을 사용하면 VS Code 내에서 API 요청을 실행할 수 있습니다. 이 확장에는 API 엔드포인트를 쿼리할 수 있는 시각적 인터페이스인 REST API 편집기가 포함되어 있습니다. 사용자 지정 헤더, 쿼리 매개 변수 및 기타 매개 변수를 사용할 수 있습니다.
REST 클라이언트 을 설치하려면 VS Code를 열고 확장 탭을 클릭합니다. REST 클라이언트 을 검색하고 설치 버튼을 클릭하여 VS Code에 추가합니다.
세부 정보 탭 아래에서 클라이언트를 사용하여 API 요청을 하는 방법에 대한 유용한 튜토리얼을 찾을 수 있습니다. 네 가지 일반적인 요청 유형과 REST 클라이언트 확장 프로그램을 사용하여 요청하는 방법을 살펴보세요.
JSONPlaceholder 을 사용하여 REST 클라이언트 확장을 사용하여 API 호출을 만드는 방법을 보여드리겠습니다. API 요청을 통해 읽고, 편집하고, 업데이트하거나 삭제할 수 있는 6가지 공통 리소스를 제공합니다.
REST 클라이언트 확장을 사용하여 GET 요청 만들기
API 요청을 위한 .http 파일을 만드는 것으로 시작하세요. 파일 이름은 myrequests.http 로 지정할 수 있습니다.
myrequests.http 파일에 다음 코드를 추가하여 ID가 1인 JSONPlaceholder API에서 리소스를 검색합니다:
GET https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1
요청을 보내려면 파일 상단에 표시되는 요청 보내기 버튼을 클릭합니다. 응답 세부 정보가 포함된 새 창이 열립니다.
VS 코드 내에서 GET 요청을 만드는 방법입니다.
REST 클라이언트 확장을 사용하여 POST 요청하기
일반적으로 새 리소스를 생성하기 위해 서버에 데이터를 게시하려는 경우 POST 요청을 합니다.
JSONPlaceholder API에서 새 리소스를 만들려면 myrequests.http 파일의 코드를 다음과 같이 바꿉니다:
POST https://jsonplaceholder.typicode.com/posts HTTP/1.1
Content-Type: "application/json"
{
"title": "foo",
"body": "bar",
"userId": 1
}
요청 보내기 버튼을 클릭하여 요청을 보냅니다. 그러면 응답 데이터가 포함된 새 창이 열립니다. 응답에는 HTTP/1.1 201 Created 메시지와 API 호출이 성공한 경우 다른 데이터와 함께 글의 ID가 표시됩니다.
{
"id": "101"
}
REST 클라이언트 확장을 사용하여 PUT 요청하기
서버의 데이터를 업데이트하려는 경우 PUT 요청을 수행합니다.
JSONPlaceholder API에서 기존 리소스를 업데이트하려면 myrequests.http 파일의 코드를 다음과 같이 바꿉니다:
PUT https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1
Content-Type: "application/json"
{
"title": "new foo",
"body": "new bar",
"userId": 1
}
요청을 전송하면 모의 서버에서 리소스가 업데이트되고 HTTP/1.1 200 OK 메시지를 받게 됩니다.
REST 클라이언트 확장을 사용하여 PATCH 요청하기
서버에서 지정된 리소스의 특정 필드 또는 속성을 수정하려는 경우 PATCH 요청을 합니다.
모의 서버에서 기존 리소스의 제목만 업데이트하려면 myrequests.http 파일의 코드를 다음과 같이 바꿉니다:
https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1
Content-Type: "application/json"
{
"title": "another foo"
}
요청을 수행하면 모의 서버에서 리소스 제목이 업데이트되고 리소스의 다른 데이터와 함께 HTTP/1.1 200 OK 메시지가 표시됩니다.
REST 클라이언트 확장을 사용하여 삭제 요청하기
서버에서 리소스를 삭제하려는 경우 삭제 요청을 합니다.
모의 서버에서 기존 리소스를 삭제하려면 myrequests.http 파일의 코드를 다음과 같이 바꿉니다:
DELETE https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1
여기서 Content-Type 은 필요하지 않으며 데이터 개체도 필요하지 않습니다. 요청을 보내고 리소스를 성공적으로 삭제하면 빈 객체가 포함된 HTTP/1.1 200 OK 응답을 받아야 합니다.
내부에서 바로 API 호출하기 VS 코드
이전에는 Postman과 같은 타사 도구를 사용하여 API 요청을 했을 수 있습니다. 이러한 도구는 잘 작동하지만 설정하는 데 시간이 걸립니다. 예를 들어, API 탐색기를 사용하려면 Postman 계정이 있어야 합니다.
여러 온라인 API 테스트 도구가 있지만 REST 클라이언트와 같은 확장 프로그램을 사용하면 API를 훨씬 더 빠르고 쉽게 테스트할 수 있습니다. VS 코드 편집기 내에서 바로 모든 API를 테스트할 수 있습니다. 로컬에서 API를 개발 중이고 로컬 API를 즉석에서 테스트하려는 경우 특히 유용합니다.
기타 API 테스트 VS 코드 확장
Rest 클라이언트는 사용하기 쉽습니다. 하지만 API를 테스트하기 위한 유일한 VS Code 확장 프로그램은 아닙니다. 다른 인기 있는 옵션으로는 Thunder Client, httpYak, httpBook 등이 있습니다.
Thunder Client는 API 요청을 간소화할 수 있는 시각적 API 편집기를 제공합니다. 물론 이러한 도구를 사용하려면 REST API가 무엇인지 알아야 합니다.