본문 바로가기
Spring boot/Bank App 만들기(deployment)

Bank App 만들기 ( deployment ) - 헤더 링크 설정 및 JSTL 태그 활용

형디 2024. 8. 7. 17:52

1. header.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="icon" href="/favicon.ico" type="image/x-icon">
<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="/index">홈</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">로그인</a></li>
						<li class="nav-item"><a class="nav-link" href="/user/sign-up">회원가입</a></li>
						<li class="nav-item"><a class="nav-link" href="/user/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>
						<p>코린이 개발을 위한 뱅크 앱</p>
						<h3>서비스 목록</h3>
						<p>계좌목록,생성, 출금, 입금, 이체 페이지를 활용할 수 있어요</p>
						<ul class="nav nav-pills flex-column">
							<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>
						</ul>
						<hr class="d-sm-none">
					</div>
					<!-- end of header.jsp  -->

 

 

 

 

 

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

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

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

 

대표적인 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 적용해 보기

header.jsp - 상단에 태그 라이브러리 선언후 <choose></c:choose> 태그를 활용
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!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="icon" href="/favicon.ico" type="image/x-icon">
<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="/index">홈</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">
						<c:choose>
							<c:when test="${principal != null}">
								<%-- 사용자가 로그인 상태  --%>
								<li class="nav-item"><a class="nav-link" href="/user/logout">로그아웃</a></li>
							</c:when>
							<c:otherwise>
								<%-- 사용자가 로그인 안된 상태  --%>
								<li class="nav-item"><a class="nav-link" href="/user/sign-in">로그인</a></li>
								<li class="nav-item"><a class="nav-link" href="/user/sign-up">회원가입</a></li>
							</c:otherwise>	
						</c:choose>
					</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>서비스 목록</h3>
						<p>계좌목록,생성, 출금, 입금, 이체 페이지를 활용할 수 있어요</p>
						<ul class="nav nav-pills flex-column">
							<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>
						</ul>
						<hr class="d-sm-none">
					</div>
					<!-- end of header.jsp  -->

JSTL 태그안에서 HTML 주석을 사용하지 말자. 오류 발생 !! JSP 주석을 사용하자

 

 

 

 

완성 화면 보기 - 로그인 여부에 따라 메뉴 변동, 하단 링크는 그대로 두고 추후 인증 검사 로직을 구현해 보자.

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

1. JSP 파일 로딩: 클라이언트로부터 HTTP 요청이 들어오면, 웹 서버는 해당 요청에 맞는 JSP 파일을 찾는다.

2. JSP 컴파일: 찾은 JSP 파일은 Java 서블릿으로 컴파일된다. 이 단계에서 JSP 파일은 순수한 Java 코드를 포함하는 .java 파일로 변환됩니다. 이 변환 과정은 JSP 엔진에 의해 수행된다.

3. 서블릿 클래스 로딩 및 인스턴스 생성: 컴파일된 Java 파일은 .class 파일로 컴파일되고, 웹 서버에 의해 로딩되어 서블릿 인스턴스로 생성된다.

4. 서블릿 실행: 서블릿 인스턴스가 생성되면, service() 메서드를 통해 클라이언트의 요청을 처리합니다. JSP 페이지에서 정의된 동적 콘텐츠는 이 단계에서 생성되고, HTML 형식으로 클라이언트에게 응답으로 전송된다.

5. 응답 반환: 최종적으로 생성된 HTML 콘텐츠가 HTTP 응답으로 클라이언트에게 전송된다.

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

728x90

'Spring boot > Bank App 만들기(deployment)' 카테고리의 다른 글

Bank App 만들기 ( deployment ) - 계좌 목록 만들기 ( 1단계 )  (0) 2024.08.08
Bank App 만들기 ( deployment ) - 계좌 생성 ( 유효성, 인증검사 중 누가 먼저 일까? )  (0) 2024.08.07
Bank App 만들기 ( deployment ) - 로그인 처리( 세션 메모리지는 누가 관리하고 있을까? )  (0) 2024.08.07
Bank App 만들기 ( deployment ) - 회원 가입( 트랜잭션, 예외 처리, H2 테이블 생성 )  (0) 2024.08.07
Bank App 만들기 ( deployment ) - MyBatis 설정 ( DB 접근 기술이란? )  (0) 2024.08.07

'Spring boot/Bank App 만들기(deployment)' Related Articles

티스토리툴바