[ Spring boot ] Spring boot 프레임워크 ①

[ Spring boot ]

 

개발환경 구축하기

 

* 서버 충돌 방지를 위해  server port 번호 바꿔주기

→ src/main/resources/application.properties 에서 server.port=8024 입력 후 저장

 

 

스프링 부트 static 폴더

 

프로젝트를 생성 후 localhost:8024로 접속하면 에러가 난다.

→ 진입점이 없어서 에러가 발생한다. 따라서 진입점을 만들어주면 에러가 나지 않음

 

진입점은 html 파일같이 직접 파일을 만들어주는 것도 가능하고, controller를 통해서 진입점을 찾아들어갈 수 있도록

만드는 것이 가능하다. 

 

src/main/resources 에 index.html 파일을 생성 후 localhost:8024/index.html로 접속이 가능하다.

 

- static : 파일을 만들어놓고 localhost:8024/index.html 등의 형태로 접속하면 static 파일에 접근해서 일치하는

           파일을  찾아 접속이 가능하다. 폴더를 생성해서 그 안에 html 파일을 만드는 것도 가능하다.

           대신 루트에 폴더 이름도 추가해야한다. 

           ex) http://localhost:8024/user/member.html

- templates : 하위에 html 파일을 만들고 접근하려고 해도 접근이 되지 않는다. 

 

▶ 스프링 부트는 기본적으로 static 폴더 안에서 html 파일이 있는지 없는지를 확인한다. static 폴더안에 index.html

파일을 생성해 놓으면 localhost:8024뒤에 /index.html 을 명시하지 않아도 잘 접속이 된다.

 

즉, 스프링 부트에 web 의존성을 프로젝트 생성시 추가하고 localhost:8024로 접속하면 스프링부트 프레임워크가

root 폴더로써 src/main/resources 안에 있는 static 폴더를 찾아가고 그 안에서 index.html 파일을 찾아서 읽는다.

 

index.html 파일이 아닌 다른 파일일 경우는 명시를 해줘야한다. 확장자 명이 달라지는 경우도 명시를 하는 것임.

 

▶ root 폴더인 static 폴더에 index.html이 있는 경우 localhost:8024/index.html 혹은 localhost:8024로 바로

접근이 가능하다. 즉 root의 경우는 파일을 명시해줘도 되고 안해줘도 된다.

 

 

스프링 부트 templates 폴더

 

index.html을 static 폴더가 아닌 templates 폴더에서 하고 싶을 경우 Thymeleaf 의존성을 추가해야한다.

 

기본적으로 스프링 부트는 접속시 찾아가는 정적 자원의 위치인 static 폴더를 가지고 있다.

templates 폴더에 들어있는 html 파일을 찾아갈 수 있도록 해줄려면 Thymeleaf 의존성을 추가해주면 된다.

 

Thymeleaf 의존성을 추가해주면 스프링 부트 프레임 워크에는 root 폴더를 templates 폴더로 인식하도록

자동 설정이 되어있기 때문에 localhost:8024에 접속했을 때 index.html을 찾아갈 수 있다.

 

pom.xml 에서 dependency를 확인 가능하다. ( 버전 정보는 제외한다. )

 

 

의존성을 추가하고 localhost:8024에 접속해보면 templates 폴더에 있는 index.html로 잘 접속이 되는 것을 확인

가능하다. Thymeleaf 의존성을 추가하면 templates 폴더가 root 폴더가 된다.

 

* src/main/resources/application.properties 에서 프로젝트의 속성을 변경하고 설정할 수 있다.

* root 폴더 지정하기 → spring.thymeleaf.prefix=classpath:templates/ + 지정하고 싶은 폴더

 

thymeleaf 확장자는 .html을 사용하고 templates 폴더에는 관련된 파일만 동작한다.

 

ⓐ thymeleaf 경로 설정 

spring.thymeleaf.prefix=classpath:templates
spring.thymeleaf.suffix=.html

 

ⓑ thymeleaf 템플릿에 대한 캐시를 남기지 않음 ( false로 설정했다가 운영시는 true로 변경 )

spring.thymeleaf.cache=false

 

ⓒ 템플릿 위치 존재 확인 - templates 디렉토리에 파일이 있는지 없는지 체크, 없으면 에러를 발생

spring.thymeleaf.check-template-location=true

 

Spring boot Controller

 

localhost:8024/home이라 검색해서 접속했을 때 에러가 뜨지 않고 templates 폴더 안에 있는 home.html 파일을 열기

 

controller는 사용자의 요청에 맞는 view를 가지고 와서 화면을 띄어준다. 

사용자의 요청이 home으로 들어오도록 사용자의 요청을 mapping을 해줘야한다. 

 

* ctrl + shift + o을 눌러주면 자동으로 필요한 파일이 import 된다.

 

 

package com.example.capstone.controller;

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

@Controller
public class firstController {

