웹 개발에 있어서 항상 데이터의 전송과 처리가 이루어진다. 사용자가 웹 페이지에서 폼을 작성하고 ‘제출’버튼을 클릭할 때 그 정보가 어떻게 서버까지 도달하는 지 생각해본적이 있는가? 이러한 데이터 전송의 핵심에는 ‘MIME타입’이라는 개념이 자리잡고 있다. 이 블로그에서는 특히 X-form 데이터(x-www-form-urlencoded)라는 MIME타입에 주목하여서 그 의미와 사용 방법을 알아보자.
🧐 왜 MIME타입을 사용할까??
MIME타입은 ‘Multipurpose Internet Mail Extensions’의 약자로 원래는 이메일에서 파일을 교환하기 위해 개발되었다. 사실 초기 웹구조에서는 주로 텍스트 기반의 콘텐츠가 중심이었다. 그러므로 콘텐츠 유형을 구분하는 것이 상대적으로 그렇게 복잡하지 않았다. 예를 들어, HTML, 텍스트, 간단한 이미지 등 몇 가지 기본적인 형식으로 제한되었기 때문에 문제가 되지 않았었다.
하지만 점점 시대가 발전함에 따라 네트워크 속도도 빨라지고 사용자의 요구는 기존 간단한 텍스트기반 서비스가 아닌 멀티미디어 서비스로 진화해가는 과정에서 기존 방식이 더 이상 서비스가 될 수 없었다. 그렇게 MIME표준이 개발되어 다양한 파일과 데이터 형식을 보다 효율적으로 처리할 수 있게 된 것이다.
점점 진화해가는 정보 타입
결국 웹의 발전과 함께 MIME타입은 HTML, HTTP 등과 같은 웹 표준의 일부로 통합되었다. 예를 들어 헤더에서 ‘Content-Type’ 필드는 전송되는 데이터의 MIME타입을 명시한다. 이러한 통합은 웹에서 데이터 형식을 일관되게 처리할 수 있게 도와주었다.
😉 MIME 타입의 구성
웹의 발전과 함께 MIME 타입은 ‘타입(Type)’ 과 ‘서브타입(SubType)’ 두 부분으로 구성되어 있는데, 이 구조는 인터넷 상에서 파일의 내용과 형식을 명확하게 식별하기 위해 설계되었다.
MIME타입은 아파치 톰캣(Apache Tomcat)과 같은 웹 서버 및 서블릿 컨테이너에서 중요한 역할을 한다. 아파치 톰캣에서 MIME 타입은 주로 다음과 같이 사용된다.
아파치 톰캣에서의 MIME타입 사용
1️⃣ webapp 폴더에서의 MIME 타입 사용
정적 파일의 경우, 개발자가 직접 HTTP 헤더를 설정할 필요는 없다. 대부분의 웹 서버 및 서블릿 컨테이너 이러한 정적 컨텐츠에 대해 자동으로 적절한 MIME타입을 결정하고 설정한다.
만약 ‘webapp/images’ 폴더에 ‘exanmple.jpg’ 파일이 있다고 가정할 때, 클라이언트가 이 이미지를 요청하면 아파치는 다음과 같은 HTTP헤더를 포함시켜 응답한다.
2️⃣ HttpServlet에서의 MIME타입 사용
‘HttpServlet’클래스에서 MIME 타입을 사용하는 일반적인 방법은 서블릿이 생성하는 컨텐츠의 타입을 설정하고 HttpServletResponse 객체에 담는 것이다. 서블릿은 HTTP 응답을 생성할 때 HttpeServletResponse 객체의 setContentType 메소드를 이용하여 이를 지정한다.
3️⃣ web.xml에서 MIME 타입 설정
web.xml은 요청이 아파치 톰캣으로 들어와서 문지기 역할을 하는 필터가 해야할 일의 목록을 저장하는 파일이다. 여기서 MIME타입에 Mapping된 정보를 토대로 서버가 클라이언트로 컨텐츠를 응답할 때 이를 참고해서 전송한다.
web.xml 내부에 구현된 MIME타입 매핑
즉, 요청시에 ‘.png’라는 파일 확장자를 가진 모든 파일에 대해 ‘image/png’라는 MIME 타입을 사용하도록 지시한다. 이러한 방식으로 웹 어플리케이션에서 MIME 타입을 활용하여 콘텐츠 타입을 명확하게 하고, 클라이언트가 이를 적절히 처리할 수 있도록 돕는다.
✌️ X-form 데이터 (x-www-form-urlencoded)
‘application/x-www-form-urlencoded' 는 웹 폼 데이터를 서버에 전송할 때 주로 사용되는 MIME 타입 중 하나이다. 이 형식은 HTML 폼 데이터를 인코딩하는 데 사용되며, 특히 간단한 텍스트 데이터를 전송할 때 적합하다.
🏗️ X-form 데이터의 작동방식
1️⃣ 데이터 인코딩
이 MIME 타입을 사용할 때, 폼 데이터는 이름-값 쌍으로 인코딩 된다. 각 쌍은 ‘&’로 구분되고, 각 이름과 값은 ‘=’로 연결된다.
2️⃣ 특수 문자 처리
공백은 ‘+’기호로 변환 되고, 다른 특수 문자는 포센트 인코딩 형식으로 (’%xx’ 형식)변환된다. 예를 들어, 사용자가 폼에 ‘name=John Doe&age=30’라고 입력했다면, 이 데이터는 x-from 데이터로 인코딩되어 ‘name=John+Doe&age=30’으로 서버에 전송된다.
🥰 웹 서버에서의 사용 예시
✍️ HTML에서의 폼 데이터 양식 구현
먼저 클라이언트로 부터 받을 정보를 x-form데이터로 받기 위해서는 <form>태그로 정보를 받을 양식을 구현한다.
<form> 태그 양식 예시
form 태그에서 해당 요청을 명시해야한다. 그래서 form 태그 내부에 method=’post’ 로 명시한다.
‘post’ 메서드는 HTTP 요청 본문(request body)에 데이터를 포함시켜 전송합니다. 요청 본문은 텍스트, JSON,XML, 바이너리 데이터 등 다양한 형식으로 전송할 수 있다.
form 태그안에서 사용되는 button은 자료를 모아 전송하는 기능으로 사용된다. 이때 타입을 ‘submit’으로 지정해야 된다.
웹 페이지에서의 모습
각 필드에 값을 넣고 회원가입을 클릭하면 자동으로 xform데이터 형식으로 만들어 보내게 된다.
바디 데이터로 전송된 x-form 데이터 확인
해당 페이지를 보는 방법
브라우저 개발자 도구 (f12) 👇
network 섹션 👇
name에서 가입페이지를 찾는다 전송이 성공적이였다면 파랑색 👇
payload섹션 👉 viewsource 클릭 🖱️
사용자에게 받은 정보를 x-form데이터 (키=값 형태) 로 전송된 것을 확인할 수 있다.
이렇게 데이터는 ‘key=value’의 형태의 쌍으로 서버에 전송된다. 이 폼에서는 ‘POST’메소드를 사용하므로, 해당 데이터는 요청의 본문인 바디데이터를 통해 전송이 된다. 이와 같은 형식을 x-form 데이터, ‘application/x-www-form-urlencoded’이라고 한다.
