03.쿼리 스트링, 템플릿 엔진(ex)jsp,리다이렉션

박선규's avatar
Jan 25, 2024
03.쿼리 스트링, 템플릿 엔진(ex)jsp,리다이렉션
 

쿼리 스트링(Query String)

📌
  • 쿼리 스트링(Query String)내가 필요한 데이터를 구체적으로 질의할 때 사용 (구체적 질의) → insert 하는 것이 아니라 select where절에 사용해야 하는 것이다. → insert 할 때는 “쿼리 스트링(Query String)”을 사용하면 안된다.
  • URL에서 사용 된다. (255자 밖에 못 담아서 url에는 전송 데이터를 담지 않고 body에 담는다.) → “body data”를 “payload”라고 한다. → “body data”에 담기 위해 “post”를 사용한다.
  • 쿼리 스트링 기본 모습
    • ?username=ssar&password=1234 // ?key1=value1&key2=value2
      ?를 빼면 x-www-form-url 과 같다. MIME 타입
      ex)논문.com?title=인간경제 ? 키 = 값
 
 
 
 

서블릿(Servlet)

  • 서블릿”“html 코드”“자바 코드”사용하는 것이 가능하다. (자바의 버퍼에 html 코드를 넣어서 자바 코드를 넣을 수 있다.)
  • 자바 코드를 사용하는 것이 가능해 DAO 또한 여러 개 뿌리는 것이 가능하다.
  • “x-www-form-url”이 안 날아오면 html 코드 중 key가 빠진 거니 key가 없는지 확인해야 한다. → input 으로 따지면 name이다.
그림
notion image
  • 한 마디로 요청하면 응답해주는 것이라고 이해하면 된다.
  • 서블릿을 쓰는 이유DB를 조회해 HTML 사이사이에 그 정보를 끼워 넣어 싶어서 이다. → 이렇게 되면 동적 페이지가 된다. → 이러면 코드가 많이 지저분 해진다. (HTML 코드를 수정하기 힘들다)
📌
서블릿을 배우면서 이해한 톰캣에서 제공하는 파싱 기능 문법!
String username = req.getParameter("username"); // 톰캣에서 제공하는 파싱!

템플릿 엔진(Template Engine)

  • 파일을 “서블릿(Servlet)”으로 변환 시켜주는 것이다. (ex) JSP)
  • “서블릿”으로 구현이 힘든 코드를 “템플릿 엔진”으로 구현하면 편해진다.
  • “HTML”“데이터 로직 코드”를 섞은걸 서블릿으로 바꿔주는 기능을 한다. (컨버터 역할)
  • 자바로 HTML처럼 페이지를 만들 수 있다.
  • 정리 → 템플릿 엔진을 쓰면 자바코드를 HTML에 넣을 수 있고 서블릿을 직접 만들어줘서 편하다.
  • 문법 자바 코드에는 <% %> 자바 변수 옆에는 %=로 감싸준다.
📌
컨버터는 한 형식의 데이터를 다른 형식의 데이터로 변환하는 도구나 함수를 의미한다! 최초의 컨버터는 고등학생이 만든 바벨(1.6을 1.5로 바꿔주는 기능)에서 시작되었다. 현재는 자바 프레임 워크의 오픈소스로 모두가 연구하여 발전을 거듭하고 있다.

리다이렉션(Redirection)

  • 웹 브라우저를 한 URL에서 다른 URL로 보내는 과정을 말한다. → 이로 인해 응답이 총 2회 일어난다.
  • HTTP의 리다이렉션은 “3XX” 상태 코드를 사용하여 응답한다. → 301(영구적 리다이렉션), 302(일시적 리다이렉션) 이는 Status에 표기된다.
  • 내가 요청하지 않은 페이지를 출력한다.
로케이션이란? 웹 서버가 브라우저에게 다른 페이지로 이동하라고 지시하는 HTTP 응답 헤더 이로 인해 리다이렉션이 일어난다.

서블릿과 템플릿 엔진의 이해를 위한 코드

