1. 오늘 브라우저의 DOMContentLoaded 이벤트에 대해 꼬리질문이 있었는데, async와 defer 질문을 넘어 script에 삽입되는 type 속성의 기본값에 대해 정리해야될 것 같다. 보통 생략하는 경우가 많은데, javascript랑 css말고도 ajax나 api연결시에도 사용한다고 되어있는데 일반 js에 삽입되는 type과는 다른 목적인 것 같다. 삽입되는 위치와 용도의 차이점이 뭘까? 알아보기론 Content-type 형태였음. 그리고 js MIME에 대해서도 정의해봐야할듯.
script에 삽입되는 type의 비교 (javascript)
<script>... </script> // (1) type 생략
<script type=“text/javascript”> ... </script> // (2)
<script type=“application/javascript”> ... </script> // (3)
<script language="javacript"></script> // 아주 초창기에 쓰인 것 지금은 쓰지 않음.1번 type 생략 (기본값)
script 태그에서 type을 생략할 경우 2번으로 재번역하여 반영됨.
구글 확인 결과, 보통 생략하지않고 2번으로 정의함.
2번 text/javascript
가장 범용적으로 사용되고 있는 예시, 👍 권장
3번 application/javascript
HTML5 지원, 최신 스펙. 하지만 지원하는 브라우저를 보았을 때 IE8이하에서는 지원이 안된다.
구글이나 여러 포털에서도 표준이라고 이걸 따르고 있지 않음.
✅ 참조
script - Mozilla
text/javascript 와 application/javascript 차이점
'text/javascript'VS'application/javascript' 어떤것을 사용해야 하는가?
MIME
Multipurpose Internet Mail Extensions의 약자, 파일 변환을 뜻함.
이메일과 함께 동봉할 파일을 텍스트 문자로 전환해서 이메일 시스템을 통해 전달하기 위해 개발되었기 때문에 이름에 아직 그 흔적이 남아있음. 현재는 웹을 통해서 여러 형태의 파일 전달하는데 쓰이고 있음.
Why?
MIME을 사용하기 전엔 UUEncode방식을 이용함. 이는 텍스트 파일을 주고받으며 ASCII코드로 공통 표준에 따르면 전달에 문제가 없었음. 하지만 곧 네트워크를 통해 바이너리 파일을 보내는 경우가 생김. 음악, 동영상, 워드 등의 문서를 말함.
텍스트 파일로의 변환을 인코딩(Encoding), 텍스트 파일을 바이너리 파일로 변환하는 과정을 디코딩(Decoding)이라함.
MIME으로 인코딩한 파일은 Content-type 정보를 파일 앞부분에 담게 됐음.
Content-Type
MIME 타입으로 변환된 문서의 종류를 알리는 항목.
클라이언트 브라우저로 어떤 자원을 보낼 때 웹서버는 일련의 HTTP헤더로 파일이나 자원을 포함하는 바이트의 Stream을 앞에 보낸다. 이 헤더는 클라이언트에게 웹 서버와 커뮤니케이션 세부사항을 묘사한다. 헤더에는 웹 서버의 소프트웨어의 타입, 서버 날짜와 시간, HTTP 프로토콜, 사용중인 커넥션 타입 등을 지정.
Content-Type: text/css
Content-Type: text/html
Content-Type: text/javascript
Content-Type: Application/jsonHTTP에서 왜 MIME과 Content-Type이 중요할까?
http.xls 파일이 있다고 하자, 이 파일의 확장자 xls만 보더라도 엑셀파일인 것을 알 수 있다. 하지만 HTTP 웹에서 확장자는 없다. 클라이언트 웹브라우저는 웹서버로부터 여러 리소스를 응답받았을 때 이 리소스가 뭔지 해석할 수있어야했다. 그래서 웹서버는 HTTP 응답 헤더에 Content-Type 항목을 두고 MIME 타입으로 기록하여 웹 브라우저는 각 리소스에 기록된 Content-Type을 체크하여 타입에 맞는 동작을 수행하고 표시하게 된다.
즉, Content-Type은 웹 리소스의 확장자 역할을 한다.
✅ 참조
MIME 타입
MIME-Type, Content-Type이란?
MIME 타입과 Content Type이란
