25.04.04 (금) 39일차 JSP

허배령·2025년 4월 4일

@WebServlet Dispatcher EL GET JSP1 POST form forward httpServlet input jstl req resp servletProject

괴발개발 TIL

목록 보기

49/54

form 태그

내부에 작성된 input 값을 지정된 경로로 제출

action : 제출할 경로

method : 제출 방법 (GET / POST) 기본값: GET

input 태그

값을 입력하는 양식 제공

name(중요!) : 서버로 제출 시 key 역할

value or 입력된 값 : 서버로 제출 시 value 역할

?inputName=홍길동

POST 방식

GET 방식과는 다르게 전달되는 값을 주소가 아닌 HTTP Body (요청 본문)에 담아서 전달하는 방식

[장점]

데이터를 숨겨서 전달 (보안성 향상)

길이 제한 X

[단점]

캐싱 불가능

서버에서 추가적인 문자 인코딩 처리 필요
(tomcat 10부터 해당 문제 해결!)

tomcat 9 : req.setCharacterEncoding("UTF-8");

JSP/Servlet - GET 방식으로 Form 데이터 전송 후 응답 처리

📌 1. 목표

이름과 나이를 입력받아 서버(Java Servlet) 에 전송하고, 서버에서 응답을 생성하여 HTML로 다시 출력하는 과정 학습.

📋 2. HTML Form 구성

🔹 준비물 요약

항목	설명
`form` 태그	내부 `input` 값들을 서버에 제출
`action`	제출할 서버 경로 지정
`method`	전송 방식 (기본값: GET)
`input` 태그	사용자 입력 필드 제공
`name` 속성	서버 전송 시 key 역할
`value` or 입력값	서버 전송 시 value 역할
`button`	제출 버튼 역할 (`type="submit"`)

<form action="/example1" method="get">
  이름 : <input name="inputName">
  <br>
  나이 : <input type="number" name="inputAge">
  <br>
  <button type="submit">서버로 제출하기(==요청하기)</button>
</form>

🌐 3. GET 방식 동작 원리

요청 방식: GET

요청 주소 예시:
http://localhost:8080/example1?inputName=홍길동&inputAge=25

→ 이렇게 URL 끝에 붙는 부분을 "쿼리 스트링(Query String)"이라고 부른다.

✅ GET 방식의 장단점

장점	단점
단순하고 빠름	요청 데이터가 URL에 그대로 노출됨 (보안 취약)
북마크/공유 가능	데이터 길이 제한 있음 (URL 길이 제한)

🔧 4. Java Servlet 처리 - ExampleController1

public class ExampleController1 extends HttpServlet {
    
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        
        System.out.println("--- 이름, 나이를 입력받아 처리하는 서블릿 코드 ---");

        // 전달받은 값 꺼내기
        String name = req.getParameter("inputName"); // input 태그의 name 속성을 기준으로 추출
        String age = req.getParameter("inputAge");   // HTML에서 가져온 값은 모두 String

        System.out.println("입력받은 이름: " + name);
        System.out.println("입력받은 나이: " + age);

        // 서버 -> 클라이언트 응답 준비

        // 1. 응답 문서의 형식 및 문자 인코딩 설정
        resp.setContentType("text/html; charset=UTF-8");

        // 2. 클라이언트와 연결된 출력 스트림 얻기
        PrintWriter out = resp.getWriter();

        // 3. 응답할 HTML 코드 작성
        StringBuilder sb = new StringBuilder();
        sb.append("<!DOCTYPE html>");
        sb.append("<html><head><title>서버 응답 페이지</title></head>");
        sb.append("<body>");
        sb.append("<h1>응답페이지 입니다</h1>");
        sb.append("<p>입력 받은 이름 : " + name + "</p>");
        sb.append("<p>입력 받은 나이 : " + age + "</p>");
        sb.append("</body></html>");

        // 4. HTML 응답 보내기
        out.write(sb.toString());
    }
}

🧠 5. 용어 정리 및 흐름 요약

🔑 주요 메서드 및 객체

