UI 업데이트를 통한 HTTP 동사 이해

여러 HTTP 동사의 중요성

1:17에 Tim은 기능적인 Postman 클론이 단순히 GET 요청만 지원해서는 안 되는 이유를 설명합니다. GET 메소드는 데이터를 검색하거나 서버의 상태에 영향을 주지 않고 서버에서 정보를 검색하는 데 사용되지만, 다른 HTTP 메소드인 POST, PUT 및 PATCH는 리소스를 수정하거나 새 리소스를 생성합니다.

예를 들어:

• POST 메소드는 지정된 위치에 새 리소스를 생성하기 위해 요청 데이터를 서버에 보냅니다.

• PUT 메소드는 지정된 위치에 전체 리소스를 대체하여 idempotent 요청으로 만듭니다.

• PATCH 메소드는 기존 리소스에 부분적인 수정을 허용합니다.

• DELETE 메소드는 지정된 리소스를 삭제합니다.

Tim은 이러한 HTTP 요청 메소드를 제대로 지원하면 Postman 클론이 REST API, RESTful API 및 기타 웹 서비스를 실제 요청 데이터 및 응답 본문 동작과 함께 처리할 수 있음을 보장한다고 언급합니다.

UI에 HTTP 동사 드롭다운 추가

Tim은 HTTP 동사 선택을 위한 드롭다운(콤보 박스)을 추가하기 위해 API 입력 상자의 크기를 조정하여 UI를 개선하기 시작합니다. 그는 HTTP 동사 선택을 새로 이름 짓고 현재 GET과 POST를 하드코딩합니다 (2:42).

Tim은 HTTP 동사가 HTTP 사양에 표준화되어 있으며 거의 ​​변경되지 않기 때문에 이것이 충분하다고 설명합니다. 정적 목록을 사용하면 불필요한 복잡성을 피할 수 있으며, 특히 TRACE, CONNECT 및 OPTIONS와 같은 동사가 기본 Postman 클론에는 거의 필요하지 않기 때문에 빠른 성능을 보장합니다.

드롭다운 동작 구성

중요한 UI 세부사항으로 Tim은 드롭다운 스타일을 드롭다운 목록으로 전환하여 사용자가 유효한 HTTP 요청 메소드만 선택할 수 있도록 한다고 설명합니다 (4:47). 이것은 오류를 방지하고 응용 프로그램이 선택된 동사를 정확히 해석할 수 있도록 보장합니다. 그것이 GET 요청, POST 요청, 또는 이후 PUT, PATCH, DELETE 요청이든 간에 상관없이.

그는 또한 레이아웃을 손상시키지 않고 DELETE 또는 PATCH와 같은 더 긴 동사를 수용할 수 있도록 드롭다운 너비를 조정합니다 (5:51–7:27). 이러한 세부 사항에 대한 관심은 전문 웹 응용 프로그램 UI를 보장합니다. 이는 설명적이며 동시에 기능적입니다.

본문 및 결과 탭 소개

7:57에 Tim은 요청 본문 입력 및 API 응답을 처리하기 위해 탭 컨트롤을 추가합니다. 이로 인하여 본문과 결과를 개별 탭으로 나눕니다:

• 본문 탭: 사용자가 JSON 데이터를 입력하여 POST 메소드나 PUT 요청을 통해 서버에 데이터를 보낼 수 있도록 합니다.

• 결과 탭: 서버가 반환한 응답 본문 및 HTTP 상태 코드 및 반환된 데이터를 표시합니다.

이 설계는 요청 본문의 민감한 데이터를 검색된 정보와 명확하게 분리하고 RESTful API에 대한 다양한 HTTP 메소드의 깔끔한 처리를 지원합니다 (8:00).

입력 및 출력 텍스트 상자 구분하기

Tim은 본문 텍스트 상자와 결과 텍스트 상자 간의 구분을 강조합니다 (12:16). 본문 텍스트는 사용자가 요청 데이터를 입력할 수 있도록 편집이 가능하지만 결과 텍스트는 서버의 응답을 우발적으로 수정하지 않도록 읽기 전용입니다.

