화면 구현(템플릿 가져오기, 레이아웃 분리)

Spring boot

화면 구현(템플릿 가져오기, 레이아웃 분리)

yoooon1212 2024. 8. 6. 09:24

1. 템플릿 가져오기

작업 순서

1. 부트스트랩 활용하기
2. main.jsp 파일 생성

https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_template1

W3Schools online HTML editor

The W3Schools online code editor allows you to edit code and view the result in your browser

www.w3schools.com

우리가 생성한 서버에서 접근 방식을 호스명:포트번호:자원의 위치를 통해서 요청을 하였고

HTML 파일 형식으로 응답 받은 후 우리 로컬 프로그램인 웹 브라우저가 태그를 분석해서 렌더링 과정을 확인하였습니다.

SSR 렌더링을 하기 위해서 yml 설정 파일을 한번더 확인해 봅시다.

SSR(Server-Side Rendering)은 서버 측에서 HTML을 렌더링하는 방식을 의미합니다.
클라이언트(브라우저)가 웹 페이지에 접근할 때, 서버는 해당 페이지의 HTML을 완성하여 클라이언트에 전송합니다.

SSR의 주요 특징
초기 로딩 속도: 사용자가 처음으로 웹 페이지에 접근할 때, 완성된 HTML 페이지를 바로 받기 때문에
초기 로딩 속도가 빠릅니다.

SEO 최적화: 검색 엔진이 콘텐츠를 크롤링할 때, 완성된 HTML을 바로 볼 수 있기 때문에 SEO(검색 엔진 최적화)에 유리합니다.

서버 부하: 모든 페이지 렌더링 작업이 서버에서 이루어지기 때문에, 클라이언트의 하드웨어 사양에 관계없이 일관된 사용자 경험을 제공할 수 있습니다. 하지만, 이는 동시에 서버에 더 많은 부하를 줄 수 있습니다.

1-1. 레이아웃 설정

매번 헤더와 푸터를 작성하는 것은 매우 반복적인 작업 입니다.

파일을 header.jsp, footer.jsp 를 따로 재사용할 수 있도록 관리할 예정 입니다.

분할 레이아웃 설정

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap 4 Website Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
  <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
  <style>
  .fakeimg {
    height: 200px;
    background: #aaa;
  }
  </style>
</head>
<body>

<div class="jumbotron text-center" style="margin-bottom:0">
  <h1>My Bank</h1>
  <p>마이바이티스를 활용한 스프링 부트 앱 만들어보기</p> 
</div>

<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>    
    </ul>
  </div>  
</nav>

<div class="container" style="margin-top:30px">
  <div class="row">
    <div class="col-sm-4">
      <h2>About Me</h2>
      <h5>Photo of me:</h5>
      <div class="fakeimg">Fake Image</div>
      <p>Some text about me in culpa qui officia deserunt mollit anim..</p>
      <h3>Some Links</h3>
      <p>Lorem ipsum dolor sit ame.</p>
      <ul class="nav nav-pills flex-column">
        <li class="nav-item">
          <a class="nav-link active" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <hr class="d-sm-none">
    </div>
    <!-- end of header.jsp  -->
    	
    <!-- start of content.jsp(xxx.jsp)   -->	
    <div class="col-sm-8">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Dec 7, 2017</h5>
      <div class="fakeimg">Fake Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
      <br>
      <h2>TITLE HEADING</h2>
      <h5>Title description, Sep 2, 2017</h5>
      <div class="fakeimg">Fake Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
  </div>
</div>
<!-- end of content.jsp(xxx.jsp)   -->

<!--  start of footer.jsp  -->
<div class="jumbotron text-center" style="margin-bottom:0">
  <p>Footer</p>
</div>
<!--  end of footer.jsp  -->

</body>
</html>

2. 레이아웃 분리

재사용 가능한 파일로 분리 하기

1. layout/header.jsp
2. layout/footer.jsp
3. view/mainPage.jsp(JSP 태그 추가)
4. JSP 태그

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>myBank</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/common.css">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.7.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>
</head>

