Head tag에서 script를 작성하는 이유에 대해서 여쭤보고 싶습니다! (+ NextJS의 Head tag와 Script tag)

Question

안녕하세요. 조은님 :) 이번에 다크 모드 관련 내용을 수강하면서 head 태그를 작성하는 부분에서 작은 의문이 생겨 질문 드리게 되었습니다.    Q1. 이번 강의 중 다크모드 설정을 localStorage에서 가져오는 부분에서 head에서 script를 사용하는 이유에 대해서 알 수 있을까요?? fouc 문제를 막기위해서 저렇게 사용한다고 검색을 통해 알게 되었는데, 이 의도 맞을지 혹시 또 다른 이유가 있을지에 대해서 여쭤보고 싶습니다!   Q2. 이어지는 질문으로 관련해서 공부를 하다보니 NextJS에서 제공하는 Head tag와 Script tag가 있는 걸 알게 되었습니다. 혹시 해당 태그들을 사용하지 않고 순수 HTML로 작성하신 이유에 대해서 궁금증이 생겨 여쭤보고 싶습니다! 가능하다면 두 개의 차이점에 대해서도 여쭤보고 싶습니다!

hajoeun · Answer

우성님, 안녕하세요! 너무 좋은 질문들 남겨주셨네요. 하나씩 답변드려 볼게요.   A1. 다크모드 설정을 localStorage에서 가져오는 부분에서 head에서 script를 사용하는 이유 fouc 현상을 방지하기 위함이라고 보시는 게 맞습니다!   A2. NextJS에서 제공하는 Head tag와 Script tag를 사용하지 않고 순수 HTML로 작성하신 이유 Head 태그의 경우 Pages router에서 제공하는 컴포넌트로 알고 있어요. App router를 사용하는 저희 예제에서 사용하기에 적절하지 않은 컴포넌트 였습니다. Head 컴포넌트는 보통 메타데이터 설정을 위해 많이 사용합니다. 저희가 블로그를 Page router로 만들었더라도 Head 컴포넌트를 사용하지 않는 선택을 했을 것 같아요. Script 태그는 App Router에서도 제공하는 컴포넌트입니다. 하지만 Script 컴포넌트는 마치 Image 컴포넌트와 같은 역할을 하는 용도로 쓰입니다. 스크립트를 로드할 때 최적화를 하기 위해 쓰이죠. 저희가 구현한 HTML 순수 기능인 script 태그는 내부에서 자바스크립트 코드를 실행시키기 위해 쓴 경우라 상황이 조금 다르다고 볼 수 있을 것 같습니다.   좋은 질문 남겨주신 걸 보니 열심히 공부하고 계신 것 같아 너무 뿌듯합니다! 다른 질문이 있다면 또 편히 남겨주세요. 3, 4번 질문도 바로 답변 드릴게요!   감사합니다.