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

Bank App 만들기 ( deployment ) - MainController, mainPage.jsp 구현

형디 2024. 8. 7. 14:04
버그 확인
	// TODO - tools xml 파일 error check 
	providedCompile 'javax.servlet:javax.servlet-api:3.1.0'

 

 

 

mainController.java 파일 생성
package com.tenco.bank.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

@Controller  // IoC 대상(싱글톤 패턴 관리가 된다.) --> 제어의 역전  
public class MainController {
	
	// REST API  기반으로 주소설계 가능 
	
	// 주소설계 
	// http:localhost:8080/main-page
	@GetMapping({"/main-page", "/index"})
	public String mainPage() {
		System.out.println("mainPage() 호출 확인");
		// [JSP 파일 찾기 (yml 설정) ] - 뷰 리졸버 
		// prefix: /WEB-INF/view
		//         /main  
		// suffix: .js 
		return "/main";
	}	
}

 

 

 

요청 후 결과 화면 확인

 

이미지 활용 - 링크 처리

https://picsum.photos/id/1/350

 

 

 

 

간단한 CSS 설정하기
<%@ 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>
  	.m--banner-img {
  		background-image: url(https://picsum.photos/600);
  		background-size: cover;
  		background-position: center;
  		width: 100%;
  	}
  	.m--profile {
  		background-image: url(https://picsum.photos/id/1/350);
  		width: 100%;
  		height: 200px;
  		background-size: cover;
  		background-position: center;
  	}
  </style>
</head>
<body>

<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="#">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="m--profile"></div>
      <p>코린이 개발을 위한 뱅크 앱</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  -->

 

 

 

외부 스타일 시트로 변경 하기
@charset "UTF-8";

.m--banner-img {
	background-image: url(https://picsum.photos/600);
	background-size: cover;
	background-position: center;
	width: 100%;
}

.m--profile {
	background-image: url(https://picsum.photos/id/1/350);
	width: 100%;
	height: 200px;
	background-size: cover;
	background-position: center;
}

 

 

 

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="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="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="#">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="m--profile"></div>
      <p>코린이 개발을 위한 뱅크 앱</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  -->

 

 

 

 

하단에 붙는 푸터 설정하기 index.html 파일에 연습 
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Website Example</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>

body{
	height: 100vh;
	margin: 0;
}
.m--flex-container {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.m--container  {
	flex: 1;
}
</style>
</head>
<body>
	<div class="m--flex-container">
		<div class="m--container">
			<div class="jumbotron text-center" style="margin-bottom: 0">
				<h1>My First Bootstrap 4 Page</h1>
				<p>Resize this responsive page to see the effect!</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"></div>
					<div class="col-sm-8">
						<h2>TITLE HEADING</h2>
						
					</div>
				</div>
			</div>
		</div>
		<div class="jumbotron text-center" style="margin-bottom: 0">
			<p>Footer</p>
		</div>
	</div>
</body>
</html>

 

 

 

 

실제로 사용할 header.jsp, footer.jsp, common.css 파일 수정 
@charset "UTF-8";

body{
	height: 100vh;
	margin: 0;
}
.m--flex-container {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.m--container  {
	flex: 1;
}

.m--banner-img {
	background-image: url(https://picsum.photos/600);
	background-size: cover;
	background-position: center;
	width: 100%;
}

.m--profile {
	background-image: url(https://picsum.photos/id/1/350);
	width: 100%;
	height: 200px;
	background-size: cover;
	background-position: center;
}

 

 

 

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="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="#">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="m--profile"></div>
						<p>코린이 개발을 위한 뱅크 앱</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>

</div>
</div>

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

 

 

 

 

 

 

 

플로우 차트로 알아 보는 간단한 동작 원리

스프링 부트 기반의 웹 애플리케이션이 클라이언트(웹 브라우저)로부터 요청을 받아 처리하는 주요 단계의 플로우 차트( 기본적인 웹 요청 및 응답 프로세스)

 

아파치와 톰캣

 

1. 정적 파일 요청시 간단한 실행 흐름 (예: CSS, JS, HTML 이미지 파일) - URL 호출 

[웹 브라우저]     [스프링부트내장웹서버(아파치)]  [정적 파일]
      |                  |                       |
      | 1. HTTP 요청     |                       |
      | -------------->  |                       |
      |                  | ----------------->    |
      |                  |                       |
      |                  |                       |
      |                  |                       |
      |                  |                       |
      |                  |                       |
      |                  | <-------------------  |
      |  2. HTTP 응답    |                       |
      | <--------------  |                       |
      |                  |                       |
  1. 웹 브라우저가 html, css, js, 이미지 파일과 같은 정적 파일을 요청하면 HTTP 요청이 스프링 부트 내장 웹 서버로 전송된다.
  2. 스프링 부트 내장 웹 서버는 해당 정적 파일을 찾고, 요청에 따른 정적 파일을 클라이언트인 웹 브라우저로 직접 응답다.

 

2. 동적 파일(JSP, JSON …) 요청시 간단한 실행 흐름 (예: JSP, json) - 거의 대부분 URI 호출

[ 웹 브라우저 ]        [ 웹 서버(아파치) ]          [ WAS ]            [ 스프링 컨테이너 ]
     |                   |                   |                     |
     |    1. HTTP        |                   |                     |
     |    Request        |                   |                     |
     |  ---------------> |                   |                     |
     |                   |                   |                     |
     |                   |    2. 요청 전달   |                     |
     |                   | ----------------> |                     |
     |                   |                   |                     |
     |                   |                   |                   3. 스프링 컨트롤러 
     |                   |                   |                    호출 및 처리       
     |                   |                   | ---------------->   |
     |                   |                   |                     |
     |                   |                   |                     |
     |                   |                   |                     |
     |                   |                   |                     |
     |                   |                   |                     |
     |                   |                   |                     |
     |                   |                   |                  4. 비즈니스 로직  
     |                   |                   |                  수행 (서비스, DB  연동 등)          
     |                   |                   | ---------------->   |
     |                   |                   |                     |
     |                   |                   |                     |
     |                   | 5.JSP->HTML       |                     |
     |                   | <--------------   |                     |
     |                   |                   |                     |
     |                   |                   |                     |
     |                   |                   |                     |
     |    6. HTTP        |                   |                     |
     |    Response       |                   |                     |
     |  <--------------  |                   |                     |
     |                   |                   |                     |
  1. 웹 브라우저에서 HTTP 요청(예: 웹 페이지 로드)을 생성하고, 이 요청은 웹 서버로 전송된다.
  2. 웹 서버는 요청을 WAS(웹 애플리케이션 서버)로 전달합니다. WAS는 동적 요청을 처리할 수 있는 컨테이너(예: Tomcat)로 생각할 수 있다.
  3. 컨테이너는 스프링 컨트롤러로 요청을 전달한다.
  4. 스프링 컨트롤러는 비즈니스 로직을 수행하기 위해 필요한 서비스를 호출하거나 데이터베이스와 상호 작용한다.
  5. 비즈니스 로직이 완료되면, 컨트롤러는 HTML 또는 JSON과 같은 응답 데이터를 생성한다.
  6. 컨테이너는 생성된 응답을 웹 서버로 반환한다.
  7. 웹 서버는 웹 브라우저로 응답을 전송하고, 브라우저는 결과를 표시다.

 

 

미리보기

 

서블릿 컨테이너란?

서블릿 컨테이너는 개발자가 웹 서버와 통신하기 위하여 소켓을 생성하고, 특정 포트에 리스닝하고, 스트림을 생성하는 등의 복잡한 일들을 할 필요가 없게 해준다. 서블릿 컨테이너는 servlet의 생성부터 소멸까지의 일련에 과정(life-cycle)을 관리하고, 매번 요청이 들어올 때마다 새로운 쓰레드를 요청 별로 부여한다.

 

요약하면, 서블릿 컨테이너는 클라이언트의 HTTP 요청을 받아들이고 서블릿 및 JSP를 실행하는 환경을 제공하는 소프트웨어이다.

728x90

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

Bank App 만들기 ( deployment ) - 어노테이션 정리  (0) 2024.08.07
Bank App 만들기 ( deployment ) - Exception Handler 처리 ( HTTP 상태 코드가 뭘까? )  (0) 2024.08.07
Bank App 만들기 ( deployment ) - 화면 구현2 ( 레이아웃 분리 )  (0) 2024.08.07
Bank App 만들기 ( deployment ) - 화면 구현1 ( 템플릿 가져오기 )  (0) 2024.08.07
Bank App 만들기 ( deployment ) - 모델링( Modeling )  (0) 2024.08.07

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

티스토리툴바