[SpringBoot] 22-07-28 SpringBoot 전체 이해하기 ☑

728x90

학습목표

학습 목차

1.환경설정 (기본흐름이해)

2.UI/UX 작성 * Frontend *문서작업

3.FrontPage * Frontend , PM

4.UML * Backend , DB

5.DB 연결 활용

6.비즈니스 로직 * Backend , PM

7.기타설정

중요 개념

POJO

AOP, DI, IoC

structure

MVC

webflux

dispatcherServlet

면접용 기술

JPA

암호화

프론트엔드 한번에 처리

클라우드 서버활용

JWT

DB정규화

비동기

API데이터가져오기

git

첫번째 기초예제

localhost:8080에서 hello world hello!를 띄우는 방법 시작합시다.

1. build.gradle 동일하게 초기상태로 진행

plugins {
    id 'org.springframework.boot' version '2.7.2'
    id 'io.spring.dependency-management' version '1.0.12.RELEASE'
    id 'java'
} //프로젝트설정했던 정보

group = 'com.testSpring'
//↓첫번째자리 : 메이저 업데이트, 두번째자리: 마이너업데이트, 세번째자리: fix 버전(오탈자, 이미지변경)
version = '0.0.1-SNAPSHOT'
sourceCompatibility = '17'
//↓디펜더시를 다운받는위치
repositories {
    mavenCentral()
}

//*: 종속관계 
//타임리프:SpringBoot(백엔드)와  html을 유연하게 연결해주는 템플릿
//starter : web에 tomcat이 포함되어있다.
//tomcat: Spring 프로젝트를 웹하고 연결해주는 도구

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
    implementation 'org.springframework.boot:spring-boot-starter-web'
    testImplementation 'org.springframework.boot:spring-boot-starter-test'
}
//↓테스트 모듈에 관한 정보
tasks.named('test') {
    useJUnitPlatform()
}

↑ build.gradle 에 있는 내용과 외부라이브러리 등 화면에 대한 설명을 주석으로 달아놓은 블록이다.

2. templates에서 > index.html파일 생성하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    hello world
    <a href="/hello">hello!</a>
</body>
</html>

4. templates에서 > hello.html파일 생성

<!DOCTYPE html>
<!--타임리프 템플릿 엔진 선언부분이며, model 데이터를 가져와서 html에 데이터를 뿌려주는역할-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--안녕하세요 학생님 : data가 안나왔을때 대비용-->
    <p th:text="'안녕하세요' + ${data} ">안녕하세요 학생님!</p>
</body>
</html>

5. com.testsprinc.testspring 패키지> controller패키지생성>HelloController클래스생성

package com.testspring.testspring.controller;

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

@Controller
//@Controller 선언을 해주면 HelloController클래스는 컨트롤을 담당이라고 Spring boot는 인식
//일방통행구조 (페이지전환(변경))
public class HelloController {
//GetMapping 선언을 해주면 특정 (html에서 지정한)url로 인식해서 받아오게 됩니다.
@GetMapping("hello")
    public String hello(Model model){
        //model: 하나의 그릇 model과 같은 다른그릇들도있다.
        model.addAttribute("data", "hello!!!");
        //아래 return hello는 템플릿에 hello.html로 이동
        //Controller는 return 통해 '알아서' hello라는이름의 html파일을 찾는다
                return "hello";
    }
}

6. TestspringApplication > 실행버튼 누르고,

7.구글에서 localhost:8080을 검색하여 들어가면

8. 위와 같이 작성했던 것들이 화면에 잘 보이는 것을 확인 할 수 있다.

위 실행내역 설명 이미지 : SpringBoot순환구조

두번째 예제들.

com.testspring.testspring패키지의 >Controller 패키지의 > HelloController클래스

package com.testspring.testspring.controller;

import com.testspring.testspring.model.Slime;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.*;

@Controller
//@Controller 선언을 해주면 HelloController클래스는 컨트롤을 담당이라고 Spring boot는 인식
public class HelloController {

    private final static String main = "index";
    private final static String err = "error";
    private final static String account = "account";
    private final static String SlimeView = "slimeState";

    //GetMapping 선언을 해주면 특정 (html에서 지정한)url로 인식해서 받아오게 됩니다.
    //일방통행구조 (페이지전환(변경))
    @GetMapping("hello")
    public String hello(Model model){
        //model: 하나의 그릇 model과 같은 다른그릇들도있다.

        /*try {

        }catch (Exception e){
            System.out.println(e);
            return "error";
        }*/
        Slime slime = new Slime();
        model.addAttribute("data11", slime.GetHp());
        //아래 return hello는 템플릿에 hello.html로 이동
        //Controller는 return 통해 '알아서' hello라는 이름의 html파일을 찾습니다.
        return SlimeView;
    }

