돔(DOM)이란 Document Object Model의 약자로HTML 및 XML 문서를 웹 브라우저가 인식한 객체를 의미(일종의 인터페이스)
DOM은 다음과 같은 다음과 같은 workflow를 따른다. 즉 html를 읽어서 DOM 트리, CSS 트리를 만들고 DOM의 위치를 잡고 거기에 그리고 색을 채운다.
2. DOM의 단점?
단순히 HTML을 서버에서 받아 브라우저에 그릴 때는 문제가 생기지 않는다 하지만 SPA(Single page application) 같은 것들이 생겨나면서 자바스크립트를 이용해 DOM을 변경하려고 브라우저에 요청을 할 경우 다음과 같은 문제가 발생한다. 예를 들어 트위터나 페이스북에서는 스크롤을 내리면 많은 데이터가 로딩이 되고 이는 쉽게 말해 div가 많아진다는 의미인데 이때 javascript를 이용하여 DOM을 조작하면 성능에 이슈가 생긴다. 왜냐하면 위 그림과 같은 workflow가 다시 이루어지기 때문이다. 이때 만약 100번을 요청했다면 100번을 다시 painting 하는데 이러한 이슈가 발생한다.
ex) <ul> 내부에 li를 추가할때 개수가 매우 많아지면 브라우저 속도가 느려지는 이슈 발생
3. Virtual DOM 이란?
DOM의 이슈를 Virtual DOM으로 해결할 수 있다. 100번의 DOM 조작 요청이 오면, 가상 돔은 브라우저 대신 변경 내용을 가상 돔에 반영한다.(이때 화면에 그리지 않음) 변화가 반영되었다면 내용을 브라우저에게 전달하여 그리게 한다.(100번 그리던 것을 1번만 그린다) 따라서 다음과 같은 이슈를 Virtual DOM을 통해 개선할 수 있다.
기본적인 흐름을 알기 위한 코드로 form 안에 username을 입력하기 위한 input과 password를 입력하기 위한 input이 존재한다 form은 POST방식으로 전달하기 위해 method = POST이며, action은 실제 서블릿에서 DoLogin이라는 함수에서 처리한다는 의미이다.
#3. index.html 결과 화면
html 결과
만약 html을 성공적으로 작성하고 실행하였다면 다음과 같은 결과가 확인된다.
이때 사용자가 제출 버튼을 누르게 된다면 다음과 같은 오류 화면이 발생할 것이다.
error 화면
왜냐하면 /DoLogin을 처리해줄 서블릿이 존재하지 않기 때문이다 따라서 /DoLogin을 처리해줄 서블릿을 생성해보자.
#4. 서블릿 생성 하기
서블릿 패키지 생성
생성된 프로젝트에Src를 우클릭하여 다음과 같이Package를생성한다. 패키지명은 원하는 명으로 해도 상관없으나 이 프로젝트에서는 servlet이라고 패키지명을 작성하였다.
서블릿 생성
생성된 패키지를 우클릭하여 New > Servlet을 클릭하여 서블릿을 생성한다
서블릿 생성
서블릿 명은 DoLogin으로 작성 하였다 (이는 html form에서 action을 DoLogin으로 지정했기 때문)
서블릿 생성
다음은 자동으로 URL이 /DoLogin으로 매핑되어있으므로 건드리지 않고 넘어간다.
서블릿 생성
다음은 재정의 하여 사용할 함수의 목록을 보여준다 아래에 현재 doPost와 doGet이 체크되어있지만 실습에서는 POST를 사용하기로 하였으므로 doPost만 체크하고 서블릿 생성을 완료한다.
생성된 DoLogin 서블릿의 코드는 다음과 같다.
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class DoLogin
*/
@WebServlet("/DoLogin") //URL에노테이션으로 되어 있음
public class DoLogin extends HttpServlet { //HttpServlet상속 받아야함
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public DoLogin() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String username = request.getParameter("username");
String password = request.getParameter("password");
PrintWriter out = response.getWriter();
String htmlResponse = "<html>";
htmlResponse += "<h2> Your name is : " + username + "<br/>";
htmlResponse += "<h2> Your password is : " + password + "<br/>";
htmlResponse += "</html>";
out.println(htmlResponse);
}
}
String username = request.getParameter("username")으로 form의 username input이 보낸 value를 저장하고
PrintWriter를 사용해 html을 response해준다.
@WebServlet("/DoLogin")이 부분이 form에서 /DoLogin으로 요청을 보낸 부분을 처리하겠다고 명시해주는 에노테이션 부분이다. 에노테이션에 대한 자세한 설명은 ~~에서 확인할 수 있다.
#5. 프로젝트 실행 결과
다음과 같이 서블릿을 생성을 완료하고 이전과 같이 html을 제출하였다면 다음과 같은 화면이 보이게 될 것이다.
프로젝트 성공
5. 설명
코드 구조
프로젝트에서 작성한 구성을 그림으로 표현하면 다음과 같다 사용자는 html폼을 이용하여 POST방식으로 /DoLogin이라는 요청을 보내고 서블릿에서는 DoLogin 클래스의 재정의된 doPost를 사용하여 이를 처리하여 사용자에게 다시 반환하는 방식이다.
