💡 작업 순서
|
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"%>: 사용 할 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 적용해 보기
더보기
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에서 서블릿으로 변환되는 과정
|
Spring MVC 프레임워크에서는 JSP 파일(또는 다른 뷰 템플릿)을 로딩하기 전에 뷰 리졸버(View Resolver)가 먼저 동작하는 과정이 있습니다. 2번과 3번 과정에 대해서 직접 조사해 보세요
'Spring boot > Bank App 만들기 (deployment)' 카테고리의 다른 글
| 17. 계좌 목록 만들기(1단계) (0) | 2024.08.08 |
|---|---|
| 16. 계좌 생성(유효성, 인증검사 중 누가 먼저 일까?) (0) | 2024.08.07 |
| 14. 로그인 처리(세션 메모리지는 누가 관리하고 있을까?) (0) | 2024.08.07 |
| 13. 회원 가입(트랜잭션, 예외 처리, H2 테이블 생성) (1) | 2024.08.06 |
| 12. MyBatis 설정 (DB 접근 기술이란?) (0) | 2024.08.06 |
