2. 스프링부트와 타임리프로 게시판 만들기 - 게시판 폼 만들기

yeom yaloo·2022년 7월 13일

MVC 패턴

MVC 패턴이란?

👉 MVC는 Model View Controller의 약자로 Model은 실질적으로 사용하는 주요 객체들이라(혹으 데이터?) 생각하면 편하다.
👉 View는 말그대로 클라이언트가 실질적으로 보게되는 화면을 의미한다.
👉 Controller는 위에서 살펴봄과 같이 해당 요청에 따른 응답으로 view를 돌려주는 역할을 하다.

우리는 왜 웹 어플리케이션 계층을 나눠 사용할까?

핵심 로직인 비지니스 로직을 따로 두지 않은 채로 사용하다보면 언젠가 바뀌는 다른 계층들의 변화 때무에 핵심까지 바뀌고, 무너질 수 있기 때문에 이를 나눠서 관리하는 것이다.

그렇다면 왜 이들을 분리했을까?
흔히 말하는 '관심사의 분리'때문인데, 해당 로직의 변화에도 핵심 비지니스 로직의 변화나 영향이 없기 위함이다. 이부분은 나아가 더 많은 프로젝트를 만들며 깨닫길 .. 나의 작은 바람..

MVC 패턴 정의에 관한 글
사용자 인터페이스, 데이터 및 논리 제어를 구현하는데 널리 사용되는 소프트웨어 디자인 패턴
📌출처: https://developer.mozilla.org/ko/docs/Glossary/MVC

게시물 작성 폼

들어가기에 앞서 개념 정리

SSR VS CSR

해당 프로젝트는 SSR 기법을 사용해서 진행합니다.
👉 SSR은 서버 사이드 렌더링의 약자로 서버에서 페이지를 그려 클라이언트로 보낸 후 화면에 표시하는 기법이다. (SSR은 새로운 요청에 따라 html 파일을 내려받는 형식이다.)
👉 CSR은 클라이언트 사이드 렌더링의 약자로 서버사이드 렌더링과 달리 최초 요청시에 html을 비롯해 css, js등 각종 리소스를 미리 받아온 뒤 이후 서버에서는 데이터만 요청하고 js를 이용해 뷰를 보여주는 기법이다. (간단하게 React.js vue.js가 대표적인 CSR 기법이다.)

SPA(Single Page Application)?

👉 SPA는 기본적으로 CSR클라이언트 사이드 렌더링이기는 하지만 SPA 자체가 CSR은 아니라고 한다.
👉 SPA는 초기 렌더링 후 데이터만 받아오는 방식을 사용해 사용자에게 더 빠른 경험을 제공한다.
👉 SPA는 말 그대로 한개의 페이지를 가지고 있는 것 처럼 보이며 사용자 친화적이고 개발이 상대적으로 효율적이라고 한다.

템플릿 엔진

👉 템플릿 엔진(Template Engine)이란 지정된 템플릿 양식에 따라 데이터를 합쳐 html 문서를 출력하는 소픝트웨어로 웹사이트 화면을 어떤 형태로 만들지 도와주는 개념이다.
👉 현재 spring은 thymeleaf를 공시 템플릿 엔진으로 사용하고 있어 현 프로젝트 역시 타임리프 사용으로 구현할 예정이다.(JSP도 템플릿 엔진 중 하나!)

html을 사용한 화면 구성

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>게시물 작성폼</title>
</head>

<style>
    .layout {
        width: 500px;
        margin: 0 auto;
        margin-top: 40px;
    }

    .layout > input, textarea {
        width: 100%;
        box-sizing: border-box;
        margin-top; 10px;

    }

    .layout > textarea{
        width: 100%;
        margin-top: 10px;
        min-height: 300px;
    }
</style>
<body>

    <div class="layout">
        <input type="text">
        <textarea></textarea>
        <button>작성</button>

    </div>

</body>
</html>

해당 view를 생성했으니 이에 맞게 요청에 따라 해당 view를 호출하는 controller를 만들자.

Controller

컨트롤러란?

👉 컨트롤러는 요청이 들어오는 지점으로 클라이언트의 요청에 따라서 어떤 처리를 할지를 결정한다.(요청 처리)
👉 이때 컨트롤러는 클라이언트에게 해당 요청에 대한 응답으로 view 반환을 해준다. 이때 반환되는 뷰는 서버에서 처리된 데이터를 포함하는 개념이다.(응답 반환)
👉 그러나 실질적으로 비지니스 로직은 컨트롤러 내에서 처리하지 않기 때문에 이와 관련된 서비스는 서비스 계층에서 처리한다.

package com.study.board.Controller;


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


//해당 클래스가 컨트롤러임을 알려주는 어노테이션
@Controller
public class BoardController {

    @GetMapping("/board/write") //localhost:8080/board/write
    //게시물 작성 폼으로 이동하는 컨트롤러
    public String boardWriteForm(){
        //return 되는 정적 템플릿을 열어준다.
        return "boardwrite";
    }
}

GetMapping - 해당 uri를 매핑

return "boardewrite" 해당 uri를 입력해 get요청을 하면 스프링은 해당 이름을 가진 html을 정적템플릿 폴더에서 찾아 클라이언트에게 보여준다.