Web의 변천사 (HTML -> Servlet -> JSP -> MVC -> Spring)

자바 서블릿이란 자바를 사용하여 웹페이지를 동적으로 생성하는 서버측 프로그램.

쉽게 이야기하면, 클라이언트가 서버에 요청을 보낼 때와 응답을 받을 때 필요한 HTTP 작업을 도와주는 것.

Web HTML -> Servlet -> JSP -> MVC -> Spring

1. Web HTML

- 기존의 웹은 위의 사진처럼 HTML / CSS / JS를 활용한 하나의 페이지만 보여주는 정적 페이지였다.

- 동적 프로그래밍에 대한 희망

그로인해 Servlet, JSP가 나오게 됨 (Dynamic Web Project 생성)

- 브라우저의 요청에 따라 항상 다른 페이지를 보여주는 페이지

Servlet

- 자바를 사용하여 웹페이지를 동적으로 생성하는 서버 측 프로그램.

- 웹 클라이언트의 요청을 처리할 수 있는 클래스(Class) HttpServlet을 상속하여 만들어진다.

package sample3;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.Arrays;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class HelloServlet extends HttpServlet {
	
/*
 		Servlet : Java(Html)
 		Jsp : Html(Java)
*/	

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		resp.setContentType("text/html; charset=utf8");

		String name = req.getParameter("name");
		String age = req.getParameter("age");
		String food[] = req.getParameterValues("food");

		PrintWriter pw = resp.getWriter();

		pw.println("<html>");

		pw.println("<head>");
		pw.println("<title>제목</title>");
		pw.println("</head>");

		pw.println("<body>");
		pw.println("<h3>이름 : " + name + "</h3>");
		pw.println("<p>나이 : " + age + "</p>");
		if (food != null) {
			for (int i = 0; i < food.length; i++) {
				pw.println("<p>좋아하는 음식 : " + food[i] + "</p>");
			}
		}
		pw.println("</body>");

		pw.println("</html>");
		pw.close();
	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

	}

}

- Java코드 내에 HTML 코드를 작성한다.

단점

- 서블릿만 사용할 경우 HTML 출력이 상대적으로 어렵다는 문제가 있다.

PrintWrite 객체를 통해 브라우저에서 보일 HTML을 출력할 수 있지만, HTML코드가 1000,10000만줄이 된다면 유지보수가 매우 어려울 것이다.

JSP

- Java Server Pages의 약자로 자바로 작성한 서버페이지! 로 해석될 수 있다.

즉, 자바로 작성한 서버에서 실행되는 페이지이다. 이를통해 페이지를 서버에서 동적으로 만들어 줄 수 있다.

<%@page import="dto.MemberDto"%>
<%@page import="dao.MemberDao"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
<%
//	request.setCharacterEncoding("utf-8");

	String id = request.getParameter("id");
	String pwd = request.getParameter("pwd");
%>   
    
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<%
MemberDao dao = MemberDao.getInstance();

MemberDto mem = dao.login(new MemberDto(id, pwd, null, null, 0));

if(mem != null && !mem.getId().equals("")){
	
	session.setAttribute("login", mem);
	session.setMaxInactiveInterval(60 * 60 * 2);
	%>
	<script type="text/javascript">
	alert("안녕하세요. <%=mem.getName() %>님");
	location.href = "bbslist.jsp";
	</script>
	<%
}else{
	%>
	<script type="text/javascript">
	alert("아이디나 패스워드를 찾을 수 없습니다");
	location.href = "login.jsp";
	</script>
	<%
}
%>


</body>
</html>

- HTML코드 내에 <%%> 문법을 활용하여 Java 코드를 작성한다. 보통 View의 역할을 담당한다.

JSP는 Servlet이다.

JSP는 JAVA파일로 변환 -> 컴파일 -> 인스턴스(객체 생성) -> jsp -> Servlet으로 변환되어 동작된다.

JSP 와 Servlet의 호출 방식 차이

JSP방식 - 클라이언트의 요청을 JSP파일로 받음

Servlet방식 - 클라이언트 요청을 Servlet으로 직접 받음

- 브라우저가 Java코드를 요청함 / 근데 이는 말이 안되므로 web.xml이나 어노테이션을 통해 톰캣에 등록을 해줘서 브라우저가 찾아서 실행 시킬 수 있도록 한다.

그럼 Servlet은 어떻게 url에 어떻게 매핑될까?

1. web.xml 방식

- Servlet 과 Servlet-mapping 선언

- servlet-name에 같은 이름 지정

- servlet에는 Servlet.java 파일의 폴더위치와 파일 이름설정

- Servlet-mapping에는 실제 url 주소로 매핑될 이름 설정

2. 어노테이션 방식

- 'url/hello'로 접근하면 해당 파일을 반환해준다.

