서블렛 정리본에서 페이지 마다 서블렛을 하나씩 만들어서 사용했다. 이러면 안된다고 했지? 그러니 그 3개의 서블렛을 하나로 합칠 것이다 (= 라우터 만들것)
1. 탬플릿 엔진이란?
탬플릿 엔진을 사용하면 HTML 코드와 Java 코드를 조합하여 웹 애플리케이션을 개발할 수 있다. 자바코드에 html, css 섞는게 너무 힘들고 불편 한 거... 기억나지요? (ex. "+흑흑+") 이럴때 탬플릿 엔진을 사용하면 'html 코드에 자바 코드를 삽입할 수 있게 해준다!' 탬플릿 엔진이란, 실행시에 자바 서블릿 코드로 바꿔주는 것! html에 자바코드를 적은걸 자바코드에 html 코드가 섞인 걸로(서블릿) 바꿔주는 것 = 이렇게 바꿔주는 것을 컴버터한다 라고 하고, 이런게 바로 템플릿 엔진의 기능이다
나는 html로 적고, 거기다가 java코드를 쓸 테니까, 니가 알아서 바꿔서 실행해줘 나는 개발을 1.6으로 할테니, 엔진 너는 1.5로 컴버터(바꿔라)해라. ...이런게 바로 엔진이 하는 일
컴버터란?
일반적으로 데이터나 형식을 한 형태에서 다른 형태로 변환하는 도구
2. 탬플릿 엔진 문법 (JSP)
템플릿 엔진을 사용하려면 어떤게 자바코드고 어떤게 html 코드인지 구분시켜줘야 엔진이 작동할 것! 그걸 구분할 수 있는 문법은 바로 자바 코드를 <% %> 로 감싸는 것이다. (=이렇게 쓰는게 바로 JSP)
<% 여기에 있는 것은 자바코드 입니다 %> 이렇게 사용한다. 물론 자바 코드를 닫는 } 이 부분도 <% } %> 로 해줘야한다. 변수를 출력할 때는 <%=now%> > 출력하고 싶으면 = 을 적음. =는 printWriter라는 말
<% %> 기호는 JSP(JavaServer Pages)에서
서버 사이드 랜더링(Server-Side Rendering)을 위해 사용되는 구분자!
탬플릿 엔진은 HTML코드에 자바 코드를 넣을 수 있어서
내가 서블렛으로 변환하지 않아도 되어 너무 편합니다!
내가 편하게 <% %> 이런 걸로 적으면 톰캣이 알아서 서블렛으로 촤라라락 해줌
템플릿 엔진 = 톰캣이 들고 있다
예문에서 [ join.jsp ] 는 자바 코드로만 이루어져 있어서 굳이 jsp로 안써도 되는데…
다른 코드들과 통일화 시키는게 좋아서 jsp로 바꿔주겠다.
3. 탬플릿 엔진 사용해보기
아까 만들었던 서블렛 MainServlet, JoinFormServlet, JoinServlet을 쉽게 만들기!
"webapp"에 jsp파일 만들어주기 + 코딩하기 (아래에 전체 코드 있음)
jsp는 파일명으로 검색
아파치가 제일 위에 작성되어 있는 이 공통 로직을 읽어서 .jsp파일이구나. 자바구나. 하고 톰캣한테 위임한다. 그럼 톰캣은 이 파일을 서블렛으로 변환시켜서 실행한다. (톰캣이 일한다!)
[ 결과 ]
이런 자바 코드들을 톰캣이 읽음
엄청 편하죠? 우리가 아까 서블렛에서 HTML 코드 힘겹게 적었던 그 파일들을.. JSP로 간단하게 만들었다
전체 코드
다이렉트 접속을 막기 위해서 board와 user 디렉토리를 WEB-INF로 넣을 수 있다
[ board - main.jsp ]
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>Title</title> </head> <body> <h1>main page</h1> <hr> </body> </html>
[ user - join.jsp ]
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <% response.setHeader("Content-Type", "text/html; charset=utf-8"); // 1. 파싱 String username = request.getParameter("username"); String password = request.getParameter("password"); String email = request.getParameter("email"); System.out.println("username : " + username); System.out.println("password : " + password); System.out.println("email : " + email); // 2. 유효성 검사 (username에 글자수 제한을 둘 것이다) if (username.length() < 3 || username.length() > 10) { response.getWriter().println("<h1>username 글자수가 3 ~ 10 사이여야 합니다."); return; } // 3. DB 연결 // 4. DAO의 insert 메서드를 호출 // 5. 메인 페이지 그리기 // 6. 리다이렉트 // resp.sendRedirect("/main"); response.setStatus(302); response.setHeader("Location", "/board/main.jsp"); //라우터 없으니까 직접 때림? %>
[ user - join-form.jsp ]
<%@ page import="java.time.LocalDateTime" %> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <% LocalDateTime now = LocalDateTime.now(); %> <html> <head> <title>Title</title> </head> <body> <h1>회원가입 페이지 <%=now%></h1> <hr> <form action="/user/join.jsp" method=""> <input type="text" placeholder="username" name="username"> <input type="text" placeholder="password" name="password"> <input type="text" placeholder="email" name="email"> <button>회원가입</button> </form> </body> </html>
이게 실행되면 join-form.java로 바뀔 것이다.
이걸 톰캣이 들고 있는 템플릿 엔진이 해주는 것
TIP!
insert, delete, update와 같은 요청은 일반적으로 디자인이 없이 처리된다. 이러한 요청은 데이터베이스 작업을 수행하는 것에 중점을 두기 때문에 대부분의 경우에 디자인적인 요소는 간단한 메시지나 결과 페이지를 제공하는 정도로 충분하다. 반면! get 요청은 주로 데이터의 조회를 목적으로 하며, 클라이언트가 웹 페이지를 요청할 때 URL에 매개변수를 포함하여 원하는 데이터를 요청한다. 이 경우 클라이언트는 디자인적인 요소를 고려하여 웹 페이지를 요청하고, 서버는 해당 요청을 처리하여 디자인이 적용된 페이지를 응답한다. 때문에 join.jsp (insert 요청)은 jsp로 만들 필요가 없지만... 통일성을 주기 위해 jsp로 만들었다. -> 자기 마음대로 만들면 협업과 유지보수가 힘들기 때문에 프레임워크를 사용하여 자유성(?)을 뺏는다.
자바 스크립트의 JVM = 브라우저
우리는 JSP 안 쓸 것. 다른 템플릿 엔진 쓸거다.
Share article