[Web basic (2)] Servlet, JSP, Thymeleaf (DAY 46)

[ Servlet ]

1. FYI

• Spring을 사용해서 코딩할 것이므로, 옛날 기술인 Servlet과 JSP은 코드를 외울 필요는 없고 구조만 이해하면 된다.

2. Servlet이란?

• java에서 제공하는 클래스로,클라이언트 사이드에서 보낸 http 통신의 요청에 대해서 응답을 하는 역할

• 작동 원리 :

  1) 클라이언트에서 요청 보냄
  2) 웹서버에서 요청 수령
  3) 웹서버가 WAS에 동적 페이지에 대한 처리 요청
  4) WAS(Tomcat 등)는 어플리케이션 실행 시 Servlet를 호출하여 객체 생성 및 초기화(@WebServlet 붙어 있는 클래스 찾아서)
  5) 클라이언트의 요청 시, 위 Servlet의
  -HttpServletRequest 및 HttpSerlet Response 생성
  -Service() 메서드 호출하여 동적 페이지 처리하는 로직 및 html 생성

3. 사용 코드

• @WebServlet("/basic") : http://서버주소/basic으로 요청이 들어오면, 이 서블릿 클래스가 작동하게 해주세요.
• service()메서드
  -- HTTP요청과 응답을 실질적으로 처리함
• req.getMethod();
  1) req : 클라이언트 사이드에서 요청을 하면 자동으로 톰캣을 통해 HttpServlet/HttpServletResponse/HttpServletReuqest req 객체가 생성됨.
  2) getMethod() : get, post 등. 브라우저 개발자모드>네트워크에서도 확인 가능
• req.getParameter("쿼티스트링 key값") : 쿼티 스트링 밸류 반환
  • 쿼티 스트링이란?
    => 서버로 정보를 전달하기 위해 URL에 추가로 붙여지는 데이터로,
    ?로 시작하며 키과 값 쌍으로 구성됨(예시) ?name=kim&age=10&grade=F)
• req.getParameterValues("쿼티스트링 key값") : 쿼리 스트링 밸류를 String[]로 반환
• (HttpSerletResponse) resp.setStatus(http 상태코드)
  -- http 상태코드 :
• Writer w = resq.writer();
  -- html 적어주는 부분
• HttpServletRequest.getRequestDispatcher(리소스) : RequestDispatcher 객체 반환
• RequestDispatcher.forward(HttpRequestServlet, HttpResponseServlet) :위에서 만든 Request Dispatcher 객체를 jsp 파일에 전달

/* java 코드로 비즈니스 로직 처리하는 코드 작성 하기에는 servlet이더 편하지만
   html 생성은 jsp로 코드 짜기가 더 편하니까 jsp에 시켜 버리자
   그렇게 하기 위해 view forwarding을 하자(보이는 view, 즉 html은 jsp에 시키자. */
   
RequestDispatcher dispatcher
    // HttpServletResponse.getRequestDispacher(리소스) :
    //  -> 특정 리소스(예: JSP, 서블릿 등)의 경로를 인수로 받아 RequestDispatcher 객체를 반환
   = req.getRequestDispatcher("/WEB-INF/chap04/dancer/register.jsp");

    // 위에서 만든 RequestDispatcher를 jsp 파일에 보내자
    dispatcher.forward(req, resp);

• HttpRequestServlet.setAttribute(속성 이름, 속성값)
  : RequestDispatcher를 통해 HttlRequest/ResponseSERVLET를 JSP에서 전달해서 JSP에서 html 생성해달라고 요청할 때, JSP가 알아야 할 정보가 있다면 setAttribute를 통해 전달. 이 값은 JSP에서 EL(Expressive Language; ${})를 통해 받아옴

/*
   Servlet이 RequestDispatcher를 통해 HttlRequest/ResponseServlet을 JSP에서 전달해서 JSP에서 html 생성해달라고 요청할 때,
   먼저 HttpRequestServlet에 필요한 정보를 전달해주어야 함
   => 어떻게??
   => 1) Servlet에서 HttpRequestServlet.setAttribute(String 속성이름, Object 속성값)로 전달하고자 하는 정보 저장
      2) JSP에서 EL(Expressive Language)인 ${}로 정보를 가져올 수 있음
*/
   req.setAttribute("dancer", dancer);   

• HttpRequestServlet.sendRedirect("/mvc/v1/show")
  : 서블릿에서 클라이언트를 새롱누 url로 redirection

[ JSP(Java Server Page)]

0. FYI

• Spring을 사용해서 코딩할 것이므로, 옛날 기술인 Servlet과 JSP은 코드를 외울 필요는 없고 구조만 이해하면 된다.

1. JSP란?

