자바스크립트 MIME 유형
MIME(Multipurpose Internet Mail Extensions)는 문서 유형과 확장자를 가리키고 파일의 기능을 나타내는 미디어 유형입니다.
기술적으로 웹 브라우저에서 웹 페이지 또는 콘텐츠를 로드할 때 서버에 여러 HTTP 요청을 보냅니다. 그리고 요청의 유효성에 따라 서버는 클라이언트, 즉 우리에게 해당 응답을 보냅니다.
로컬 PC에는 파일 이름이 있고 확장자가 나타납니다. 그러나 브라우저가 동일한 데이터를 처리하거나 요청을 통해 보낼 때 파일은 동일한 ID를 가지고 있지 않습니다.
보낼 때 기본 mime 유형이 추가되거나 원시 코드를 통해 추가해야 하는 경우도 있습니다.
mime 유형에는 Type/SubType과 같은 기본 구조가 있습니다. 여기서 유형은 텍스트, 이미지 또는 기타 파일인 경우 파일의 특성을 나타냅니다.
하위 유형에는 확장자가 포함됩니다. 브라우저는 mime 유형 없이 요청을 통해 전송된 파일을 처리합니다.
종종 mime 유형을 text/plain으로 설정하여 문제를 해결합니다.
이 기사에서는 요청 및 응답에 대한 mime 유형을 시각화하는 방법을 살펴봅니다. 이제 코드로 이동하여 더 나은 이해를 위해 미리 봅니다.
JavaScript의 경우 MIME 유형
mime 유형의 유효한 범위가 있으며 종종 경험을 개선하려는 개발자의 욕구에 따라 업데이트됩니다. JavaScript의 경우 기본 또는 가장 일반적으로 사용되는 mime 유형은 text/javascript입니다.
또한 JSON 및 기타 규칙에 대한 다양한 mime 유형이 있습니다.
여기 아래 코드에서 URL을 가져오고 요청이 서버에서 수락되면 응답을 받게 됩니다. 이와 관련하여 요청을 통해 전송된 문서의 mime 유형과 응답으로 수신된 데이터에 대한 mime 유형을 확인합니다.
코드 조각:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<button onclick="btn()">Mime</button>
<p id="mime"></p>
<script id="sc" src="mime.js"></script>
</body>
</html>
var mime = document.getElementById('mime')
function getData() {
url = 'https://dummy.restapiexample.com/api/v1/employee/1'
params = {
headers: {'Content-Type': 'application/json'}
} fetch(url, params)
.then((response) => {
return response.text();
})
.then((data) => {mime.innerHTML = data})
}
function btn() {
getData();
}
출력:
보시다시피 Mime 버튼을 클릭하면 요청이 주어진 URL에서 데이터를 가져오기 위해 이동했습니다. 가져오기 위해 전송되는 동안 HTML은 text/html로, JavaScript는 text/javascript로 사용됩니다.
그러나 응답을 받았을 때 데이터는 JSON 형식이었습니다. 따라서 응답 헤더는 application/json에 작성되었습니다. 이것이 JavaScript에서 mime 유형을 보는 방법입니다.
또한 mime-types라는 패키지가 있으며 명령을 사용하여 로컬 PC에 설치할 수 있습니다.
npm install mime-types
그리고 나중에 mime.getType을 실행하여 특정 문서나 파일에 대한 세부 정보를 볼 수 있습니다. 다음 리디렉션은 mime의 문서로 연결됩니다.
