[Spring boot] Bank App - 화면 구현(레이아웃 분리)

728x90

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

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="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  -->

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>


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

view/mainPage.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" %>

4. 도전 과제 - JSP 태그 조사하기

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

1. 지시자(Directives)

형식: <%@ directive attribute="value" %>
주요 지시자:

page: 페이지 설정 (언어, 에러 페이지 등)

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

include: 다른 파일을 현재 페이지에 포함.

<%@ include file="header.jsp" %>

taglib: 사용자 정의 태그 라이브러리를 불러옴

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

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

표현식(Expressions): <%= expression %>
- Java 코드를 실행한 결과를 출력

<p>현재 시간: <%= new java.util.Date() %></p>

스크립틀릿(Scriptlets): <% code %>
- Java 코드를 JSP에 삽입

<% int count = 10; %>
<p>Count: <%= count %></p>

선언(Declarations): <%! code %>
- 클래스-level 변수나 메서드 선언

<%! int globalCount = 0; %>

3. 액션 태그(Action Tags)

JSP에서 제공하는 기본 태그로 작업 수행
- <jsp:include>: 다른 페이지의 내용을 현재 페이지에 포함
- <jsp:forward>: 요청을 다른 페이지로 전달
- <jsp:useBean>: JavaBean 객체 생성 및 초기화

<jsp:include page="header.jsp" />
<jsp:forward page="nextPage.jsp" />
<jsp:useBean id="user" class="com.example.User" scope="session" />

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

사용자 정의 태그는 JSP에서 개발자가 직접 만든 태그로, 반복적인 코드나 복잡한 로직을 캡슐화하여 재사용성과 유지보수성을 높이는 기능입니다.

특징

코드 재사용: 반복되는 HTML 구조나 로직을 한 번만 정의.
HTML과 Java 분리: JSP 코드가 간결해지고 가독성이 향상.
효율적인 개발: 재사용 가능한 컴포넌트를 쉽게 관리 가능.

구현 방법

태그 파일 생성
- 경로: /WEB-INF/tags/
- 예제: greeting.tag

<%@ tag language="java" pageEncoding="UTF-8" %>
<p>Hello, <strong>${param.name}</strong>!</p>

2. JSP에서 태그 사용

태그 라이브러리 선언 후 사용.

<%@ taglib prefix="my" tagdir="/WEB-INF/tags" %>
<my:greeting name="John" />

장점

재사용성: 코드 중복 제거.
가독성 향상: HTML과 로직 분리로 유지보수 용이.
효율성: 복잡한 컴포넌트도 간단히 사용 가능.

이번 작업을 통해 JSP에서 재사용 가능한 파일 분리, JSP 태그 활용, 사용자 정의 태그 생성의 중요성과 활용법을 다뤘습니다.
이런 접근법은 코드 중복을 줄이고, 유지보수성과 가독성을 크게 향상시키는 데 도움을 줍니다.

JSP 태그와 사용자 정의 태그를 적절히 활용하면 더 효율적이고 구조적인 웹 애플리케이션 개발이 가능합니다. 이제 이러한 기법을 활용해 다양한 프로젝트에서 더욱 생산적인 개발을 경험해보세요!

Bank App 이전 글이 보고싶다면?

[Spring boot] Bank App - 화면 구현(템플릿 가져오기)

💡 작업 순서1. 부트스트랩 활용 하기Bootstrap은 간단하게 UI를 구성할 수 있는 CSS 및 JavaScript 프레임워크입니다. 프로젝트에서 부트스트랩을 활용하여 반응형 웹 페이지를 빠르게 제작할 수 있

seohong.tistory.com

'Spring' 카테고리의 다른 글

[Spring boot] Bank App - Exception Handler (0)	2025.02.13
[Spring boot] Bank App - MainController, mainPage.jsp 구현 (2)	2025.01.15
[Spring boot] Bank App - 화면 구현(템플릿 가져오기) (0)	2025.01.15
[Spring boot] Bank App - 모델링 (1)	2025.01.14
[Spring boot] Bank App - 코딩 컨벤션 (0)	2025.01.14

4. 도전 과제 - JSP 태그 조사하기

1. 지시자(Directives)

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

3. 액션 태그(Action Tags)

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

특징

구현 방법

장점

'Spring' 카테고리의 다른 글

티스토리툴바