Visual Studio Code에서 REST 클라이언트 사용

프로젝트를 위한 새로운 서비스 또는 API를 테스트할 준비를 하는 것은 일반적인 요구 사항입니다. 일반적으로 우리는 PostMan에서 무언가를 생성하거나 터미널에서 바로 curl 명령을 실행합니다. 하지만 대신 소스 제어에서 프로젝트의 일부가 되는 작업을 수행할 수 있다면 정말 멋지지 않을까요? 여기에서 Visual Studio Code용 REST 클라이언트가 유용합니다.

REST Client extension by는 서비스 지향 환경에서 작업할 때 사용할 수 있는 단순해 보이지만 강력한 도구입니다. Visual Studio Code 내에서 API 끝점을 신속하게 호출하고 해당 호출을 쉽게 반복할 수 있습니다.

이 기사에서는 REST Client extension을 발견한 방법, 프로젝트에서 이를 사용하는 방법 및 새 API를 시험하는 데 사용하는 방법을 설명합니다.

저는 몇 년 전 .NET Oxford Meetup 이벤트에서 REST 클라이언트 플러그인을 처음 접했습니다. 제가 기억하기로는 발표자는 이를 사용하여 API 끝점을 빠르게 테스트하고 Visual Studio Code 내의 새 탭에서 응답을 확인했습니다. 너무 완벽하게 간단한 구현이어서 그날 밤 가서 설치했습니다. 인상적이었지만 최근까지 REST API 호출을 확인하기 위한 이동 도구로 Postman을 사용했습니다. 그것은 나에게 도움이 되었고 컬렉션을 설정하는 데 많은 시간을 투자했지만 최근에 설정을 약간 변경하고 싶었습니다.

이것은 내가 REST 클라이언트를 기억했을 때입니다. 내 VS Code 인스턴스에서 웹 요청을 빠르게 실행할 수 있다는 아이디어가 즉각적으로 끌렸습니다. 그래서 나는 그것이 모든 상자를 체크하는지 확인하기 위해 더 조사하기로 결정했습니다.

문제는 내가 체크하려고 했던 상자가 무엇이었느냐는 것입니다. 저는 정말 몇 가지 간단한 일을 달성하고 싶었습니다.

소스 제어에 내 호출을 추가합니다. 나는 그것들을 잃고 싶지 않으며 그것들을 한 번 이상 실행할 것입니다.

내 API 키를 보호합니다. 우리는 소스 제어에 있는 것을 원하지 않습니다!

소스 제어

그래서 이것은 간단합니다. 플러그인을 설치한 후에는 파일 확장명이 '.http'인 Visual Studio Code에서 파일을 만들고 열어야 합니다. 물론 API 호출을 소스 제어로 가져오면 API 키라는 매우 중요한 사항을 살펴봐야 합니다.

API 키 보안

제가 작업하는 대부분의 API는 인증이 필요하며 대부분의 경우에 해당됩니다. 소스 리포지토리(특히 공개 리포지토리)에 키를 저장하는 것은 좋지 않습니다. 이로 인해 호출을 수행하고 해당 API 키를 소스 제어로 확인하지 않는 방법에 대한 수수께끼가 생겼습니다.

다음 API 호출을 고려하는 경우:

