스프링 웹 MVC-01.스프링 MVC 소개

in Back-end on Spring, Spring mvc, Mvc


스프링 MVC 소개

M: 모델
V: 뷰
C: 컨트롤러

모델: 평범한 자바 객체 POJO
뷰: HTML. JSP, 타임리프, …
컨트롤러: 스프링 @MVC

모델: 도메인 객체 또는 DTO로 화면에 전달할 또는 화면에서 전달 받은 데이터를 담고 있는 객체.
뷰: 데이터를 보여주는 역할. 다양한 형태로 보여줄 수 있다. HTML, JSON, XML, …
컨트롤러: 사용자 입력을 받아 모델 객체의 데이터를 변경하거나, 모델 객체를 뷰에 전달하는 역할.

  • 입력값 검증
  • 입력 받은 데이터로 모델 객체 변경
  • 변경된 모델 객체를 뷰에 전달

MVC 패턴의 장점

  • 동시 다발적(Simultaneous) 개발 - 백엔드 개발자와 프론트엔드 개발자가 독립적으로 개발을 진행할 수 있다.
  • 높은 결합도 - 논리적으로 관련있는 기능을 하나의 컨트롤러로 묶거나, 특정 모델과 관련있는 뷰를 그룹화 할 수 있다.

    event와 관련된 것은 해당 디렉토리 밑으로 하나로 묶는것이 가능

  • 낮은 의존도 - 뷰, 모델, 컨트롤러는 각각 독립적이다.

    예제는 타임리프쓰지만 JSP 써도 되고 Json으로 줘도 된다.

  • 개발 용이성 - 책임이 구분되어 있어 코드 수정하는 것이 편하다.
  • 한 모델에 대한 여러 형태의 뷰를 가질 수 있다.

MVC 패턴의 단점

  • 코드 네비게이션 복잡함

    요청이 처리되고, 진행되는지 한 코드만 본다고 해결되는 것이 아니다.

  • 코드 일관성 유지에 노력이 필요함
  • 높은 학습 곡선

참고
https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller https://www.thymeleaf.org/doc/tutorials/2.1/usingthymeleaf.html

실습

의존성 추가

  • Spring Web
  • Lombok
  • Thymeleaf
//Lombok 사용
@Getter @Setter
@Builder @NoArgsConstructor @AllArgsConstructor
public class Event {

    private String name;

    private int limitOfEnrollment;

    private LocalDateTime startDateTime;

    private LocalDateTime endDateTime;
}

@Controller // 이 클래스는 MVC패턴에서 컨트롤러 역할을 하는 클래스가 된다.
public class EventController {

    @Autowired
    EventService eventService;

    //@RequestMapping(value = "/events", method = HttpMethod.GET) // 기술한 요청을 처리하는 핸들러가 된다.
    @GetMapping("/events") // 윗 줄과 동일 (스프링 4.3부터 적용)
    public String events(Model model){
        model.addAttribute("events", eventService.getEvents());
        return "events"; // 뷰를 찾는 키워드. 기본적으로 resources / templates
    }
}

@Service
public class EventService {

    public List<Event> getEvents(){
        Event event1 = Event.builder()
                .name("스프링 웹 MVC 스터디")
                .limitOfEnrollment(5)
                .startDateTime(LocalDateTime.of(2019,1,10,10,0))
                .endDateTime(LocalDateTime.of(2019,2,10,10,0))
                .build();

        Event event2 = Event.builder()
                .name("스프링 웹 MVC 스터디 2차")
                .limitOfEnrollment(5)
                .startDateTime(LocalDateTime.of(2019,3,10,10,0))
                .endDateTime(LocalDateTime.of(2019,4,10,10,0))
                .build();

        // return List.of(event1, event2);
        return Arrays.asList(event1, event2); // java 8 기준
    }
}

resource/templetes/events

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"> <!-- 타임리프 사용 -->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>이벤트 목록</h1>
    <table>
        <tr>
            <td>이름</td>
            <td>참가 인원</td>
            <td>시작</td>
            <td>종료</td>
        </tr>
        <tr th:each="event: ${events}">
            <td th:text="${event.name}">이벤트 이름</td>
            <td th:text="${event.limitOfEnrollment}">100</td>
            <td th:text="${event.startDateTime}">값 없을때 나온다 2019년 1월 10일 오전 10시</td>
            <td th:text="${event.endDateTime}">2019년 2월 10일 오전 10시</td>
        </tr>
    </table>
</body>
</html>



© 2019. by jaeuk