Spring boot

[Spring Boot] Bank App (8) - ํ™”๋ฉด ๊ตฌํ˜„ _2(๋ ˆ์ด์•„์›ƒ ๋ถ„๋ฆฌ)

๋ฏธ๋กœ910 2024. 8. 14. 14:07
๐Ÿ’ก์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ํŒŒ์ผ๋กœ ๋ถ„๋ฆฌ ํ•˜๊ธฐ
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  -->
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 ํƒœ๊ทธ

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์„ ๋ถ„๋ฆฌํ•˜์—ฌ ์›น ํŽ˜์ด์ง€๋ฅผ ๋” ์‰ฝ๊ฒŒ ๊ด€๋ฆฌํ•˜๊ณ , ์œ ์ง€๋ณด์ˆ˜ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์‚ฌ์šฉ์ž ์ •์˜ ํƒœ๊ทธ์™€ ํƒœ๊ทธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์žฌ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•œ ์›น ์ปดํฌ๋„ŒํŠธ๋ฅผ ์ƒ์„ฑํ•˜์—ฌ ์›น ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ๊ฐœ๋ฐœ์˜ ํšจ์œจ์„ฑ์„ ๋†’์ผ ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

'Spring boot' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

[Spring boot] GET ๋ฐฉ์‹๊ณผ URL ์ฃผ์†Œ ์„ค๊ณ„  (1) 2024.09.26
[Spring Boot] Bank App (9) - MainController, mainPage.jsp ๊ตฌํ˜„  (0) 2024.08.14
[Spring Boot] Bank App (7) - ํ™”๋ฉด ๊ตฌํ˜„ _1(ํ…œํ”Œ๋ฆฟ ๊ฐ€์ ธ์˜ค๊ธฐ)  (0) 2024.08.13
[Spring Boot] Bank App (6) - ๋ชจ๋ธ๋ง  (0) 2024.08.13
[Spring Boot] REST API ๋ž€  (0) 2024.08.13

'Spring boot'์˜ ๋‹ค๋ฅธ๊ธ€

  • ํ˜„์žฌ๊ธ€[Spring Boot] Bank App (8) - ํ™”๋ฉด ๊ตฌํ˜„ _2(๋ ˆ์ด์•„์›ƒ ๋ถ„๋ฆฌ)

๊ด€๋ จ๊ธ€

ํ‹ฐ์Šคํ† ๋ฆฌํˆด๋ฐ”