    //호출하는 클라이언트의 정보를 가져다가 서버(controller)에 전달해주는매핑
    //클라이언트가 요청한 정보를 가져오는 어노테이션
    @RequestMapping(value="account", method = RequestMethod.POST)
        public String account(@RequestParam("id1")String id, Model model){
        //클라이언트에서 받아온 id1변수이름의 데이터를
        //RequestParam의 데이터로 연산작업
        String abc = id+"안녕하세요";
        //작업한 데이터를 model에 넣어서 클라이언트에 전송
        //model.addAttribute(Key, val) //Value에는 배열, 객체도 아무거나 넣을수 있음
        model.addAttribute("msg",abc);
        model.addAttribute("id2",id);
        model.addAttribute("intTest",30000);
        //static으로 선언한 문자열변수를 return하여 string메모리절약
        return account;
        //ViewResolver를 통해 html확장자를 가진 제목의문서를 비교해서 찾아감
    }

    @RequestMapping("/")
    public String index() {return main;}

    //중괄호 {}안에 데이터를 컨트롤러에 전달= url이라는 변수의데이터를 전달
    //@RequestMapping이라는 어노테이션이 url정보를 가지고있기때문에 컨트롤러에서 데이터 매개변수를 받을 수 있다.
    @RequestMapping("/{url}")
    public String index(@PathVariable int url, Model model){
        int urlFix = url*2;
        model.addAttribute("msg","이 주소는 없는 경로입니다 :"+urlFix);
        return main;
    }


}

com.testspring.testspring패키지의 > model패키지의 > Slime클래스

package com.testspring.testspring.model;

public class Slime {
    private int Hp = 50;

    public int GetHp(){return this.Hp;}
}

resource에서 templates>account.html

<!DOCTYPE html>
<html xml:th="http://www.thyleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
     <h1>회원가입</h1>
    <!--타임리프 템플릿을 통해서 controller(자바)에서 받아온 데이터를
    Html 문서에 적용시킨뒤 "완성된" html파일만 클라이언트 전달-->
     <p th:text = "${msg}">wait</p>
     <form method="POST" action="/account">
    <!-- input태그의 id1변수이름으로 데이터를 서버에 전달하고
     서버model에서 받아온 id2 변수이름으로 데이터를 html에 출력-->
      <input type="text" name ="id1" th:value="${id2}">
      <input type="submit" value="Click"/>
     </form>
</body>
</html>

resource에서 templates>error.html

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

resource에서 templates>hello.html

<!DOCTYPE html>
<!--타임리프 템플릿 엔진 선언부분이며, model 데이터를 가져와서 html에 데이터를 뿌려주는역할-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--안녕하세요 학생님 : data가 안나왔을때 대비용-->
    <p th:text="'안녕하세요' + ${data} ">안녕하세요 학생님!</p>
</body>
</html>

resource에서 templates>index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    hello world
    <a href="/hello">hello!</a>
    <a href="/account">account!</a>
    <a href="http://naver.com">naver</a>
    <hr>
<!-- ---------------------   -->
    <p th:text="${msg}"></p>
    <hr>
    Slime Game
    <h1>회원가입</h1>
    <form method="POST" action="/account">
        <!-- input태그의 id변수이름으로 데이터를 서버에 전달하고
        서버 model에서 받아온 id2변수이름으로 데이터를 html에 출력-->
        <input type="text" name="id1" th:value="${id2}"/>
        <input type="submit" value="Click" />
    </form>

</body>
</html>

resource에서 templates>slimeState.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 <p th:text="'안녕하세요'+${data11}">안녕하세요, 학생님!</p>

</body>
</html>

위 실행내역 설명 이미지 : SpringBoot순환구조

스프링부트란? : https://melonicedlatte.com/2021/07/11/174700.html

스프링(Spring), 스프링 부트(Spring Boot)란? 개념 정리 - Easy is Perfect

melonicedlatte.com

728x90

'STUDY > SpringBoot' 카테고리의 다른 글

[SpringBoot] 22-07-28 SpringBoot 간단 게시판 예제 ☑ (0)	2022.07.29
[SpringBoot] MVC(Model·View·Contoller) 정리✔ [1] (0)	2022.07.29
[SpringBoot] Spring Framework 개념 정리✔ (0)	2022.07.28
[SpringBoot] 22-07-28 IntelliJ에서 SpringBoot 시작하기 (0)	2022.07.27
[SpringBoot] 22-06-20 VSCode에서 Spring Boot 시작하기 (0)	2022.06.20

위 실행내역 설명 이미지 : SpringBoot순환구조

위 실행내역 설명 이미지 : SpringBoot순환구조

'STUDY > SpringBoot' 카테고리의 다른 글

티스토리툴바