항목	설명
`HttpServletRequest`	클라이언트 요청 관련 정보 제공 (데이터 추출 등)
`HttpServletResponse`	서버 응답 구성 및 전송 기능 제공
`getParameter("name")`	클라이언트가 보낸 파라미터 값 중 name과 일치하는 value 추출
`setContentType()`	응답 형식 지정 (HTML, 한글 깨짐 방지 위해 charset 설정 필수)
`PrintWriter`	텍스트 기반 출력 스트림 (HTML 직접 작성 및 전송 가능)

🔁 6. 전체 요청-응답 흐름 요약

클라이언트가 HTML Form을 통해 /example1 경로로 GET 요청 전송
서블릿 doGet() 메서드가 호출되어 HttpServletRequest 객체로 데이터 추출
서버에서 HTML 응답 코드 작성
HttpServletResponse로 클라이언트에 응답 전송
브라우저에서 HTML 렌더링 결과 출력

📝 기타 참고

form의 method를 POST로 바꾸면 주소창에는 파라미터가 보이지 않으며 doPost()로 받아야 함
실제 실무에서는 GET은 조회성 요청, POST는 등록/수정/삭제 등에 사용함

POST 방식 요청 및 응답

📌 1. 목표

사용자가 입력한 정보를 서버(Java Servlet)로 전송하고, 서버에서 해당 데이터를 받아 HTML로 응답을 생성하여 출력하는 과정 학습.

📋 2. HTML Form 구성

🔹 준비물 요약

항목	설명
`form` 태그	내부 `input` 값들을 서버에 제출
`action`	제출할 서버 경로 지정
`method`	전송 방식 (기본값: GET, 여기서는 POST)
`input` 태그	사용자 입력 필드 제공
`name` 속성	서버 전송 시 key 역할
`value` or 입력값	서버 전송 시 value 역할
`button`	제출 버튼 역할 (`type="submit"`)

<form action="/signup" method="post">
  아이디 : <input type="text" name="inputId" required> <br>
  비밀번호 : <input type="password" name="inputPw" required> <br>
  비밀번호 확인 : <input type="password"> <br>
  이름 : <input name="inputName" required> <br>

  자기소개(선택)<br>
  <textarea name="intro" cols="50" rows="5"></textarea>

  <button>회원가입</button>
</form>

🌐 3. POST 방식 동작 원리

요청 방식: POST

요청 주소 예시:
http://localhost:8080/signup

→ URL에는 요청 데이터가 포함되지 않고, HTTP Body에 담겨 전송된다.

✅ POST 방식의 장단점

장점	단점
데이터를 숨겨서 전달 (보안성 향상)	캐싱 불가능
길이 제한 없음	서버에서 추가적인 문자 인코딩 처리 필요
	(Tomcat 10부터 해당 문제 해결)
	Tomcat 9: req.setCharacterEncoding("UTF-8");

🔧 4. Java Servlet 처리 - ExampleController2

// Servlet 관련 코드를 작성하기 위해서는 HttpServlet 클래스 상속 받아야 한다!
// -> 상속 받았다고 해서 바로 Servlet 등록이 되는 것이 아님!!
// -> 1. web.xml 작성하기 2. @webServlet() 어노테이션 사용

/* 어노테이션 : 컴파일러가 읽는 주석
 * 
 * @WebServlet 어노테이션
 * -> 해당 클래스를 Servlet으로 등록하고
 * 	  () 안에 작성된 매핑할 주소와 연결하라고 지시하는 어노테이션
 * 
 * -> 서버 실행 시 자동으로 web.xml에
 *   <servlet> <servlet-mapping> 를 작성하는 효과
 */

@WebServlet("/signup")
public class ExampleController2 extends HttpServlet {
	
	// Post 요청 처리 메서드 오버라이딩
	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		
		String inputId = req.getParameter("inputId");
		String inputPw = req.getParameter("inputPw");
		String inputName = req.getParameter("inputName");
		String intro = req.getParameter("intro");
		
		System.out.println(inputId);
		System.out.println(inputPw);
		System.out.println(inputName);
		System.out.println(intro);
		
		// 응답화면 만들기
		// -> Java에서 응답화면을 작성하기 번거롭고 힘들다..
		// -> JSP가 대신 화면을 만들어달라! (Servlet이 JSP에게 요청/응답을 위임)
		
		// JSP가 대신 응답 화면을 만들어주기 위해서는
		// Servlet이 어떤 요청을 받았는지 알아야 한다! (req, resp)
		
		RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/result.jsp");
															// webapp 폴더 기준
		// -> webapp 폴더는 웹 어플리케이션의 루트(root) 디렉토리로,
		//	  브라우저를 통해 접근 가능한 정적 및 동적 리소스들이 위치하는 폴더
		// -> webapp 폴더가 컨텍스트 루트(/)로 설정되기 때문에,
		//	  해당 경로가 webapp 내부 경로로 해석되는 것.
		
		// WEB-INF 폴더에 있는 파일들은 클라이언트가 직접적으로 접근할 수 없는 영역,
		// 서블릿을 통해서만 접근 가능
		
		dispatcher.forward(req, resp);
		// RequestDispatcher 객체를 사용하여 현재 요청(req)와 응답(resp)을
		// 지정한 JSP 페이지(result.jsp)로 전달하는 작업
		// -> 즉, 현재 서블릿(ExampleController2)에서 처리하던 요청을 result.jsp로 전달하고
		//	  제어권을 그곳으로 넘김(==위임하다)
	}
}

🧠 5. 용어 정리 및 흐름 요약

🔑 주요 메서드 및 객체

항목	설명
HttpServletRequest	클라이언트 요청 관련 정보 제공 (데이터 추출 등)
HttpServletResponse	서버 응답 구성 및 전송 기능 제공
getParameter("name")	클라이언트가 보낸 파라미터 값 중 name과 일치하는 value 추출
RequestDispatcher.forward()	요청을 다른 리소스(JSP 등)로 전달하는 메서드

🔁 6. 전체 요청-응답 흐름 요약

클라이언트가 HTML Form을 통해 /signup 경로로 POST 요청 전송
서블릿 doPost() 메서드가 호출되어 HttpServletRequest 객체로 데이터 추출
서버에서 JSP로 응답 코드 전달 (RequestDispatcher.forward())
JSP가 데이터를 받아 응답 화면을 렌더링하여 클라이언트에 출력

📝 기타 참고

form의 method를 GET으로 바꾸면, 데이터가 URL에 표시되고 doGet()으로 받아야 함
실무에서 POST는 등록/수정/삭제 등에 사용되며, GET은 조회성 요청에 사용됨

커피 주문하기

📌 1. 목표

커피 주문을 위한 HTML Form과 Servlet을 통해 사용자가 주문한 정보를 서버로 보내고, 서버에서 해당 정보를 처리하여 응답 화면을 생성하는 과정을 학습.

📋 2. HTML Form 구성

🔹 준비물 요약

항목	설명
`form` 태그	`action` 속성에 지정된 서버로 데이터를 전송
`input` 태그	사용자가 입력할 수 있는 필드를 제공
`select` 태그	여러 개의 선택지 중 하나를 선택하게 함
`radio` 태그	둘 중 하나를 선택하게 하는 입력 방식
`checkbox`	여러 옵션을 선택할 수 있는 입력 방식
`button`	폼 제출 버튼 역할 (`type="submit"`으로 설정됨)

<form action="/coffee" method="get">
  	주문자 : <input name="orderer">
  	<br>
  	
  	커피 : <select name="coffee">
  			<option>아메리카노</option>
  			<option>카페라떼</option>
  			<option>카푸치노</option>
  			<option>콜드브루</option>
  			<option>초코라떼</option>
  		   </select>
  		    <br><br>
  		    ICE <input type="radio" name="type" value="ice"> <!-- name이 같으면 둘 중에 하나 -->
  		    HOT <input type="radio" name="type" value="hot">
  		    <br><br>
  		    옵션<br>
  		    샷 추가 <input type="checkbox" name="opt" value="shot">
  		    <br>
  		    연하게 <input type="checkbox" name="opt" value="mild">
  		    <br><br>
  		    <button>주문하기</button>
</form>

🌐 3. GET 방식 처리 - ExampleController3

@WebServlet("/coffee")
public class ExampleController3 extends HttpServlet {
	
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		String orderer = req.getParameter("orderer");
		String coffee = req.getParameter("coffee");
		String type = req.getParameter("type");
		
/* getParameter("name") : 같은 name 속성을 가진 여러개 값 중 첫번째 값만 반환
 * getParameterValues("name") : 같은 name 속성을 가진 모든 값을 배열(String[])로 반환
*/
		String option = req.getParameter("opt");
		String[] optionArr = req.getParameterValues("opt");
		