꼭 주석을 확인하고 이해를 해야 한다.
  • Servlet에 직접 구현한 코드
    • MainServlet.class
      package com.example.userapp.board; import jakarta.servlet.ServletException; import jakarta.servlet.annotation.WebServlet; import jakarta.servlet.http.HttpServlet; import jakarta.servlet.http.HttpServletRequest; import jakarta.servlet.http.HttpServletResponse; import java.io.IOException; @WebServlet("/main") public class MainServlet extends HttpServlet { @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { resp.setHeader("Content-Type", "text/html; charset=utf-8"); // body의 header에 타입을 알려주는 방법! 이래야 한글 안깨짐 String html = "<!DOCTYPE html>\n" + "<html lang=\"en\">\n" + "\n" + "<head>\n" + " <meta charset=\"UTF-8\">\n" + " <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n" + " <title>Document</title>\n" + "</head>\n" + "\n" + "<body>\n" + " <h1>메인 페이지</h1>\n" + " <hr>\n" + "</body>\n" + "\n" + "</html>"; resp.getWriter().println(html); } }
      JoinServlet.class
      package com.example.userapp.user; import jakarta.servlet.ServletException; import jakarta.servlet.annotation.WebServlet; import jakarta.servlet.http.HttpServlet; import jakarta.servlet.http.HttpServletRequest; import jakarta.servlet.http.HttpServletResponse; import java.io.BufferedReader; import java.io.IOException; @WebServlet("/join") public class JoinServlet extends HttpServlet { @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // username=ssar&password=1234&email=ssar@gmail.com resp.setHeader("Content-Type", "text/html; charset=utf-8"); // body의 header에 타입을 알려주는 방법! 이래야 한글 안깨짐 // BufferedReader br = req.getReader(); // String requestBody = ""; // while (true) { // String line = br.readLine(); // if (line == null) break; // requestBody = requestBody + line; // } // System.out.println(requestBody); // 1. 파싱(parsing) String username = req.getParameter("username"); // 톰캣에서 제공하는 파싱! String password = req.getParameter("password"); String email = req.getParameter("email"); System.out.println("username : " + username); System.out.println("password : " + password); System.out.println("email : " + email); // 2. 유효성 검사 (1000줄 됨) if (username.length() < 3 || username.length() > 10) { // 필터링 하듯! resp.getWriter().println("<h1>username 글자수가 3~10 사이여야 합니다</h1>"); } // 3. DB 연결 // 4. DAO의 insert 메서드를 호출 // 5. 메인 페이지 그리기 (비효율적) // 6. 리다이렉트(Redirect) -> 안 쓰면 HTML 코드를 통째로 또 넣어야 해서 엄청나게 긴 코드가 되서 지저분해진다. //resp.sendRedirect("/main"); // 5의 메인 페이지 그리기는 간략화해서 하는 방법이라 보면 된다. // 위의 sendRedirect를 풀어 쓰면 아래의 두 줄이다. resp.setStatus(302); // 프로토콜로 상태코드가 302여야 리다이렉트가 가능하다. resp.setHeader("Location", "/main"); resp.setHeader("clock", "12pm"); } }
      JoinFormServlet.class
      package com.example.userapp.user; import jakarta.servlet.ServletException; import jakarta.servlet.annotation.WebServlet; import jakarta.servlet.http.HttpServlet; import jakarta.servlet.http.HttpServletRequest; import jakarta.servlet.http.HttpServletResponse; import java.io.IOException; import java.time.LocalDateTime; @WebServlet("/join-form") public class JoinFormServlet extends HttpServlet { @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { LocalDateTime now = LocalDateTime.now(); String html = "<!DOCTYPE html>\n" + " <html lang=\"en\">\n" + " <head>\n" + " <meta charset=\"UTF-8\">\n" + " <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n" + " <title>Document</title>\n" + " </head>\n" + " <body>\n"; for (int i = 0; i < 5; i++) { html = html + " <h1>" + i + "회원가입 페이지" + now + "</h1>\n"; } html = html + " <hr>\n" + " <form action=\"/join\" method=\"post\">\n" + " <input type=\"text\" placeholder=\"username\" name=\"username\">\n" + " <input type=\"text\" placeholder=\"password\" name=\"password\">\n" + " <input type=\"text\" placeholder=\"email\" name=\"email\">\n" + " <button>회원가입</button>\n" + " </form>\n" + " </body>\n" + " </html>"; resp.getWriter().println(html); } }
  • Template Engine에 직접 구현한 코드
    • 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>
      join.jsp
      <%@ page contentType="text/html;charset=UTF-8" language="java" %> <% // username=ssar&password=1234&email=ssar@gmail.com response.setHeader("Content-Type", "text/html; charset=utf-8"); // body의 header에 타입을 알려주는 방법! 이래야 한글 안깨짐 // 1. 파싱(parsing) 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. 유효성 검사 (1000줄 됨) if (username.length() < 3 || username.length() > 10) { // 필터링 하듯! response.getWriter().println("<h1>username 글자수가 3~10 사이여야 합니다</h1>"); return; } // 3. DB 연결 // 4. DAO의 insert 메서드를 호출 // 5. 메인 페이지 그리기 (비효율적) // 6. 리다이렉트(Redirect) -> 안 쓰면 HTML 코드를 통째로 또 넣어야 해서 엄청나게 긴 코드가 되서 지저분해진다. //resp.sendRedirect("/main"); // 5의 메인 페이지 그리기는 간략화해서 하는 방법이라 보면 된다. // 위의 sendRedirect를 풀어 쓰면 아래의 두 줄이다. response.setStatus(302); // 프로토콜로 상태코드가 302여야 리다이렉트가 가능하다. response.setHeader("Location", "/board/main.jsp"); response.setHeader("clock", "12pm"); %>
      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>
두 구현 코드는 기능은 동일하지만 어떻게 구현했는지의 차이만 존재한다. 이를 바탕으로 사용하고 싶은 코드 손에 더 잘 맞는 코드를 사용하면 된다.

자바의 최신 문법이 적용되지 않을 시 프로젝트의 자바 레벨을 확인하고 수정해야 하는데 방법은?
notion image
notion image
그림처럼 진행하면 된다!
 
 
 
 
 
 
Share article
RSSPowered by inblog