<body>
	<div class="m--flex-container">
		<div class="m--container">
			<div class="jumbotron text-center m--banner-img" style="margin-bottom: 0">
				<h1>My Bank</h1>
				<p>마이바이티스를 활용한 스프링 부트 앱 만들어보기</p>
			</div>
			<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
				<a class="navbar-brand" href="#">Navbar</a>
				<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
					<span class="navbar-toggler-icon"></span>
				</button>
				<div class="collapse navbar-collapse" id="collapsibleNavbar">
					<ul class="navbar-nav">
						<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
						<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
						<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
					</ul>
				</div>
			</nav>

			<div class="container" style="margin-top: 30px">
				<div class="row">
					<div class="col-sm-4">
						<h2>About Me</h2>
						<h5>Photo of me:</h5>
						<div class="m--profile"></div>
						<p>코린이 개발을 위한 뱅크 앱</p>
						<h3>Some Links</h3>
						<p>Lorem ipsum dolor sit ame.</p>
						<ul class="nav nav-pills flex-column">
							<li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
							<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
							<li class="nav-item"><a class="nav-link" href="#">Link</a></li>
							<li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
						</ul>
						<hr class="d-sm-none">
					</div>
					<!-- end of header.jsp  -->

footer.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!--  start of footer.jsp  -->
<div class="jumbotron text-center" style="margin-bottom: 0">
	<p>Footer</p>
</div>
</div>
</div>

</body>
</html>
<!--  end of footer.jsp  -->

main.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
	
	<!-- header.jsp  -->
	<%@ include file="/WEB-INF/view/layout/header.jsp" %>	
    	
    <!-- start of content.jsp(xxx.jsp)   -->	
    <div class="col-sm-8">
      <h2>TITLE HEADING</h2>
      <h5>Title description, Dec 7, 2017</h5>
      <div class="fakeimg">Fake Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
      <br>
      <h2>TITLE HEADING</h2>
      <h5>Title description, Sep 2, 2017</h5>
      <div class="fakeimg">Fake Image</div>
      <p>Some text..</p>
      <p>Sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
    </div>
  </div>
</div>
<!-- end of content.jsp(xxx.jsp)   -->

<!-- footer.jsp  -->
<%@ include file="/WEB-INF/view/layout/footer.jsp" %>

JSP(JavaServer Pages) 태그는 JSP 파일 내에서 동적인 웹 페이지를 생성하기 위해 사용되는 특별한 코드 조각입니다. JSP 태그는 HTML 태그 내에 삽입되어 서버에서 실행되며, 페이지가 사용자에게 전송되기 전에 서버에서 HTML로 변환됩니다. JSP 태그는 크게 다음과 같은 대표적인 부분들로 나뉩니다.

1. 지시자(Directives)

<%@ directive attribute="value" %> 형식으로 사용됩니다.
JSP 페이지에 대한 설정 정보를 제공합니다. 가장 흔히 사용되는 지시자는 page, include, **taglib**입니다.
- page: 페이지에 대한 정보를 정의하며, 언어, 에러 페이지, 버퍼 크기 등을 설정할 수 있습니다.
- include: 다른 파일의 내용을 현재 JSP 페이지에 포함시킵니다.
- taglib: 태그 라이브러리를 페이지에 연결하여 사용자 정의 태그를 사용할 수 있게 합니다.

2. 스크립트 요소(Scripting Elements)

동적인 컨텐츠를 생성하기 위한 Java 코드를 JSP 페이지에 삽입할 수 있게 해줍니다.
- 표현식(Expressions): <%= expression %> 형태로, 식의 결과를 문자열로 변환하여 출력합니다.
- 스크립틀릿(Scriptlets): <% code %> 형태로, 임의의 Java 코드를 실행할 수 있습니다.
- 선언(Declarations): <%! code %> 형태로, 메서드나 변수 등을 JSP 페이지에 선언할 수 있습니다.

3. 액션 태그(Action Tags)

JSP 페이지에서 애플리케이션 로직을 수행하기 위한 빌트인 액션을 정의합니다.
- <jsp:forward>: 현재 페이지에서 다른 페이지로 요청을 전달합니다.
- <jsp:include>: 다른 페이지의 출력을 현재 페이지에 포함시킵니다.
- <jsp:useBean>, <jsp:setProperty>, <jsp:getProperty>: JavaBean 컴포넌트를 사용하여 속성을 설정하거나 값을 가져옵니다.

4. 사용자 정의 태그(Custom Tags)

개발자가 직접 태그를 정의하여 사용할 수 있게 해줍니다. 이를 위해 taglib 지시자로 태그 라이브러리를 선언한 후 사용합니다.
재사용 가능한 컴포넌트나 복잡한 출력을 생성하는 데 유용합니다.

JSP 태그를 사용함으로써, Java 코드와 HTML을 분리하여 웹 페이지를 더 쉽게 관리하고, 유지보수할 수 있습니다. 사용자 정의 태그와 태그 라이브러리를 사용하면 재사용 가능한 웹 컴포넌트를 생성하여 웹 애플리케이션 개발의 효율성을 높일 수 있습니다.