개발 알다가도 모르겠네요

Content-type 번외편 본문

웹

Content-type 번외편

이재빵 2021. 7. 22. 17:15
728x90

개발자들이 어떤 정보를 나타내기 위해 흔히 쓰는 데이터 포맷으로는

JSON 뿐만 아니라 XML(Extensible Markup Language)이라고 하는 데이터 포맷도 있습니다.

XML을 한마디로 쉽게 이야기하자면, 태그를 사용해서 데이터를 나타내는 것입니다. 

{
   "name":"Michael Kim",
   "height":180,
   "weight":70,
   "hobbies":[
      "Basketball",
      "Listening to music"
   ]
}

Json방식에서 XML방식으로 바꾸게 되면 아래와 같이 됩니다.

<?xml version="1.0" encoding="UTF-8" ?>
<person>
    <name>Michael Kim</name>
    <height>180</height>
    <weight>70</weight>
    <hobbies>
        <value>Basketball</value>
        <value>Listening to music</value>
    </hobbies>
</person>

이런 식으로 시작 태그(<name>)와 끝 태그(</name>), 그리고 그 사이의 값으로 나타낸 것을 알 수 있습니다.

 

 

XML이라는 데이터 타입은 JSON이 2013년에 표준화되고 그 뒤로 활성화되기 전까지만 해도 정말 많이 사용되던 데이터 타입이었습니다.

XML을 쓸 때는 보통 스키마(Schema)라는 별도의 문서를 함께 사용합니다. XML은 데이터에 대한 엄격한 유효성(validity) 검증에 특화된 데이터 포맷이라고 할 수 있습니다.

하지만 XML은 같은 양의 데이터를 표현하더라도 JSON에 비해 더 많은 용량을 차지하고, JSON에 비해 가독성이 떨어지며, 배우기가 어렵다는 문제 등이 있습니다.

XML을 나타내는 Content-Type 헤더의 값은 'application/xml'입니다.

 

 

 

 

form 태그에서 사용되는 타입들

(1) application/x-www-form-urlencoded

이 타입은 우리가 HTML의 form 태그(<form></form>)를 사용할 때 종종 보게되는 타입입니다.

form 태그를 사용하면 자바스크립트 코드 없이 오로지 HTML만으로도 리퀘스트를 보내는 것이 가능합니다.

오늘날에는 form 태그를 사용하지 않고 자바스크립트 코드로 직접 사용자의 입력값을 취합해서 리퀘스트를 보내는 방법이 많이 사용되고 있지만 여전히 form 태그만으로 리퀘스트를 보내는 방식도 쓰이고는 있습니다.

form 태그는 기본적으로 application/x-www-form-urlencoded 타입의 데이터를 바디에 담아서 보냅니다.

 

{
  "id": 6,
  "name": "Jason",
  "age": 34,
  "department": "engineering"
}

Json방식에서 바꾸게 되면 아래와 같이 됩니다.

id=6&name=Jason&age=34&department=engineering

프로퍼티의 이름과 값을 "이름=값" 형식으로 나타내고 각각의 프로퍼티를 "&" 기호로 연결하는 방식으로 데이터를 표현합니다.

 

<body>
  <div id="signup">
    <p id="title">test</p> 
    <form action="/upload" method="get" enctype="application/x-www-urlencoded">
      <div>
        <div><span class="label">email</span></div>
        <input class="input" type="text" id="email" name="email">
      </div>
      <div>
        <div><span class="label">password</span></div>
        <input class="input" type="password" id="password" name="password">
      </div>
      <div>
        <div><span class="label">nickname</span></div>
        <input class="input" type="text" id="nickname" name="nickname">
      </div>
      <div>
        <input id="submit-btn" type="submit" value="Sign Up">
      </div>
    </form>
  </div>
</body>

form 태그의 method의 속성의 값으로 get이, enctype이라는 속성의 값으로 application/x-www-form-urlencoded라고 써있습니다. 이렇게 속성을 적으면, 나중에 이 form 태그가 리퀘스트를 보낼 때, 리퀘스트의 메소드를 GET으로 설정하고 사용자가 입력한 데이터를, URL의 쿼리 부분에 application/x-www-urlencoded 타입으로 넣습니다. 

다만 URL 안에서 미리 정해진 용도를 가진 특수 문자를 다른 용도로 사용하거나  '영어와 숫자'를 제외한 다른 나라 문자를 나타낼 때는

Percent encoding을 해주는 것이 정해진 규칙입니다.

 

 

 

 

 form 태그를 사용안하고  js로 직접 application/x-www-form-urlencdoed 타입의 데이터를 리퀘스트의 바디에 넣는 것도 가능합니다.

const urlencoded = new URLSearchParams();
urlencoded.append('email', 'test@naver.com');
urlencoded.append('password', 'test123!');
urlencoded.append('nickname', 'test!');

fetch('https://test.com/api/members', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: urlencoded,
})
  .then((response) => response.text())
  .then((result) => {
    console.log(result);
  });

 

multipart/form-data

지금까지 알아본 Content-Type 값들은, 하나의(Single) 데이터의 타입을 나타내는 값들이었습니다.

text/html, vidoe/mp4, application/json 등 모두 데이터 하나의 타입을 나타냈습니다. 

multipart/form-data는 여러 종류의 데이터를 하나로 합친 데이터를 의미하는 타입입니다.

 

예를 들어 게시판에 게시글을 올릴 때 글의 제목과 내용, 이미지 파일이나 영상 파일을 한꺼번에 첨부하는 것입니다. 

<body>
  <div id="signup">
    <p id="title">test</p> 
    <form action="/upload" method="post" enctype="multipart/form-data">
      <div>
        <input id="image" type="file" name="file" accept="image/*">
        <div id="profile">
          <div id="plus">+</div>
        </div>
       </div>
      <div>
        <div><span class="label">email</span></div>
        <input class="input" type="text" id="email" name="email">
      </div>
      <div>
        <div><span class="label">password</span></div>
        <input class="input" type="password" id="password" name="password">
      </div>
      <div>
        <div><span class="label">nickname</span></div>
        <input class="input" type="text" id="nickname" name="nickname">
      </div>
      <div>
        <input id="submit-btn" type="submit" value="Sign Up">
      </div>
    </form>
  </div>
</body>

자바스크립트 코드에서 multipart/form-data 타입의 데이터를 보내려면

 

const formData = new FormData();
formData.append('email', email.value);
formData.append('password', password.value);
formData.append('nickname', nickname.value);
formData.append('profile', image.files[0], "me.png");

fetch('https://test.com/api/members', {
  method: 'POST',
  body: formData,
})
  .then((response) => response.text())
  .then((result) => { console.log(result); });

FormData를 사용하면 리퀘스트의 Content-Type 헤더의 값을 multipart/form-data로 직접 설정하지 않아도 자동으로 설정해줍니다. 

 

'웹' 카테고리의 다른 글

Status Code를 알아보자.  (0) 2021.07.24
Ajax를 간단하게 알아보자  (0) 2021.07.24
Content-Type 헤더를 간단하게 알아보자  (0) 2021.07.22
PATCH와 HEAD를 간단하게 알아보자  (0) 2021.07.20
get 과 post 방식 정리  (0) 2021.05.03
'웹' Related Articles more