Spring Project 스프링 프로젝트 시작하기 - Spring MVC 사용하기

이번 포스팅은, 이전의 MVC 모델을 설명했던 포스팅을 참고하고 발전시켜 보도록 하겠습니다.

[Java/Spring-framework] - Spring Project 스프링 프로젝트 시작하기 - Spring MVC

Spring Project 스프링 프로젝트 시작하기 - Spring MVC

 

Spring Boot를 사용해서 New 큐레이션 웹사이트를 만들어 보도록 하겠습니다.

 

 

 

사용 할 디렉토리 구조

위처럼 프로그램 디렉토리 구조를 설정하도록 하겠습니다.

그림에서 설명을 했듯이, java 소스코드와 화면에 보여줄 jsp 파일이 위치하는 공간으로 나뉠 수 있습니다.

 

java 소스코드 부분에서는 controller와 service, vo가 보입니다.

 

각각 소스코드를 작성하면서 설명을 하도록 하겠습니다

 

 

MVC 구조 세팅하기

1. Controller

먼저 화면처리를 위한 ViewController를 만들어주어 index를 매핑하겠습니다. / url으로 접근한 클라이언트의 request는 디스패쳐서블릿으로 전달 되어진 후 @Controller와 @RequestMapping 어노테이션에 의해 url이 mapping되어 일련의 처리 과정을 거친 후 “index” String을 반환해 ViewResolver 설정에 따라 index view를 보여주게 될 것입니다.

package com.woolbro.dev.controller;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

import com.woolbro.dev.service.Impl.NewsServiceImpl;

@Controller
public class ViewController {

    @Autowired
    NewsServiceImpl newsService;

    @RequestMapping("/")
    public String index(Model model) {

        model.addAttribute("newsData", newsService.getNews());
        return "index";
    }
}

 

2. Service

index 페이지에서 뉴스기사들을 불러오기위한 newsService를 만들어줍니다. 이때 서비스는 추후에 뉴스의 카테고리별로 확장될수 있기때문에 Interface와 구현체를 따로 나눠 서비스를 구현해주도록 하겠습니다.

 

NewsService.java

package com.woolbro.dev.service;

import java.util.List;

import com.woolbro.dev.vo.News;

public interface NewsService {

    public List<News> getNews();

}

NewsServiceImpl.java

package com.woolbro.dev.service.Impl;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Service;

import com.woolbro.dev.service.NewsService;
import com.woolbro.dev.vo.News;

@Service
public class NewsServiceImpl implements NewsService{

	@Override
	public List<News> getNews() {
		List mainNews = new ArrayList<>();

        News news1 = new News();
        news1.setTitle("중고차 매매 후 한 달 내 고장나면 보험 보상받는다");
        news1.setContents("중고차 구입 소비자의 피해를 구제하기 위한 중고차 보험이 다음 달부터 의무화되면서 구입 한 달 이내의 중고차 고장은 보험으로 보장을 받을 수 있게 된다.");
        news1.setDate("2019-05-27 13:30");
        news1.setAuthor("Taes");
        news1.setType("financial");

        News news2 = new News();
        news2.setTitle("하늘 참 신기하네");
        news2.setContents("오전 대구 달서구청 옥상 정원에서 시민들이 하늘에 펼쳐진 이색적인 구름을 관찰하고 있다. 파란 하늘에서 잘라낸 듯 넓게 펼쳐진 구름대와 차고 습한 대기 속을 비행하는 항공기가 남기는 가늘고 긴 구름 ‘비행운(오른쪽 가늘고 긴 구름)’이 겹쳐지며 진기한 풍경을 연출하고 있다. ");
        news2.setDate("2019-05-27 09:30");
        news2.setAuthor("Taes");
        news2.setType("social");

        News news3 = new News();
        news3.setTitle("커쇼 11연승, 다저스 4연승");
        news3.setContents("커쇼가 11연승에 성공했다. 벨린저는 19호 홈런과 함께 팀을 구해낸 두 개의 외야 어시스트를 기록했다. 오클랜드는 10연승을 질주. ");
        news3.setDate("2019-05-27 11:35");
        news3.setAuthor("Taes");
        news3.setType("sports");


        mainNews.add(news1);
        mainNews.add(news2);
        mainNews.add(news3);

        return mainNews;
	}
	
}

 

 

