웹 양식 만들기: GET 요청에 대한 쉬운 이해

이 튜토리얼에서는 GET 메서드를 사용하여 양식 데이터를 수신하고 처리하는 방법을 배웁니다. 간단한 HTML 양식을 만들고 이 데이터가 주소를 통해 서버로 전송되는 방법을 살펴봅니다. GET 요청의 기본 사항에 대해 설명하고 Express.js에서 필요한 단계를 간략하게 설명합니다.

주요 요점

• 양식 데이터는 GET 메서드를 사용하여 서버로 전송할 수 있습니다.
• 전송된 데이터는 URL에 쿼리 매개변수로 나타납니다.
• 요청의 쿼리 매개변수에 간단히 액세스하여 추가 처리를 수행할 수 있습니다.

단계별 지침

먼저 HTML 양식을 만드는 것부터 시작합니다. 양식의 동작은 양식 데이터가 전송되는 위치를 지정하므로 매우 중요합니다.

간단한 양식을 만들려면 다음을 추가합니다:

양식의 액션에는 데이터가 전송될 경로(이 경우 /submitform)가 포함됩니다. GET 핸들러는 나중에 익스프레스 서버에서 정의할 것입니다. 입력에는 간단한 텍스트 필드를 사용합니다:

양식이 설정된 후에는 서버가 데이터를 수신할 준비가 되었는지 확인해야 합니다. 요청을 처리하기 위해 Express 서버에서 GET 메서드를 구성했는지 확인해야 합니다.

그런 다음 페이지를 새로고침하여 모든 것이 제대로 작동하는지 확인합니다. 텍스트 필드에 무언가를 입력하는 경우 제출 버튼이 없더라도 리턴 키를 눌러 양식을 제출할 수 있습니다.

양식을 제출하면 서버에서 데이터가 성공적으로 전송되었음을 확인하는 응답을 받게 됩니다.

여기에서 서버로 전송된 페이로드를 확인할 수 있습니다. 이 경우 URL에 Name 매개변수가 추가되었습니다.

이제 서버 코드에서 요청을 처리하는 데 필요한 해당 GET 핸들러를 살펴봅니다. 코드는 index.js 파일에 있습니다. 다음과 같이 핸들러를 정의합니다:

이제 요청.query에 액세스하여 서버 코드에서 쿼리 매개변수를 검색할 수 있습니다. GET 핸들러에서 이를 구현할 수도 있습니다.

양식을 다시 보내면 매개변수가 올바르게 반환되는 것을 확인할 수 있습니다. 서버를 변경할 때마다 서버를 다시 시작해야 합니다.

이름에 액세스하려면 request.query.Name 형식을 사용합니다. 양식에서 이름을 변경하는 경우 서버 코드에서도 매개변수가 조정되었는지 확인해야 합니다.

양식의 이름을 first_name으로 변경하면 요청된 매개변수는 다음과 같이 표시됩니다:

서버가 데이터를 올바르게 수신하고 출력하는 것을 확인할 수 있습니다:

이 기본 지식이 있으면 이제 수신된 데이터를 처리할 수 있습니다(예: 데이터베이스에 저장하거나 다른 곳에서 사용하거나 간단히 반환).

원하는 경우 수신된 데이터를 클라이언트로 다시 전송하여 에코 서버 역할을 할 수도 있습니다.

그러면 출력은 다음과 같이 보일 수 있습니다:

텍스트 필드에 특수 문자를 입력하면 서버가 이를 처리하여 적절하게 디코딩합니다. 사용자가 입력한 문자에 관계없이 출력이 정확하다는 것을 알 수 있습니다.

서버 프레임워크마다 인코딩을 처리하는 방식이 다르다는 점에 유의하세요. Express를 사용하는 경우 쿼리 매개변수의 디코딩은 일반적으로 이미 포함되어 있으므로 걱정할 필요가 없습니다.

이제 GET 요청 처리를 위한 기본 사항을 이해하셨으며, Express 프레임워크에서 쿼리 매개변수를 사용하는 방법도 살펴보았습니다. 다음에는 다른 구현이 필요한 POST 메서드에 대해 살펴보겠습니다.

요약

이 튜토리얼에서는 GET 메서드를 사용하여 간단한 웹 양식 애플리케이션을 만드는 방법을 배웠습니다. 이 과정에는 HTML 양식 설정, 양식 데이터를 익스프레스 서버로 전송하고 추가 처리를 위해 쿼리 매개변수를 검색하는 것이 포함됩니다. 또한 양식 데이터를 수신하고 응답하도록 서버를 올바르게 구성하는 방법도 살펴보았습니다.