공통 레이아웃 사용시 js <script> 사용
290
작성한 질문수 6
학습하는 분들께 도움이 되고, 더 좋은 답변을 드릴 수 있도록 질문전에 다음을 꼭 확인해주세요.
1. 강의 내용과 관련된 질문을 남겨주세요.
2. 인프런의 질문 게시판과 자주 하는 질문(링크)을 먼저 확인해주세요.
(자주 하는 질문 링크: https://bit.ly/3fX6ygx)
3. 질문 잘하기 메뉴얼(링크)을 먼저 읽어주세요.
(질문 잘하기 메뉴얼 링크: https://bit.ly/2UfeqCG)
질문 시에는 위 내용은 삭제하고 다음 내용을 남겨주세요.
=========================================
[질문 템플릿]
1. 강의 내용과 관련된 질문인가요? (예/아니오)
2. 인프런의 질문 게시판과 자주 하는 질문에 없는 내용인가요? (예/아니오)
3. 질문 잘하기 메뉴얼을 읽어보셨나요? (예/아니오)
[질문 내용]
여기에 질문 내용을 남겨주세요.
안녕하세요.
레이아웃 구성시
base.html-> 공통파일
개별 페이지 -> <head>에서 title, script, link 넘겨서 페이지별로 추가 구성
이런식으로 사용하고 있는 중 인데 한가지 궁금한 점이 있습니다. <head> </head> 태그 안에 있는 <title> <link> <script> 태그들만 들어가는게 아니라 전체 페이지에 있는
<script> 태그가 다 넘어가는 건가요?
혹시 이 방식을 사용하면서 개별 페이지에서 <script></script>를 추가해서 사용하는 방식은 없을까요..?
강의 내용에선 layoutMain.html 파일에서
<head></head> 안이 아닌 다른 영역에
<script></script> 를 따로 써서 이 페이지에서만 쓸 수 있는 스크립트를 작성할 수 있는지 궁금합니다...!
답변 1
1
안녕하세요, 인프런 AI 인턴입니다.
박준일님의 질문에 답변드리겠습니다.
Thymeleaf를 사용한 레이아웃에서 개별 페이지에 특정 스크립트를 추가하는 방법은 th:block 또는 th:fragment를 활용하는 것이 일반적입니다. <head> 태그 내에 공통 요소(예: 공통 스크립트, 스타일링 등)를 includ 하는 것과 별도로, 개별 페이지 별로 필요한 스크립트를 정의할 수 있는 영역을 마련해주면 됩니다.
공통 레이아웃 파일인 layoutMain.html에서는 <head> 태그 바깥에 th:block이나 th:fragment를 통해 각 페이지에서만 실행될 스크립트를 둘 수 있는 공간을 생성합니다. 예를 들어 다음과 같이 설정할 수 있습니다:
<!-- layoutMain.html -->
<html>
<head>
<!-- 공통되는 head 부분 -->
</head>
<body>
<th:block th:replace="fragments/commonScript"></th:block>
<th:block th:fragment="customScript">
<!-- 이 안에 개별 페이지에서 사용하는 스크립트를 작성하면 됩니다. -->
</th:block>
<!-- 페이지의 나머지 내용 -->
</body>
</html>
그리고 개별 페이지에서는 해당 th:fragment를 override 하여 원하는 스크립트를 삽입할 수 있습니다:
<!-- signup.html -->
<html>
<head>
<title>회원가입 페이지</title>
<th:block th:replace="~/layoutMain.html :: customScript">
<script>
// 이 페이지에서만 필요한 스크립트를 여기에 작성합니다.
</script>
</th:block>
</head>
<body>
<!-- 페이지의 나머지 내용 -->
</body>
</html>
이와 같은 방식을 사용하면, 각 페이지마다 필요한 스크립트를 <head> 태그 내가 아닌 별도의 영역에 삽입하여 관리할 수 있습니다.
참고로, 각 페이지에 추가될 스크립트를 <head> 내에 작성할 경우에도 th:if 문으로 조건을 확인하여 동적으로 스크립트를 추가하는 방식도 있습니다만, <head> 바깥쪽에 작성하는 방식이 더 명확하게 구별하여 관리할 수 있다는 장점이 있습니다.
이미지 업로드와 db 트랜잭션 묶는법
0
43
1
Could not resolve org.springframework.boot:spring-boot-starter-validation:2.4.4
0
53
2
MessageSourceTest 코드
0
48
1
인터셉터 에러 설정
0
48
1
resolveArgument()메서드 질문
0
57
1
43강 검증1 에서 실패 로직 관련 질문있습니다.
0
57
2
타임리프 3.X 버전 rendering, serializer 에러 해결 방법
2
133
3
스프링 빈에 등록이 안되는거 같은데 어떻게 하면 좋을까요?ㅠㅠ
0
90
3
pdf 오타 문의
0
57
1
ItemUpdateForm 검증 관련 질문입니다.
0
49
1
22page 링크 주소 변경
0
59
2
특정 데이터와 파일을 함께 저장 시, 테이블 구조 질문
0
53
1
섹션3번 수업에 대한 질문입니다.
0
80
2
@Autowired 보다 더 좋은 방법이 어떤 걸까요?
0
85
2
타입컨버터 가 람다랑 비슷해 보이는데 저의 생각이 맞는지?.
0
65
1
자바스크립트 인라인에서 객체 직렬화 시 오류가 납니다
0
142
3
스프링부트 - 오류페이지2 에서 500.html 에서 쓰인 객체 질문
0
63
1
톰캣 에러 페이지가 안보입니다.
0
104
2
apiEceptionController에서 센드 에러 호출하면 안되는지?
0
81
1
세션 타임아웃시 쿠키 삭제 방법이 없나요?
0
118
2
ApiExceptionController 질문드립니다.
0
64
1
셀렉박스 챕터에서 option value에 ==배송 방식 선택== 이것을 넣은 이유가 궁금함, 이렇게 구상해도 되는지?
0
66
1
MemberRepository 필드의 fianl 선언 유무
0
85
2
혹시 index.html 에서는 fragment 사용이 안되는건가요
0
58
1