vs code의 확장 프로그램으로 다운받아 사용,
파일 내부에서 HTTP요청을 작성하고 실행 할 수 있다.
1. 설치하기
2. HTTP요청 작성 방법
.HTTP 확장자로 갖는 파일을 생성
2-1. GET 요청 작성하기
요청 메소드와 URI을 작성 (HTTP/1.1 은 생략 가능)
GET https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1
위와 같은 라인을 요청 라인 이라고 하며, 요청라인 작성하면 아래와 같이 send Request버튼이 생성된다.
send Request를 클릭하면 REST Clinet 가 VS Code 내부에서 직접 URI에 요청하여 응답 결과를 보여주어, 새로운 탭에서 http Response를 확인 할 수 있다.
2-2. POST 요청 작성하기
여러개의 요청을 작성 시 요청과 요청 사이는 구분자 ###을 추가하여 구분한다.
GET https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1
###
POST 요청 메소드와 URL 작성
POST https://jsonplaceholder.typicode.com/posts HTTP/1.1
Content-Type: application/json; charset=UTF-8
{
"name": "sample",
"time": "Wed, 21 Oct 2015 18:27:50 GMT"
}
2-3. PUT/PATCH 요청 작성하기
PUT 메소드는 리소스 전체를 업데이트 할 때 사용
PATCH 메소드는 리소스의 일부분을 업데이트 할 때 사용
### 업데이트 요청
PUT https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1
Content-Type: application/json; charset=UTF-8
{
"id": 1,
"title": "Updated Title",
"body": "Updated Body",
"userId": 1
}
### 패치 요청
PATCH https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1
Content-Type: application/json; charset=UTF-8
{
"title": "Patched Title"
}
구분자 ### 뒤에 요청에 대한 설명을 주석처럼 작성할 수 있다.
2-4. DELETE 요청 작성하기
### 삭제 요청
DELETE https://jsonplaceholder.typicode.com/posts/1 HTTP/1.1
3. 상세 작성 방법
3-1. 요청 헤더 (Request Header)
HTTP요청 해더는 요청 라인 바로 아래줄 부터 작성하며,
해더명 : 값의 형태로 작성로 작성한다.
여러 개의 해더를 설정 하려면 개행으로 구분한다.
POST https://jsonplaceholder.typicode.com/posts HTTP/1.1
User-Agent: rest-client
Accept-Language: en-GB,en-US;q=0.8,en;q=0.6,zh-CN;q=0.4
Content-Type: application/json
Authorization: bearer abcdef...
3-2. 요청 바디(Request Body)
요청 바디는 요청 라인 혹은요청 헤더로부터 1개의 개행 간격을 두고 작성한다.
Contetn-type에 따라 Body의 형태도 달라질 수 있다.
JSON Body
(생략)
Content-Type: application/json
{
"foo": "bar"
}
XML
(생략)
Content-Type: application/xml
<request>
<name>sample</name>
<time>Wed, 21 Oct 2015 18:27:50 GMT</time>
</request>
Multipart
(생략)
Content-Type: multipart/form-data; boundary=----WebKitFormBoundary7MA4YWxkTrZu0gW
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="text"
title
------WebKitFormBoundary7MA4YWxkTrZu0gW
Content-Disposition: form-data; name="image"; filename="1.png"
Content-Type: image/png
< ./1.png
------WebKitFormBoundary7MA4YWxkTrZu0gW--
Form Data(x-www-form-urlencode)
(생략)
Content-Type: application/x-www-form-urlencoded
name=foo
&password=bar
3-3. 쿼리 스트링(Query String)
GET https://jsonplaceholder.typicode.com/comments?postId=1 HTTP/1.1
요청 라인에 위와 같이 쿼리 스트링을 포함하여 전송 가능하다.
3-4. 파일 변수
@를 사용하여 파일 내에서 변수를 정의할 수 있으며, 정의된 변수의 값에 접근 할 때는
{ {변수명} } 형태로 작성 해 주면 된다.
@baseUrl = https://jsonplaceholder.typicode.com
@jwt = testjwt
GET {{baseUrl}}/posts HTTP/1.1
Authorization: bearer {{jwt}}
만약 변수가 정의되지 않은 경우 { {변수명} } 형식이 그대로 평문으로 사용된다.
3-5. 환경 변수
.vscode/setting.json에 REST Client에서 사용할 수 있는 환경변수를 따로 정의하여 사용 할 수 있다.
.vscode 라는 디렉토리를 생성하고 settings.json파일을 생성하여 아래와 같이 작성 한다.
{
"rest-client.environmentVariables": {
"$shared": {
"baseUrl": "https://jsonplaceholder.typicode.com",
"jwt": "testjwt"
},
"development": {
"title": "Development Title"
},
"production": {
"title": "Production Title"
}
}
}
/*
$shared에는 어떤 환경에서든 공유되는 환경변수 baseUrl 과 jwt 를 정의, development 와 production 이라는 환경을 따로 정의 한 다음 각 환경에서만 사용 될 title 변수를 정의.
*/
이 후 아래와 같은 요청 작성하여 요청 할 수 있다.
POST {{baseUrl}}/posts HTTP/1.1
Content-Type: application/json
Authorization: bearer {{jwt}}
{
"title": "{{title}}"
}
VS Code환경이 'No Environment'로 설정되어 있는 경우 오류가 날 수 있으므로 우측 하단 No Environment -> development 로 환경을 전환한다.
3-6 요청 변수
다른 요청의 응답을 변수에 담아 다른 요청에 사용
포스트 리스트를 불러와 리스트 첫번째 포스트의 title 과
Response Header의 content-type을 그대로 POST요청으로 보내는 예제를 작성
# @name getPost
GET https://jsonplaceholder.typicode.com/posts HTTP/1.1
### Create Post
POST https://jsonplaceholder.typicode.com/posts HTTP/1.1
Content-Type: application/json
{
"title": "{{getPost.response.body.$[0].title}}",
"content-type": "{{getPost.response.headers.Content-Type}}"
}
