개발자
JSP파일의 <Script> 위치?
안녕하세요 저는 비전공자 it교육을 받고 현재 26개월정도 프로그래밍을 하고 있는 초급 개발자입니다. 현재 금융 프로젝트 개발을 진행하고 있으며 여느때와 다름없이 고급 선배분들의 경험치를 흡수하며 성장 중이었어요 사건은 작일 일어났습니다. 코드리뷰를 받던 중 JSP에 있는 <script>위치가 왜 html 밑에 선언이 되어있냐는 지적을 받게되었습니다. ???? 저는 지금까지 스크립트 태그가 body 밑에 선언이 되어있는 jsp파일들을 여러 봤었기도하며 배울때도 css html js 이런식으로 페이지 구성을 해야한다고 배웠던걸로 기억을 했습니다. 하지만 20년이 넘어가는 경력을 가지신 선배님이 자기는 그런식으로 코드를 짜는 사람은 지금까지 단한번도 본적이 없다고 선언하셨죠.. 그래서 코드리뷰를 받은 저는 현재 갈팡질팡 하고 있습니다.. 물론 js에 async와 defer 같은 기능들이 있지만 그런걸 사용은 안하고 있습니다. 구글링을 해보면서도 스크립트가 아래에 위치해야한다 스크립트가 아래에 위치하는건 옛말이다 등등 많은 글들이 많아 헷갈려서 여쭤봅니다. 솔직히 얘기하면 사용하는 방법에 따라서 둘다 틀린 말은 아닌 것 같지만 요즘은 jsp 파일을 구현할 때 어떤식으로 프로그래밍을 하시는지 궁금하네요
답변 1
"밑"이 위치를 나타내는건가요? 구조상 내부를 말씀하시는 건가요? 어떻게 사용하셨는지 예시를 주시면 이해하기 좋을 것 같습니다. <html> </html> <script> </script> 위와 같이 엘리먼트 위치가 html 엘리먼트 아래에 위치했다는 말씀이신지 <html> <body></body> <script></script> </html> 아니면 위와 같은 구조로 하셨다는 건가요?
강정구
작성자
코디더매니저 자바 개발자 • 2024년 06월 04일
죄송합니다. 제가 헷갈리게 말을 했네요.. 제가 쓴 구조는 아래와 같고 <html> </html> <script> </script> 선배님이 조언하신 구조는 아래와 같습니다. <script> </script> <html> </html>
장훈
Solution developer • 2024년 06월 04일
브라우저가 매우 유연하기 때문에 알려주신 구조 모두 문제가 없을 것 같은데 두 케이스 모두 일반적으로 <script>를 삽입하는 방법으로 잘 알려진 방법이 아닙니다. xss 공격에 취약하다는 점은 논외로 하고 일반적으로 <script>/*inline code*/<script>나 <script src="app.js"></script> 두 종류의 스크립트 엘리먼트는 <head>내에 위치시키거나 <body> 내부 가장 마지막에 삽입합니다. 잘 알려진 github 레포지터리의 예제 샘플들을 보면 다양한 위치에 <script>를 삽입하지만 보내주신 방법과 같이 쓰는 경우는 제 경험상 처음 보는 사용법입니다. <body>내에서 가장 마지막에 삽입 https://github.com/h5bp/html5-boilerplate/blob/main/dist/index.html <head>내에서 인라인 삽입 https://github.com/jquery/jquery/blob/main/test/index.html <head>내에서 src 삽입 https://github.com/facebook/react/blob/main/fixtures/dom/public/index.html 아마 내용을 잘못 알고 계시거나 코멘트를 잘못 작성해주신 것 같은데 <html></html><script></script> <script></script><html></html> 정말 위와 같은 방식을 사용하고 계셨거나 사용해야 한다고 들으셨다면 문제가 있어보입니다. jsp라고 크게 다를 것 같진 않습니다. 다만 page import 구문을 사용해서 재사용을 위해 파편화된 레이아웃을 동적로딩할 때, 분리된 각각의 jsp 파일의 내용이 완전한 html 구문이 아니라면 그럴 수도 있겠으나 이부분도 코드를 모르니 말씀드리기 어렵습니다. jsp는 서버 사이드 렌더링을 하기 위한 언어인데, <script> 구문을 실행하는 것은 결국 클라이언트 사이드(브라우저)입니다. HTML 표준에서도 script element에 대한 위치를 명시적으로 가이드하고 있는 것 같지는 않은데 깊이있게 찾아보기엔 한계가 있네요. 참고: https://html.spec.whatwg.org/multipage/scripting.html
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2024년 06월 03일
`<script>` 태그의 위치는 사실상 해당 스크립트가 언제 실행되어야 하는지에 따라 달라집니다. 전통적으로, `<script>` 태그는 HTML 문서의 `<head>` 섹션에 위치시켰습니다. 이렇게하면 페이지가 로드되기 전에 스크립트가 로드되고 실행됩니다. 그러나 이 방법의 단점은 페이지 로딩이 더 오래 걸릴 수 있고, 사용자는 페이지를 볼 수 없을 수 있다는 것입니다. 또한 현대 웹에서는 `<script>` 태그를 종종 HTML 문서의 `</body>` 태그 바로 앞에 위치시킵니다. 이렇게 하면 스크립트 실행이 페이지 로딩을 차단하지 않고, DOM이 완전히 생성된 후에 스크립트가 실행됩니다. `async`와 `defer` 옵션을 사용하면 `<head>`에 스크립트를 두면서도 브라우저가 페이지를 파싱하는 동안 스크립트를 비동기로 다운로드 받을 수 있어 웹 사이트 성능을 향상시킬 수 있습니다. 결론적으로, `<script>`태그의 위치는 여러 요인에 따라 결정될 수 있습니다: 스크립트가 얼마나 빠르게 실행되어야 하는지, 스크립트가 DOM 요소에 의존하는지, 그리고 페이지 로딩 속도를 얼마나 중요시하는지 등 상황에 따라 달라집니다. 그러므로 절대적인 정답은 없으며, 특정 상황과 요구 사항에 가장 잘 맞는 위치를 결정해야 합니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!