MVC

- HTML과 JAVA를 분리하자(Frontend, Backend 분리)

- Java 내부에서 받아들이는 입구와 비즈니스 부분을 분리하는 움직임이 생겨남.

M (Model)

- 내부 비즈니스 로직에 해당. 즉, 백그라운드 로직으로써 처리되는 알고리즘, 데이터, DB와의 상호작용 등을 담당.

V (View)

- UI를 의미. 요청에 대한 처리결과를 View를 통해 클라이언트에게 화면을 통해 보여줌

C (Controller)

- Model과 View 사이에서 중계자 역할을 수행하며, 클라이언트의 요청을 처리하고 흐름제어를 담당.

MVC Model1

- View와 Controller 를 JSP에서 모두 구현하는 구조.

즉, 사용자의 요청처리와 요청에 대한 응답처리를 JSP에서 모두 구현하는 구조이다.

로그인 페이지를 예시로 들어보자

- index.jsp

먼저 index.jsp가 실행되면 "login.jsp" 파일로 redirect 시켜준다.

- login.jsp

1. login.jsp 에서는 사용자에게 보여질 부분을 form으로 보여준다.

2. form에서 입력한 내용을 다시 "loginAf.jsp"로 요청을 한다.

- loginAf.jsp

1. loginAf에서는 클라이언트에게 보여 줄 필요가 없다.

2. form에서 보낸 데이터 값을 <%%>(scriptlet)을 활용하여 받고 데이터를 처리한 뒤

3. 처리 결과에 맞게 jsp 파일로 보내준다.

결론

- 기능이 추가될 때 마다 form.jsp같이 입력될 페이지가 필요하고, 입력받은 내용을 처리하기 위한 jsp파일이 하나씩 추가가 될 것이다.

장점

위의 특징때문에 MVC Model1구조는 흐름이 단순하기 때문에 개발이 쉽고, 중소형 프로젝트에 적합하다.

단점

프로젝트의 규모가 커질수록 유지보수가 어려워진다.

MVC1 으로 개발했을 때 발생했던 문제점

https://thsd-stjd.tistory.com/151

MVC Model2

View와 Controller가 분리된 구조이다.

클라이언트의 요청을 Servlet이 처리하고 사용자 인터페이스를 보여주는 View는 JSP에서 담당한다.

Contrller와 View를 분리함으로써 클라이언트의 요청처리 부분과 응답처리 부분을 분리하여 각 로직을 독립적으로 수행할 수 있다.

장점

유지보수 측면에서 매우 좋고 디자이너와 개발자간의 협력이 수월하다.

단점

프로그램의 흐름이 복잡하기 때문에 개발 난이도가 높으며, 설계에서 어려움을 겪을 수 있다,

보통 우리가 말하는 MVC는 MVC Model2 이다.

MVC 패턴

Model - JAVA

View - JSP파일

Controller - Servlet

하지만 MVC Model2 패턴도 문제점이 있다.

[MemberFormServlet] / [MemberSaveServlet] / [MemberListServlet]

1. 각 Servlet의 service() 메서드에서 공통되는 부분이 많다.

2. viewPath를 입력할 때 공통되는 부분이 반복된다.

3. HttpServletRequest request, HttpServletResponse response 중에서 안 쓰는 코드가 존재한다.

4. 각 컨트롤러에서 공통으로 처리해야 하는 부분이 많다면 모든 컨트롤러가 복잡해진다.

이를 해결하기 위해 나온 패턴이 프론트 컨트롤러(FrontController) MVC

1. 클라이언트의 HTTP 요청은 FrontController에서 받습니다.

2. FrontController는 requestServlet에서 파라미터를 파싱하고, 사용자 요청에 맞는 컨트롤러를 호출하면서 paramMap과 model 객체를 넘겨줍니다.

3. 사용자 요청에 해당하는 컨트롤러는 paramMap에서 데이터를 받아서 비즈니스 로직을 수행하고 model 객체에 데이터를 다시 담아서 넘겨줍니다. 이 때, 클라이언트에게 돌려줄 ViewName을 같이 보내줍니다. 이 때, ViewName은 Prefix나 Suffix를 제외한 부분만을 리턴합니다.

4. viewResolver는 컨트롤러가 반환한 ViewName을 정확한 원본 ViewName(MyView)로 만들어줍니다.

5. FrontController는 MyView 객체를 통해 HttpServletRequest에 model에 대한 데이터를 담고 dispatcher를 통해 view를 Forwarding합니다.

Spring MVC

Spring boot

- Spring을 사용하기 더욱 간편하게 만든 것

- Servlet과 JSP는 서버사이드렌더링 방식이다. (리액트, 뷰의 탄생배경)

SSR(Server Side Rendering)

