관심쟁이 영호

[#5 Spring Boot 정주행] HTTP로 HTML을 응답해보자! 본문

Bank-End/Spring Boot

[#5 Spring Boot 정주행] HTTP로 HTML을 응답해보자!

관심쟁이 영호 2021. 9. 10. 16:36
반응형

이번 시간에는 서버를 만들어서 html을 리턴해보자!

 

먼저 서버를 만들자.

다음에 나오는 코드는 이전 시간에 했던 프로젝트에서 계속 유지한다.

 

 

 

[#3 Spring Boot 정주행] HttpServletRequest, HttpServletResponse 이용해보자! ㅣ 서블릿 체험

오늘은 이전 포스팅에서 다루었던 서블릿을 코드로 직접 확인하자! 목차 프로젝트 생성 HttpServletRequest 확인 HttpServletResponse 확인 프로젝트 생성 스프링으로 시작할 것이다. 1. 스프링 부트 프로젝

bestkingit.tistory.com

 


@WebServlet(name = "ServletTest", urlPatterns = "/servlet")
public class HttpServletTest extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        resp.setContentType("text/html");
        resp.setCharacterEncoding("utf-8");

        PrintWriter httpBodyWriter = resp.getWriter(); //HttpServletResponse 객체에 존재하는 HTTP Body writer

        httpBodyWriter.write("<!DOCTYPE html>\n" +
                "<html>\n" +
                 "<head>\n" +
                 " <meta charset=\"UTF-8\">\n" +
                 " <title>Title</title>\n" +
                 "</head>\n" +
                 "<body>\n" +
                  "<form action=\"/servlet/users/save\" method=\"post\">\n" +
                  " id: <input type=\"text\" name=\"id\" />\n" +
                  " password: <input type=\"text\" name=\"password\" />\n" +
                  " <button type=\"submit\">등록</button>\n" +
                  "</form>\n" +
                 "</body>\n" +
                "</html>\n");


    }
};

 

이제 크롬을 켜서 localhost:8080/servlet로 URI를 보내보자!

 

크롬 브라우저를 통해 spring에서 등록한 "/sevlet"을 요청했다.

 

그리고 서버에서 html을 생성하여 다시 응답해준 것을 볼 수 있다.

 

그래서 위 사진과 같이 입력 폼이 2개가 나왔다.

 

마찬가지로

 

우리가 "www.naver.com" 을 입력하면 네이버 홈이 나오는 것도 같은 원리이다!

 

문제가 있다.

 

위 코드에서 정의된 "writer"을 통해서 html을 써넣으려니(자바 코드에 html 코드를 써넣으려니..)

보기에 너무 불편하고 java, html 코드가 같이 있어서 매우 힘들다..

 

그래서 html을 만들어놓고 지정한 부분만 동적으로 html 코드가 생성되도록 해보자!

 


다음은 JSP를 이용하여 HTML코드에 JAVA코드를 심어 놓은 것이다!

 

<%@ page import="hello.servlet.domain.member.MemberRepository" %>
<%@ page import="hello.servlet.domain.member.Member" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
// request, response 사용 가능
 	MemberRepository memberRepository = MemberRepository.getInstance();
 	System.out.println("save.jsp");
 	String username = request.getParameter("username");
 	int age = Integer.parseInt(request.getParameter("age"));
 	Member member = new Member(username, age);
 	System.out.println("member = " + member);
 	memberRepository.save(member);
%>
	<html>
		<head>
 		<meta charset="UTF-8">
		</head>
		<body>
			성공
			<ul>
 				<li>id=<%=member.getId()%></li>
 				<li>username=<%=member.getUsername()%></li>
 				<li>age=<%=member.getAge()%></li>
			</ul>
			<a href="/index.html">메인</a>
		</body>
	</html>

출처 : 인프런 - Spring MVC 1편 (김영한 개발자님) 강의의 예제 코드

 

html 코드에 자바코드를 심었다.

그럼 서블릿에서 html 코드를 하나하나 보내지않아도 된다.

 

JSP는 html 코드 안에 있는 자바코드이며

전역객체, 자바 함수, 변수 등등을 사용할 수 있다.

 

이렇게 한다면 서블릿에서 해당 html 파일을 호출하는 코드를 추가해야할 것이다.

컨트롤러를 다음 코드처럼 바꾸어 주자!

 

@WebServlet(name = "ServletTest", urlPatterns = "/servlet")
public class HttpServletTest extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        // view가 저장되어있는 path
        String Path = ""/WEB-INF/views/test.jsp";

        // dispatcher에 path 등록
        RequestDispatcher dispatcher = req.getRequestDispatcher(Path);

        // dispatcher를 통해서 view를 리턴
        dispatcher.forward(req, resp);


    }
};

 

  • dispatcher.forward : 다른 jsp나 서블릿으로 이동시켜주는 dispatcher의 메서드이다.

참고로 jsp를 사용하려며 관련 라이브러리를 다운로드받아야 한다.

 

더더욱 알아보기가 편해졌고 코드 오류도 덜 나게 되었다!

 


또 문제가 있다.

 

위의 JSP 코드를 보면 JSP 1개에 너무나 많은 기능이 있는 것이다.

 

수백, 수천 줄이 포함되어야 할

실무 코드에서 HTML에 대한 코드 뿐만 아니라, 비즈니스 로직까지 포함되게 되면

너무나 많은 코드와 너무나 많은 기능을 가지고 있을 것이다.

 

더군다나, JSP내용이 그대로 HTML 코드에 나와 위험하다.

 

그래서 이또한 코드로 분리를 해야 한다.

그래서 MVC 패턴이 나오게 되었다.

 

그럼 MVC가 무엇인지 알아보자!

 

M : Model

 

V : View

 

C : Controller

 

이다.

 

Model : 뷰에 그려 넣을 내용을 담아두는 객체이다. 사용자에 따라, 행동에 따라 다른 내용을 가지고 있다.

 

View : 뷰에서는 Model에 들어있는 내용에 따라 동적으로 화면을 그린다.

 

Controller : HTTP 요청을 받고 필요한 작업(유효성 검사, http 검사 등등)들을 수행한 다음, 비즈니스 로직을 실행한다. 그리고 뷰에 넘어갈 모델에 필요한 내용을 담아준다.

 

그림을 통해서 살펴보자!

 

 

위의 그림에서 보면

 

  1. View에서 사용자 요청
  2. Controller가 모델을 조작 및 응답할 View 선택
  3. 선택된 View는 컨트롤러로부터 받은 Model을 보며 View 생성

 

Model, Controller, View가 서로 상호작용하며 움직이는 것을 볼 수 있다.

 

 


글을 마치며

 

html 코드에 자바코드를 심어놓는 작업을 마쳤다.

하지만

여러가지의 문제가 있다.

 

다음 글에서 해당 문제와 해결하는 과정을 밟아보자!

300x250
Comments