2022-04-04(월)

19.1 UI 레이아웃을 다루는 방법 : 헤더, 사이드바, 풋터 넣기

프론트엔드 개발
1단계 - 헤더를 분리한다.

페이지 레이아웃 - 분리 전

header
sidebar
content
footer

<html>
  <head> ... </head>
  <body>
    <div id="header"> ... </div>
    <div id="sidebar"> ... </div>
    <div id="content"> ... </div>
    <div id="footer"> ... </div>
    <script>
      ...
    </script>
  </body>
</html>

조각을 분리

javascript innerHTML execute script 검색

innerHTML 안에 있는 script 태그를 실행하는 방법

<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script>
$("#header").load("header.html")
</script>

var s = document.createElement("script");
s.innerHTML= "console.log('okok!')";

document.body.appendChild(s);

fetch("/header.html").then(function(response) {
	return response.text();
}).then(function(html) {
	document.querySelector("#header").innerHTML = html;
	var s = document.querySelector("#header").querySelector("script");
	console.log(s);
});

fetch("/header.html").then(function(response) {
	return response.text();
}).then(function(html) {
	document.querySelector("#header").innerHTML = html;
	var s = document.querySelector("#header").querySelector("script");
	document.body.appendChild(s); // 막내 자식으로 추가
});

fetch("/header.html").then(function(response) {
	return response.text();
}).then(function(html) {
	document.querySelector("#header").innerHTML = html;
	var s = document.querySelector("#header").querySelector("script");
	var s2 = document.createElement("script");
	s2.innerHTML = s.innerHTML;
	document.body.appendChild(s2); // 막내 자식으로 추가
});

보안때문에 script 태그를 자동으로 실행시키지 않는다

ResponseEntity ← Headers와 Body를 포함해서 넘긴다

HTTP 요청 ---> Spring Boot ---> 자바 객체

HTTP 응답 <--- Spring Boot <--- 자바 객체
JSON, XML, CSV

http 요청이 들어왔을 때 어떻게 해야 자바 객체로 받을 수 있는지

자바 객체를 응답하려면 어떻게 리턴해야 하는지

파일을 리턴할 때는 그냥 리턴하지 말고 ResponseEntity에 담아서 리턴

$("#header").load("header.html")

footer 만들기

css width 가변

19.2 UI 레이아웃을 다루는 방법 : 템플릿 페이지를 활용하기

템플림 페이지를 기준으로 콘텐트 페이지 넣기

http://localhost:8080/template/page1.html?content=board/index.html

Author And Source

이 문제에 관하여(2022-04-04(월)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@banana/2022-04-04월

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

2022-04-04(월)

페이지 레이아웃 - 분리 전

Author And Source

좋은 웹페이지 즐겨찾기