    @GetMapping("/login")
    public String homeMethod(){
        return "login"; //root 폴더로 찾아가서 login 파일이 있는지 mapping하고 출력해준다.( 확장자는 굳이 안써도 됨 )
    }
}

 

사용자의 요청이 들어오면 컨트롤러가 많은 view들 중에서 요청에 맞는 view를 골라서 응답해준다. 

 

package com.example.capstone.controller;

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

@Controller
public class firstController {

    @GetMapping("/login")
    public String homeMethod(){ //로그인창
        return "login"; //root 폴더로 찾아가서 login 파일이 있는지 mapping하고 출력해준다.( 확장자는 굳이 안써도 됨 )
    }

    @GetMapping("/user/signUp") //회원가입창
    public String signUpMethod(){
        return "user/signUp";
    }

}

 

 

Spring boot MVC 패턴

 

MVC 모델은 Model, View, Controller의 약자로 소프트웨어 디자인 패턴중 하나이다.

UI와 비지니스 로직 부분을 분리할 수 있어서 협업시 유연하고 업무 분장 및 개발 분리를 편하게 처리할 수 있다.

각각의 업무 로직을 분리할 수 있으므로 추후 업데이트나 유지보수 등에서도 편리

뷰 페이지단과 데이터 처리 부분이 분리됨으로써 재사용이 용이하다.

 

1. Model

 

데이터 ( application이 가지고 있는 정보 )

 

2. View

 

UI, 즉 사용자 인터페이스로써 사용자가 접속해서 실제적으로 이용하고 있는 웹 페이지 화면단

 

3. Controller

 

- 뷰페이지와 모델을 이어주는 중간 다리 역할

- 사용자의 요청이 들어오면 그에 맞는 적절한 뷰페이지를 연결하여 결과를 리턴

- 단순 요청 뿐만 아니라 데이터 전달 및 비지니스 로직을 호출하여 그 결과값을 전달하는 역할

 

 

Spring boot HTTP 단순 요청 및 모델 데이터 전달

 

1. 단순 요청 : 요청한 화면을 그대로 보여줌

 

package com.example.capstone.controller;

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

@Controller
public class LoginController {

    @GetMapping("/user/login")
    public String userLogin(){
        return "/user/login";
    }

}

// 사용자의 요청이 /user/login일 때 컨트롤러가 templates 폴더에 들어가서 /user/login.html이 있는지 확인

 

 

2. 모델 데이터 전달

 

package com.example.capstone.controller;

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

@Controller
public class LoginController {

    @GetMapping("/userInfo/userdata")
    public String checkuserInfo(Model model){

        model.addAttribute("username", "이꼬마");
        //model에 key와 value를 추가하고 뷰페이지 단으로 같이 데이터가 전달된다.
        // 해당 데이터가 /userInfo/userdata로 넘어가서 같이 출력이 된다.

        return "/userInfo/userdata";
    }

}

 

// userInfo/userdata

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

    <h1 th:text="${username}"></h1>
    <h1>회원 정보</h1>

</body>
</html>

 

<html xmlns:th="http://www.thymeleaf.org">

위 코드를 추가해주면 th의 빨간 문구가 사라짐

 

보통의 HTML 파일은 정적 파일이며, Template Engine 파일은 동적 파일이다.

 

Thymeleaf, JSP 등은 뷰페이지 단을 표현하는 언어이다.

 

타임리프는 백엔드 서버에서 HTML을 동적으로 렌더링하는 용도로 사용이 된다.

템플릿 엔진은 템플릿 양식과 특정 데이터 모델에 따른 입력 자료를 합성하여 결과 문서를 출력하는 소프트웨어이다.

웹 템플릿 엔진은 웹 문서가 출력되는 템플릿 엔진으로 웹 템플릿들과 웹 컨텐츠 정보를 처리하기 위해 설계된 소프트웨어로 HTML과 DB Connection을 분리해주는 기능이다.

타임리프는 템플릿 양식에 적절한 특정 데이터를 넣어 결과문서를 출력하는 텍스트 템플릿 엔진이다. 

 

즉 템플릿 양식에 적절한 특정 데이터를 넣어 결과 문서를 출력한다. 텍스트 템플릿 엔진의 종류로는 타임리프가 있다.

타임 리프는 백엔드 서버에서 HTML을 동적으로 렌더링하는 용도로 사용이 된다. 

 

서버 사이드 템플릿 엔진 :  서버에서 DB 혹은 API에서 가져온 데이터를 미리 정의된 템플릿에 넣어 HTML로 그려서 클라이언트로 전달해주는 역할을 한다. HTML 코드에서 고정적으로 사용되는 부분은 템플릿으로 만들어두고, 동적으로 생성되는 부분만 템플릿에 소스 코드를 끼워넣는 방식으로 동작한다.

* 서버 사이드 랜더링의 경우 클라이언트에게 보여지지 않고 빠르게 만들어준다.