3. VO (Value Object)

다음으로는 데이터 객체인 Member VO 를 정의해보도록 하겠습니다.

package com.woolbro.dev.vo;

public class News {
	String title;
    String contents;
    String date;
    String author;
    String type;

    public String getType() {
        return type;
    }
    public void setType(String type) {
        this.type = type;
    }
    public String getTitle() {
        return title;
    }
    public void setTitle(String title) {
        this.title = title;
    }
    public String getContents() {
        return contents;
    }
    public void setContents(String contents) {
        this.contents = contents;
    }
    public String getDate() {
        return date;
    }
    public void setDate(String date) {
        this.date = date;
    }
    public String getAuthor() {
        return author;
    }
    public void setAuthor(String author) {
        this.author = author;
    }
}

News VO는 간단하게 제목(Title), 내용(Contents), 날짜(Date), 저자(Author), 타입(Type) 5가지의 값들로 정의하였습니다.

VO(Value Object)는 데이터를 Object 단위로 변경해서 관리하기 위한 클래스입니다. 사실 VO를 꼭 사용해야하는가에 대한 이슈는 계속해서 있는 것으로 알고있습니다.

VO를 사용해야 한다는 입장에서는, VO가 데이터를 객체화 시켜 전달해주는 목적보다도 개발자들에게 데이터를 명시적으로 ‘정의’해 줄수 있다는점에서 사용하는것이 좋다 라고 얘기하고있습니다.

 

4. View(JSP)

다음은 view를 처리할 차례입니다. jsp를 사용하여 view를 제공하려고하는데 이를 위해서는 간단한 사전 설정이 필요합니다.

 

application.properties와 pom.xml에 설정을 적용해야 합니다.



우선 pom.xml에 아래와 같이 추가 해 줍니다.

<dependency>
    <groupId>org.apache.tomcat.embed</groupId>
    <artifactId>tomcat-embed-jasper</artifactId>
    <scope>provided</scope>
</dependency>

<dependency>
    <groupId>javax.servlet</groupId>
    <artifactId>jstl</artifactId>
</dependency>

 

application.properties는 Spring Boot에 설정을 적용 할 수 있는 곳인데, 아래는 이곳에 적어주어야 할 내용입니다.

spring.mvc.view.prefix=/WEB-INF/jsp/
spring.mvc.view.suffix=.jsp

 view의 위치 및 확장자명 설정을 위해 appliciation.properties에서 spring mvc view prefix, suffix을 해주셔야 컨트롤러에서 편리하게 view name만으로 return을 보내줄수 있습니다.

 

마지막으로 index.jsp 를 작성하도록 하겠습니다.

 

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Trick&Basic News</title>
    </head>
    <body>
    
    <div class="header" style="width:100%;height:100px;line-height:100px;border-bottom:1px solid #d0d0d0">Trick&Basic News</div>
    
    <div class="news-container">
        <c:forEach var="el" items="${newsData}">
            <div class="news" style="margin-bottom:20px;">
                ${el.title}<br>
                ${el.type} / ${el.author} / ${el.date}<br>
                ${el.contents}
            </div>
        </c:forEach>
    </div>
    
    </body>
</html>

 

 

실행하기!

 

SpringBoot 로고는 언제봐도 기분이 좋은거같아요 ㅋㅋㅋ

작성이 완료되었다면, 실행 해 줍니다.

우측 하단을 잘 보면, 위와 같이 나오는데 Port 정보를 알려주고 있어요.

 

application.properties에서 포트번호도 설정 할 수 있지만, 안했기 때문에 default 값인 8080으로 포트가 정해졌습니다.

localhost:8080으로 접속을 해주겠습니다.

 

Controller에서 url 매핑을 해 줄때에 , "/" 를 "index"와   매핑 되어있기 때문에, 접속과 동시에 작성한 뉴스가 보이겠네요~

아래와 같이 보이면 성공입니다.