Spring boot

[Spring boot] Bank App 만들어 보기 - 17. 헤더 링크 설정 및 JSTL 태그 활용

ekkkang 2025. 3. 5. 15:38

 

💡 작업 순서
1. header.jsp 의 화면 수정과 링크 연결 작업
2. JSTL 개념 및 기본 태그 살펴 보기
3. JSTL 적용해 보기

 

1. header.jsp 의 화면 수정과 링크 연결 작업

아래 그림에 해당하는 부분들을 변경해 봅시다.

 

 

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<title>My Bank</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>
<link rel="stylesheet" href="/css/common.css">
</head>
<body>
	<div class="m-flex-container">
		<div class="m-container">
		<div class="jumbotron text-center banner-img" style="margin-bottom: 0">
			<h1>Tenco Bank</h1>
			<p>JSP, 마이바티스를 활용한 간단한 Bank 시스템 만들어 보기</p>
		</div>

		<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
			<a class="navbar-brand" href="/main-page">HOME</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="/user/sign-in">Sign in</a></li>
					<li class="nav-item"><a class="nav-link" href="/user/sign-up">Sign up</a></li>
					<li class="nav-item"><a class="nav-link" href="/user/logout">Logout</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>
					
					<h3>Some Links</h3>
					<p>계좌 목록,생성,출금,입금,이체 페이지를 사용할 수 있어요</p>
					<ul class="nav nav-pills flex-column text-left">
						<li class="nav-item">
							<a class="nav-link" href="/account/list">Account List</a>
						</li>
						<ul class="nav nav-pills flex-column text-left">
							<li class="nav-item"><a class="nav-link" href="/account/list">나의계좌목록</a></li>
							<li class="nav-item"><a class="nav-link" href="/account/save">신규계좌생성</a></li>
							<li class="nav-item"><a class="nav-link" href="/account/withdrawal">출금하기</a></li>
							<li class="nav-item"><a class="nav-link" href="/account/deposit">입금하기</a></li>
							<li class="nav-item"><a class="nav-link" href="/account/transfer">이체하기</a></li>
							</li>
						</ul>></li>
						</li>
					</ul>
					<hr class="d-sm-none">
				</div>
				<!-- end of header.jsp   -->

아직 AccountController 를 만들지 않았지만 미리 URI를 만들어 봅시다.

 

 

완성 화면 모습

 

 

2. JSTL 개념 및 기본 태그 살펴 보기

JSTL(JSP Standard Tag Library)은 JSP(JavaServer Pages)에서 사용할 수 있는 표준 태그 라이브러리 집합입니다. JSTL은 JSP 페이지 내에서 Java 코드를 직접 작성하는 대신에, 태그를 사용하여 반복문, 조건문, 국제화, XML 데이터 처리 등의 공통 작업을 보다 쉽게 수행할 수 있도록 도와줍니다. JSTL은 여러 개의 태그 라이브러리로 구성되어 있으며, 각 라이브러리는 특정 기능 집합을 제공합니다. 이 중에서 가장 기본적이고 널리 사용되는 라이브러리는 Core 라이브러리입니다.

 

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

: 사용 할 JSP 페이지에서 선언을 해 주어야 태그 라이브러리를 활용할 수 있습니다.

 

대표적인 Core 태그들

  • <c:out>: 변수의 값을 출력할 때 사용합니다. HTML 이스케이핑을 자동으로 처리합니다.
<c:out value="${message}" />
  • <c:set>: 변수에 값을 할당할 때 사용합니다.
<c:set var="count" value="10" />
  • <c:if>: 조건문을 처리할 때 사용합니다.
<c:if test="${count > 5}">
    Count is greater than 5.
</c:if>
  • <c:choose>, <c:when>, <c:otherwise>: 다중 조건 선택을 위해 사용합니다. switch 문과 유사합니다.
<c:choose>
    <c:when test="${count == 10}">
        Count is 10.
    </c:when>
    <c:when test="${count > 5}">
        Count is greater than 5.
    </c:when>
    <c:otherwise>
        Count is 5 or less.
    </c:otherwise>
</c:choose>
  • <c:forEach>: 반복문을 처리할 때 사용합니다. 컬렉션을 순회할 때 주로 사용됩니다.
<c:forEach var="item" items="${list}">
    <c:out value="${item}" />
</c:forEach>

JSTL Core 태그를 활용하면 JSP 페이지에서 Java 코드 없이도 로직을 구현할 수 있어, 페이지의 가독성과 유지 보수성이 크게 향상됩니다.

 

3. JSTL 적용해 보기

💡 JSP에서 서블릿으로 변환되는 과정

JSP 파일 로딩: 클라이언트로부터 HTTP 요청이 들어오면, 웹 서버는 해당 요청에 맞는 JSP 파일을 찾습니다. JSP 컴파일: 찾은 JSP 파일은 Java 서블릿으로 컴파일됩니다. 이 단계에서 JSP 파일은 순수한 Java 코드를 포함하는 .java 파일로 변환됩니다. 이 변환 과정은 JSP 엔진에 의해 수행됩니다. 서블릿 클래스 로딩 및 인스턴스 생성: 컴파일된 Java 파일은 .class 파일로 컴파일되고, 웹 서버에 의해 로딩되어 서블릿 인스턴스로 생성됩니다. 서블릿 실행: 서블릿 인스턴스가 생성되면, service() 메서드를 통해 클라이언트의 요청을 처리합니다. JSP 페이지에서 정의된 동적 콘텐츠는 이 단계에서 생성되고, HTML 형식으로 클라이언트에게 응답으로 전송됩니다. 응답 반환: 최종적으로 생성된 HTML 콘텐츠가 HTTP 응답으로 클라이언트에게 전송됩니다.  

Spring MVC 프레임워크에서는 JSP 파일(또는 다른 뷰 템플릿)을 로딩하기 전에 뷰 리졸버(View Resolver)가 먼저 동작하는 과정이 있습니다. 2번과 3번 과정에 대해서 직접 조사해 보세요