curl --request POST \
  --url https://manage.kontent.ai/v2/projects/7af531c3-f4b9-4af6-8f9e-383f51ad3e4b/types \
  --header 'Authorization: Bearer ew0KICAiYWxnIjogIkhTMjU214ZIiwNCiAgInR5cCI6ICJKV1QiDQp9.ew08KICAianRpIjogImJhYzhkODIxMzI1NTRlNGZiNGQxMGQ5MzAFYNhNDZlZmQyIiwNC629iAgImlhdCI6ICIxNjE5NzcwODE5IiwNCiAgImV4cCI6ICIxOTY1MzcwODE5IiwNCiAgInByb2plY3RfaWQiOiAiY2MzODBiODg1OTcwMDFiMzQzZjUwMmE3Y2FkNmU4NjIiLA0KICAidmVyIjogIjIuMS4wIiwNCiAgInVpZCBCI6ICJ1c3JfMHZPTjBVTDFBQ2ZVOXNyYjVUczQyWSIsDQogICJhdWQiOiAibWFuYWdlLmtlbnRpY29jbG91ZC5jb20iDQp9.4-gWmqdw7eybaZu3YkwgpoDieZr8zS2cKMOqBMX-t_E' \
  --header 'Content-type: application/json'

  --data '
{
  "external_id": "article",
  "name": "Article",
  "codename": "article",
  "elements": [
    {
      "name": "Article title",
      "codename": "title",
      "type": "text"
    },
    {
      "name": "Article body",
      "codename": "body",
      "type": "rich_text"
    },
    {
      "name": "Author bio",
      "codename": "bio",
      "allowed_blocks": [
        "images",
        "text"
      ],
      "type": "rich_text"
    }
  ]
}’

훌륭합니다. 필요한 작업을 수행하지만 내 소스 제어에 해당 권한 부여 토큰을 저장하고 싶지 않은 경우 어떻게 해야 합니까?

(걱정하지 마세요. 위의 예시 키는 유효하지 않습니다 🤓)

변수 및 환경

이것은 변수와 환경이 REST 클라이언트 확장과 함께 제공되는 곳입니다. 이를 위해 settings.json 파일에 새 환경을 추가할 수 있습니다. 예를 들어 현재 작업 중인 프로젝트에는 다음이 있습니다.

    "rest-client.environmentVariables": {
        "$shared": {

        },
        "dev": {
            "project_id": "b82a...yeah-not-the-real-key...3a62",
            "preview_api": "ew0K...yeah-not-the-real-key...UeMk",
            "management_api": "ew0K...yeah-not-the-real-key...H4p0",
        },
        "prod": {
          "project_id": "db3f...yeah-not-the-real-key...a2f4",
          "preview_api": "ew0K...yeah-not-the-real-key...68ZI",
          "management_api": "ewto...yeah-not-the-real-key...oC3E",
      },
    },

이제 이러한 변수를 인라인으로 사용할 수 있으므로 초기 API 호출은 이제 다음과 같습니다.

curl --request POST \
  --url https://manage.kontent.ai/v2/projects/{{project_id}}/types \
  --header 'Authorization: Bearer {{management_api}}' \
  --header 'Content-type: application/json'

  --data '
{
  "external_id": "article",
  "name": "Article",
  "codename": "article",
  "elements": [
    {
      "name": "Article title",
      "codename": "title",
      "type": "text"
    },
    {
      "name": "Article body",
      "codename": "body",
      "type": "rich_text"
    },
    {
      "name": "Author bio",
      "codename": "bio",
      "allowed_blocks": [
        "images",
        "text"
      ],
      "type": "rich_text"
    }
  ]
}’

이는 읽기가 더 쉬울 뿐만 아니라 해당 API 키가 파일이나 프로젝트 전체에 저장되지 않아 소스 제어에서 제외됩니다.

확장 기능을 사용할 때 VS 코드에서 이러한 환경을 선택할 수 있으므로 쉽게 이동할 수 있습니다.

모두 마무리

REST 클라이언트 확장은 마음대로 사용할 수 있는 정말 유용한 도구입니다. 이 글에서 나는 그것이 할 수 있는 일의 표면만을 긁어봤을 뿐입니다. 잠시 시간을 내어 documentation in GitHub을 살펴보고 그것이 무엇을 할 수 있는지 알아볼 가치가 있습니다.

이 확장 기능으로 많은 시간을 절약할 수 있었고 VS Code를 사용하는 모든 사람에게 추천하고 싶은 기본 확장 목록에 포함되어 있다고 솔직히 말할 수 있습니다.