- 서버로부터 어느정도 완성된 HTML 파일을 받은 뒤, 렌더링하는 방식

- 유저의 작동에 따라 매번 새로운 페이지를 서버에서 전송해줬음(SSR)
-> 페이지 용량이 커짐에 따라 유저의 클릭한번에 새로운 페이지를 로딩하는게 버거워졌음
-> SPA의 탄생배경

SPA(Single Page Application)

- 화면 이동시 필요한 데이터를 서버에서 HTML로 전달받지 않고 필요한 데이터만 서버로부터 JSON으로 전달받아 동적으로 렌더링한다.

- 전체가 리로딩 되는 것이 아니라 부분적으로 변경이 된다. (페이지 변경이 빨라짐)

정리

서버를 이용하여 페이지를 구성하는 특징때문에 CSR 보다 페이지 구성속도는 늦지만 사용자에게 보여주는 컨텐츠 구성이 완료되는 시점은 빨라짐
사용자에게 보여주는 컨텐츠 구성이 완료되는 시점이 빨라 SEO에 효과적!!
하지만 인터랙션이 많은 최근의 사이트 특성상 요청할 때마다 새로고침이 일어나며 페이지를 로딩할 때마다 서버로부터 리소스를 전달받아 해석하고 화면에 렌더링하는 SSR은 비효율적

CSR (Client Side Rendering)

- 최초 요청시에 HTML을 비롯해 CSS, JS 등 각종 리소스를 받아옴.

- 이후에는 서버에 데이터만 요청하고 JS를 사용하여 뷰를 컨트롤하는 방식(화면을 그리는 것을 클라이언트 측에서 수행).

정리

최초 요청시에 HTML을 비롯해 CSS, JS 등 각종 리소스를 받아옴.
단 한번 렌더링을 하기 때문에 페이지 이동시 SSR보다 빠른 페이지 전환 속도를 제공
하지만 초기요청때는 SSR보다 많은 리소스를 요청하기 때문에 처음에는 SSR보다 느림!(HTML 다운 + JS 파일 다운 + 브라우저 렌더링)
사용자에게 보여주는 컨텐츠 구성이 클라이언트 단에서 일어나 처음에는 빈 화면만 로딩되므로 SEO에 비효율적

FrontController 패턴, Command 패턴 예제

FrontController 패턴 클라이언트의 다양한 요청들을 한곳으로 집중시켜서 개발 및 유지보수에 효율성을 극대화 시키는 패턴이다. 이를통해 해당하는 각각의 다양한 요청들에 따라 요청에 맞는 서

chrismare.tistory.com

MVC Model1과 MVC Model2

MVC패턴은 소프트웨어 공학에서 사용되는 디자인 패턴 중 하나입니다.MVC패턴은 사용자 인터페이스와 비즈니스 로직을 분리하여 각각의 로직을 독립적으로 운용하여 유지보수를 용이하게 만들

velog.io

'개념공부 > BackEnd' 카테고리의 다른 글

[Django linux-redhat 배포 시] mysqlclient 2.2.4 ver 설치 에러 subprocess-excited-with-error / mysql-devel 설치 시 mariadb-devel로 인식되는 오류 해결 (0)	2024.02.20
[JSP / FileUpload / AJAX] 파일 다운로드 + 다운로드 수 실시간 올리기 (0)	2022.07.07
스레드와 메모리구조 (0)	2022.06.21
[REST] RESTFul 설정 순서 (0)	2021.10.29

29살 아저씨의 코딩 일상

Web의 변천사 (HTML -> Servlet -> JSP -> MVC -> Spring)

Web HTML -> Servlet -> JSP -> MVC -> Spring

1. Web HTML

Servlet

JSP

JSP 와 Servlet의 호출 방식 차이

MVC

MVC Model1

MVC1 으로 개발했을 때 발생했던 문제점

MVC Model2

- Servlet과 JSP는 서버사이드렌더링 방식이다. (리액트, 뷰의 탄생배경)

SSR(Server Side Rendering)

CSR (Client Side Rendering)

'개념공부 > BackEnd' 카테고리의 다른 글

댓글

티스토리툴바

Web의 변천사 (HTML -> Servlet -> JSP -> MVC -> Spring)

Web HTML -> Servlet -> JSP -> MVC -> Spring

1. Web HTML

Servlet

JSP

JSP 와 Servlet의 호출 방식 차이

MVC

MVC Model1

MVC1 으로 개발했을 때 발생했던 문제점

MVC Model2

- Servlet과 JSP는 서버사이드렌더링 방식이다. (리액트, 뷰의 탄생배경)

SSR(Server Side Rendering)

CSR (Client Side Rendering)

'개념공부 > BackEnd' 카테고리의 다른 글

관련글

댓글

티스토리툴바