		System.out.println(orderer);
		System.out.println(coffee);
		System.out.println(type);
		System.out.println(option);
		System.out.println(optionArr); // 주소값
		
		// opt 미선택시 optionArr == null
		if(optionArr != null) {
		for(String opt : optionArr) {
			System.out.println(opt);
		}
	  }
		RequestDispatcher dispatcher = req.getRequestDispatcher("/WEB-INF/views/result2.jsp");
		
		dispatcher.forward(req, resp);
	}
}

🧠 4. JSP 응답 화면 - result2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><%= request.getParameter("orderer") %>님의 주문 결과</title>
</head>
<body>
	<h1>주문자명 : <%= request.getParameter("orderer") %></h1>
	<h3>주문한 커피 : 
		<%-- ice 골랐을 때 차가운 / hot 골랐을 때 따뜻한 커피종류 --%>
		<% if (request.getParameter("type").equals("ice")) {%>
			차가운
		<% } else {  %>
			따뜻한
		<% } %>
		<%= request.getParameter("coffee") %>
	</h3>
	
	<%= request.getParameterValues("opt") %> <%-- 객체배열의 주소값 --%>
	
	<% if(request.getParameterValues("opt") != null) { %>
	<ul>
		<% for(String opt : request.getParameterValues("opt")) { %>
			<li><%= opt %></li>
		<% } %>	
	 </ul>
	<% } %>
</body>
</html>

🔧 5. 용어 정리 및 흐름 요약

🔑 주요 메서드 및 객체

항목	설명
HttpServletRequest	클라이언트 요청 관련 정보 제공 (데이터 추출 등)
HttpServletResponse	서버 응답 구성 및 전송 기능 제공
getParameter("name")	클라이언트가 보낸 파라미터 값 중 name과 일치하는 value 추출
getParameterValues("name")	같은 name 속성의 모든 값을 배열로 반환
setContentType()	응답 형식 지정 (HTML, 한글 깨짐 방지 위해 charset 설정 필수)
PrintWriter	텍스트 기반 출력 스트림 (HTML 직접 작성 및 전송 가능)

🔁 6. 전체 요청-응답 흐름 요약

클라이언트가 HTML Form을 통해 /coffee URL로 GET 요청을 보냄.
서버(ExampleController3)가 요청을 받아 클라이언트의 데이터를 추출.
서버는 JSP 페이지로 응답을 위임하며, 응답 화면에 사용자가 입력한 정보가 출력됨.
사용자가 선택한 커피 종류, 온도, 옵션에 대한 결과를 보여줌.

허배령

인생은 변수

이전 포스트

25.04.04 (금) 39일차 JSP

괴발개발 TIL

form 태그

input 태그

POST 방식

JSP/Servlet - GET 방식으로 Form 데이터 전송 후 응답 처리

📌 1. 목표

📋 2. HTML Form 구성

🔹 준비물 요약

🌐 3. GET 방식 동작 원리

✅ GET 방식의 장단점

🔧 4. Java Servlet 처리 - ExampleController1

🧠 5. 용어 정리 및 흐름 요약

🔑 주요 메서드 및 객체

🔁 6. 전체 요청-응답 흐름 요약

📝 기타 참고

POST 방식 요청 및 응답

📌 1. 목표

📋 2. HTML Form 구성

🔹 준비물 요약

🌐 3. POST 방식 동작 원리

✅ POST 방식의 장단점

🔧 4. Java Servlet 처리 - ExampleController2

🧠 5. 용어 정리 및 흐름 요약

🔑 주요 메서드 및 객체

🔁 6. 전체 요청-응답 흐름 요약

📝 기타 참고

커피 주문하기

📌 1. 목표

📋 2. HTML Form 구성

🔹 준비물 요약

🌐 3. GET 방식 처리 - ExampleController3

🧠 4. JSP 응답 화면 - result2.jsp

🔧 5. 용어 정리 및 흐름 요약

🔑 주요 메서드 및 객체

🔁 6. 전체 요청-응답 흐름 요약

25.04.03 (목) 38일차 JSP

0개의 댓글