VSCode에서 .http 파일 사용하기

필요한 확장 프로그램 설치

VSCode에서 .http 파일을 사용하려면 먼저 확장 프로그램을 설치해야 합니다. 가장 널리 사용되는 두 가지 옵션이 있습니다:

REST Client (Huachao Mao 제작) - 가장 인기 있고 추천하는 확장 프로그램입니다. VSCode 마켓플레이스에서 "REST Client"를 검색하여 설치하면 됩니다.

HTTP Client (VSCode 내장) - 최근 버전의 VSCode에는 기본 HTTP 클라이언트 기능이 내장되어 있을 수 있습니다.

기본 사용법

.http 파일 생성하기

프로젝트에서 새 파일을 만들고 .http 또는 .rest 확장자로 저장합니다. 예를 들어 api-test.http와 같은 이름으로 파일을 생성합니다.

간단한 GET 요청 예제

GET https://jsonplaceholder.typicode.com/posts/1

파일에 위 코드를 입력하면 요청 위에 "Send Request"라는 링크가 나타납니다. 이를 클릭하면 요청이 실행되고 새 탭에서 응답을 확인할 수 있습니다.

다양한 HTTP 메서드 사용

POST 요청 (JSON 데이터 포함)

POST https://jsonplaceholder.typicode.com/posts
Content-Type: application/json

{
  "title": "foo",
  "body": "bar",
  "userId": 1
}

PUT 요청

PUT https://jsonplaceholder.typicode.com/posts/1
Content-Type: application/json

{
  "id": 1,
  "title": "updated title",
  "body": "updated body",
  "userId": 1
}

DELETE 요청

DELETE https://jsonplaceholder.typicode.com/posts/1

여러 요청을 한 파일에 작성하기

한 파일에 여러 요청을 작성할 때는 ###을 구분자로 사용합니다:

### 사용자 목록 조회
GET https://jsonplaceholder.typicode.com/users

### 특정 사용자 조회
GET https://jsonplaceholder.typicode.com/users/1

### 새 게시물 생성
POST https://jsonplaceholder.typicode.com/posts
Content-Type: application/json

{
  "title": "New Post",
  "body": "This is content",
  "userId": 1
}

헤더 추가하기

인증 토큰이나 기타 헤더를 추가할 수 있습니다:

GET https://api.example.com/data
Authorization: Bearer your-token-here
Accept: application/json
User-Agent: MyApp/1.0

변수 사용하기

반복되는 값을 변수로 정의하여 재사용할 수 있습니다:

@baseUrl = https://jsonplaceholder.typicode.com
@token = your-auth-token-here

### 사용자 조회
GET {{baseUrl}}/users/1
Authorization: Bearer {{token}}

### 게시물 조회
GET {{baseUrl}}/posts/1
Authorization: Bearer {{token}}

환경별 변수 설정

프로젝트 루트에 http-client.env.json 파일을 생성하여 환경별로 다른 변수를 사용할 수 있습니다:

{
  "development": {
    "baseUrl": "http://localhost:3000",
    "token": "dev-token"
  },
  "production": {
    "baseUrl": "https://api.production.com",
    "token": "prod-token"
  }
}

그리고 .http 파일에서 이렇게 사용합니다:

GET {{baseUrl}}/api/users
Authorization: Bearer {{token}}

쿼리 파라미터 사용

GET https://api.example.com/search?q=vscode&limit=10&sort=desc

또는 여러 줄로 나눠서 작성할 수도 있습니다:

GET https://api.example.com/search
    ?q=vscode
    &limit=10
    &sort=desc

응답 저장 및 활용

REST Client 확장 프로그램을 사용하면 이전 요청의 응답을 변수로 저장하여 다음 요청에서 사용할 수 있습니다:

### 로그인하여 토큰 받기
# @name login
POST https://api.example.com/login
Content-Type: application/json

{
  "username": "user",
  "password": "pass"
}

### 받은 토큰으로 데이터 조회
@authToken = {{login.response.body.token}}

GET https://api.example.com/protected-data
Authorization: Bearer {{authToken}}

유용한 팁

단축키 사용하기 - 요청 라인에 커서를 두고 Ctrl+Alt+R (Windows/Linux) 또는 Cmd+Alt+R (Mac)을 눌러 빠르게 요청을 실행할 수 있습니다.

주석 추가하기 - # 또는 //를 사용하여 주석을 작성할 수 있습니다.

# 이것은 주석입니다
// 이것도 주석입니다
GET https://api.example.com/data

폼 데이터 전송 - application/x-www-form-urlencoded 형식으로 데이터를 보낼 수 있습니다:

POST https://api.example.com/form
Content-Type: application/x-www-form-urlencoded

name=John&[email protected]&age=30

이런 방식으로 .http 파일을 사용하면 Postman이나 다른 API 테스트 도구 없이도 VSCode 내에서 편리하게 API를 테스트하고 문서화할 수 있습니다. 특히 팀 프로젝트에서 .http 파일을 Git으로 관리하면 API 사용 예제를 공유하기에도 좋습니다.

jacking75/vscode_http_client.md

Select an option

No results found