spring boot 입문 -1

https://start.spring.io/

package name = group + artifact

dependencies

spring web, h2 database, mustache, spring data jpa

실행하고,

http://localhost:8080

localhost : 우리집의 8080(port number)방에 무엇인가를 요청

8080방안에는 스프링부트가 동작중임.

/main/resources/static/hello.html 파일에 아래와 같이 작성.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>헬로 월드!</h1>

</body>
</html>

http://localhost:8080/hello.html

내 컴퓨터에서 8080번호에서 수행되고 있는 서버에게 hello.html 파일 요청

url에 직접 hello.html(파일명)을 명시했을때, sprint boot는 직접 resources/static에서 찾음. 찾아서 브라우저에 응답으로 던짐.

웹페이지를 하나의 틀로 만들고, 여기에 변수를 삽입하게 함. 변수의 값에 따라 수많은 페이지로 바뀔 수 있음.

dependencies에서 추가한 mustache가 view templates을 담당함.

view templates - 화면 담당.

controller - logic : 처리 과정을 담당

model - data : data 담당

mvc 패턴.

https://m.blog.naver.com/jhc9639/220967034588

[개발자 면접준비]#1. MVC패턴이란

오늘은 개발자면접에 많이 나오기도 하는 MVC패턴에 대해서 알아보고자 합니다. 과연 MVC패턴이 무엇...

blog.naver.com

https://ojt90902.tistory.com/667?category=938781

Spring MVC : 정적 리소스, 뷰 템플릿, HTTP API

Spring MVC 응답 정적 리소스 웹 브라우저에 정적인 HTML, CSS, JS를 제공할 때 사용(파일을 그대로 전달) 뷰 템플릿 사용 웹 브라우저에 동적인 HTML을 제공. 뷰 템플릿을 사용(SSR) HTTP 메세지 사용 HTTP AP

ojt90902.tistory.com

intellij marketplace에서 mustache 검색 후, Handlebars/Mustache 설치

/resources/templates/greetings.mustache

doc하고 commnad+j 해서 html 자동완성 // commnad + j = 현재 커서 위치에서 사용될 것 같은 Live Templates를 보여주는 단축키

* 2022년 7월 2일 기준 intellij 2.7.0 version mustache에서 한글깨짐 해결이 안되는 이슈가 있는 것 같다.

build.gradle에서 다음과 같이 버전 다운을 해주어 해결하였다.

plugins {
   id 'org.springframework.boot' version '2.6.9'
   id 'io.spring.dependency-management' version '1.0.11.RELEASE'
   id 'java'
}

version '2.7.0' -> version '2.6.9'

com.example.firstproject.controller package 만들고, FirstController class 생성.

실제 출력 결과

Controller -> 클라이언트로 부터 요청을 받고,

View -> 최종 페이지를 만들고,

Model -> 최종 페이지에쓰일 데이터를 view에게 전달한다.

@Controller
public class FirstController {
    @GetMapping("/hi")
    public String niceToMeetYou(Model model){
        model.addAttribute("username","희선");
        return "greetings";// templates/greetings.mustache -> 브라우저로 전송!
    }
}

요청은 @Controller가 받는다. -> /hi 요청은 @GetMapping("/hi")이 받는다. 이거에 의해 해당 메소드가 실행이 되는데,

-> return 값이 보여줄 페이지가 되고, -> 보여줄 페이지에서 사용되는 변수는 model을 통해 등록을 한다.

다음과 같은 디렉터리 구조로 변경

header

<!doctype html>
<html lang="ko">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.rtl.min.css" integrity="sha384-dc2NSrAXbAkjrdm9IYrX10fQq9SDG6Vjz7nQVKdKcJl3pC+k37e7qJR5MVSCS+wR" crossorigin="anonymous">

    <title>Hello, world!</title>
</head>
<body>
<!-- navigation -->

<nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#">Link</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                        Dropdown
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                        <li><a class="dropdown-item" href="#">Action</a></li>
                        <li><a class="dropdown-item" href="#">Another action</a></li>
                        <li><hr class="dropdown-divider"></li>
                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link disabled">Disabled</a>
                </li>
            </ul>
            <form class="d-flex" role="search">
                <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
                <button class="btn btn-outline-success" type="submit">Search</button>
            </form>
        </div>
    </div>
</nav>

footer


<!--site info-->
<div class="mb-5 container-fluid">
    <hr>
    <p>@CloudStudying . <a href="#">Privacy</a> . <a href="#">Terms</a> </p>
</div>



<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>


</body>
</html>

greeting

{{>layouts/header}}

    <!-- content -->
    <div class = "bg-dark text-white p-5">
        <h1>{{username}}님, 반갑습니다!</h1>
    </div>

{{>layouts/footer}}

goodbye

{{>layouts/header}}

<div class = "bg-dark text-white p-5">
    <h1>{{nickname}}님, 다음에 또 만나요!</h1>

</div>

{{>layouts/footer}}

header , contents , footer로 샌드위치 구조. header, footer을 따로 변수처럼 선언해주었음. 이때, ">"표시 들어가야함. contents가 한눈에 잘 보이기 위함.

출처 :

위 내용은

https://www.youtube.com/watch?v=_vDACE13Ubc&list=PLyebPLlVYXCiYdYaWRKgCqvnCFrLEANXt

유튜브 홍팍 spring boot강의를 보고 정리한 글입니다.

'spring boot' 카테고리의 다른 글

Sprint boot Build error : version 3은 Java11을 지원하지 않는다. (2)	2024.01.13
spring boot 입문 -2 (1)	2022.07.03

'spring boot' 카테고리의 다른 글

티스토리툴바