그는 또한 명확성을 높이기 위해 결과 탭의 이름을 "Output"에서 Results로 변경합니다. 이 간단한 이름 지정은 HTTP 동사 목록을 더 직관적으로 만듭니다. 특히 여러 개의 동일한 요청이나 GET, PUT 및 DELETE와 같은 idempotent 메소드를 처리할 때 유용합니다 (12:44).

GET 요청 테스트하기

Tim은 GET 요청으로 UI가 올바르게 작동하는 것을 시연합니다. URL을 붙여넣고 GET을 선택함으로써 사용자는 서버에서 데이터를 가져오게 됩니다. 이 데이터는 결과 탭에 나타납니다. 이 과정은 웹 응용 프로그램이 웹 페이지나 웹 서비스와 상호작용하여 정보를 검색하거나 리소스가 존재하는지 확인하는 방식을 반영합니다 (13:22).

그는 여러 GET 요청 혹은 동일한 GET 요청을 반복하는 것이 리소스의 상태가 변경되지 않았다면 동일한 정보를 검색할 것이라고 지적하며, 이는 GET의 안전한 메소드 특성을 강조합니다 (14:00).

정리 및 기본값 설정

14:34에 Tim은 드롭다운을 정리하고 기본 선택을 GET으로 설정합니다 (16:05). 이것은 사용자가 즉시 유효한 HTTP 요청 메소드를 볼 수 있게 하여 혼란을 방지합니다.

또한 사용자가 "Go"를 클릭하면 응용 프로그램이 자동으로 결과 탭으로 전환하여 매끄러운 경험을 제공합니다. 이는 여러 번 요청 처리 시나리오를 처리하며 여러 동일한 요청이 일관된 응답 본문을 생성하도록 보장합니다 (17:02).

POST 요청 준비

Tim은 UI가 지금은 GET 및 POST를 지원하지만, 실제로 POST 메소드를 통해 데이터를 보내는 기능은 여전히 구현이 필요하다고 설명합니다. 본문 탭을 통해 사용자는 요청 데이터를 입력하여 POST 요청, PUT 요청 또는 PATCH 요청을 시뮬레이션하여 기존 리소스를 수정하거나 지정된 위치에 새 리소스를 생성할 수 있습니다.

그는 학습자에게 이것을 실습 도전 과제로 사용하고 JSONPlaceholder와 같은 서비스와 테스트하여 JSON 요청 본문으로 실험해 보도록 격려합니다. 이 서비스는 GET 및 POST 요청을 연습할 수 있도록 지원합니다 (20:11).

핵심 요약

Tim Corey의 비디오는 웹 응용 프로그램에서 HTTP 동사와 HTTP 요청 메소드를 이해하는 것의 중요성을 강조합니다:

• GET 메소드: 서버의 상태를 변경하지 않고 데이터를 서버에서 검색합니다.

• POST 메소드: 새 리소스를 생성하기 위해 데이터를 서버로 보냅니다.

• PUT 메소드: 전체 리소스를 대체합니다 (idempotent 요청).

• PATCH 메소드: 기존 리소스에 부분적인 수정을 적용합니다.

• DELETE 메소드: 지정된 리소스를 제거합니다.

• HEAD, OPTIONS, TRACE, CONNECT 메소드: 메타데이터, 통신 옵션, 또는 메시지 루프백 테스트 기능을 제공합니다.

Tim의 접근 방식은 잘 설계된 UI가 HTTP 동사 목록을 직관적으로 만들고, 안전한 메소드와 idempotent 메소드를 모두 지원하며, 응용 프로그램이 REST API 및 RESTful API를 신뢰할 수 있게 처리하도록 준비시킵니다. 요청 본문, 결과 및 동사 선택을 분리함으로써 Postman 클론은 웹 서비스를 테스트하고 실제 응용 프로그램에서 하이퍼텍스트 전송 프로토콜을 이해하기 위한 실용적인 도구가 됩니다.