• 클라이언트가 동적 웹페이지를 요청하였을 때, 비즈니스 로직 처리, DB 조회, html 생성을 처리하는 템플릿
• 작동 원리 : 클라이언트에서 요청 보냄 -> 웹서버에서 요청 수령 -> 웹서버가 WAS에 동적 페이지에 대한 처리 요청 -> WAS는 servlet 호출 -> 이 때, WAS가 JSP 파일(jsp에서 동적 페이지 처리하는 로직 및 html 생성하는 템플릿) servlet으로 자동 변환함
  (이 때, servlet으로 변환된 파일은 tomcat의 경우 tomcat > work > tomcat > localhost > root > org > jsp 폴더 안에 저장되어 있음

2. 동적 웹페이지 파일 저장 위치

• SRC > webapp > WEB-INF

3. 사용 코드

• Maven 빌드 도구 사용 시, JSP 파일은 정적 웹페이지 저장 위치인 webapp 경로 저장
  

• <%@ page %>
  : 페이지 설정 관련 JSP 지시어 문법
  

• <%@ taglib %> : 라이브러리 가져오기

 // uri에 적힌 라이브러리를 사용할 건데
 // 이 라이브러리를 사용할 떄는 prefix인 c를 사용하여 <c: > 형태로 쓰겠다. --%>
 <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

- 파일 가져오기 : <%@ include file=공통조상으로 부터의 파일경로.확장자 %>

• <% %> (스크립틀릿)
  : java 코드 넣을 때 사용
• <%= =>
  : System.out.println()
• ${}
  : servlet에서 setAttribute(String 속성이름, Object 속성값)으로 전달할 정보를 가져 오는 EL(Expressive language)

      /* 아래에서 ${dancer.name}의 경우,
         Servlet에서 HttpServletRequest.setAttribute("dancer"(String 속성이름), dancer(Object 속성값))으로
         설정한 후 RequestDispatcher를 forward하여dancer 객체를 보내준 것을
         EL(EXPRESSIVE LANGUAGE)를 통해 받아오는 기법이다.
         이 때, crew가 private field 더라도 EL에서 자동으로 dance.crew를       dance.getCrew()로 변환해준다.
      */ 
<h2>${dancer.name}님 (소속: ${dancer.crewName})이 정상 등록되었습니다.</h2> 

• <c:forEach>
  : <%@ taglib %>를 통해 가져온 태그를 사용하겠다.

      // jstl 라이브러리를 가져와서 <c:> 형식의 태그로 쓰겠다.
      <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
      
      // jstl 태그의 forEach 태그를 쓰겠다
      <c:forEach var="d" items="${dancers}">
           <li>
             # 이름: <span class="dancer-name">${d.name}</span>,
             # 크루명: ${d.crewName},
             # 수준: ${d.danceLevel}
             <button class="del-btn">삭제</button>
           </li>
     </c:forEach>
     //  이렇게 하면, 이 파일이 servlet으로 변환되면서 자동으로 태그를 생성해줌 

• window.location.href = "path" : javascript 이동해 준다.
  
  
  

[ ThymeLeaf(타임리프) ]

1. 타임리프가 뭐야?

• 백엔드에서 렌더링할 때, html 코드를 좀 더 쉽게 쓸 수 있게 해주는 템플릿

2. 동적 웹페이지 코드 저장 위치

• src > resources > templates > 000.html

3. 사용코드

• 컨트롤러에서 가져온 데이터(Model.addAttribute로)를 가져와서 쓰는 법

  <p th:text="'Welcome, ' + ${name} + '!'">Welcome, Guest!</p>

• 반복문 등 java 명령문 사용

  // JSP : <c:forEach var="item" items="${items}"></c:forEach>
  <ul>
    <li th:each="item : ${items}" th:text="${item}">Sample Item</li>
  </ul>

• 파일 삽입 :
  1) fragment 로 지정

  <div th:fragment="fileToInsert">

  2) frag 가져오기

  <div th:insert="~{commonParentFolder.fileName :: header}">  

[ 빌드 도구 ]

1. 용도

• 의존성(라이브러리 관리)
  -> 외부 라이브러리를 pom 파일에서 자동으로 다운로드 및 관리
• 컴파일
  -> HTML, CSS, JavaScript는 브라우저가 바로 읽을 수 있지만, 서버 사이드 언어인 Java는 컴파일 과정을 거쳐야 함

2. Maven

• Maven으로 빌드할 경우, 초기 페이지는 루트 디렉토리(초기 세팅 : src > webapp 폴더)에 저장된 index.jsp 파일이 불러와짐
  -- 루트 디렉토리 변경 : pom.xml 파일에서 가능
  -- index.jsp 파일이 아닌 다른 파일로 초기 페이지 설정 : web.xml 파일에서 설정 가능