[Daily Post] 230507

[Daily Post]는 매일매일 탐구한 내용을 간략하게 기록하는 포스트입니다.
따라서 정리되지 않은 내용과 추측을 포함하고 있을 수 있습니다.
더 체계적인 형식을 갖춘 글은 해당 카테고리의 포스트를 확인해주세요 :)

Daily Study

정확하게는 <body> tag가 끝나기 직전에 넣는 것이다. 그 이유는 다음과 같다
- web assets are loaded in order they appear in the DOM
  - if we place JS in head, it would work but slowly.
  - DOM에 있는 asset들이 다 load 된 후에 JS가 작동하는 것이 논리적으로 옳다. 반대로, JS는 asset들의 작동을 제어하기 때문에 asset이 load 되기 전에 JS는 작동을 시작할 수 없다.
쉽게 말해 HTML 파일에 나와있는 순서대로 web element가 로드 되는데,JS는 각 element 들의 기능과 작동을 담당하기 때문에 모든 web element가 로드 된 뒤에 제대로 된 기능을 수행할 수 있다. 그래서 html의 후반부에 해당하는 <body> tag가 끝나기 직전인 </body> 앞에 위치하는 것이 일반적이다.
- 단, html의 head에 넣어야 한다는 dependecy가 존재하는 경우에는 head에 위치해도 좋다

위에 적힌 바와 마찬가지로, DOM element는 순차적으로 load 된다. 그런데 CSS 파일이 load되지 않은 채로 element가 load 되면 원래 의도한 디자인 요소를 반영하지 않은 채로 element가 load 된다.
이렇게 디자인 없이 element가 load 되는 현상을 FOUC, Flash Of U라nstyled Contents 라고 한다.FOUC를 막기 위해 element를 설명하기 전에 style을 먼저 load하고자 head에 css 파일을 넣는 것이다.