JSP 자기소개 버전 만들기

⛳️ 과제 목표

Servlet에서 요청(request) 처리 후, JSP로 결과를 전달해 출력하는 구조 학습
request.getParameter(), <%= %> 구문 활용 가능
사용자 입력 → 서버 처리 → 결과 출력의 흐름을 체득 가능

📚 필수 과제

1. 자기소개 입력 폼 작성

챕터2 과제에서 만들었던 html 파일을 응용하세요.
이름(name), 나이(age), MBTI(mbti), 좋아하는 음식(foods)을 입력할 수 있는 form.jsp를 구성하세요.
좋아하는 음식은 1개의 <input>으로 구성합니다.
음식을 여러개 입력받되 콤마(,) 로 음식 구분이 됩니다.

1,2번 기초과제가 연관된 부분으로 아래 접은글에 작성한 코드를 같이 첨부함

유의할 것 : stylesheet와 css구문의 중복이 발생해서 원하는 모양값을 만들지 못할 수 있으므로 적용여부 확인하기!
- 이번 코드 작성간에는 container 선언이 작동하지 않아 intro-container로 선언하여 받아들이게 함

2. 폼 데이터 서버로 전송

form에 입력한 데이터를 POST 방식으로 서블릿으로 전송합니다.
name, age, mbti, foods (쉼표로 구분된 문자열)를 포함합니다.

// form.jsp

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html lang ="ko">

<head>
    <meta charset="UTF-8">
    <title>자기소개 입력</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css">
    <style>
        * {box-sizing: border-box;}
        body {
            font-family: 'Noto Sans KR', sans-serif;
            margin: 0; color: black; background: white;
        }

        .intro-container {
            max-width: 900px; margin: 40px auto; padding: 24px;
            background: white; border-radius: 16px;
            box-shadow: 0 10px 24px rgba(0,0,0,0.06);
            text-align: center;
        }
    </style>
</head>
<body>
<div class="intro-container">

<h1> 📝나를 소개합니다. </h1>

    <!-- 기존 Thymeleaf 속성에서 JSP 표준으로 치환 -->
    <form action="${pageContext.request.contextPath}/intro" method="post" accept-charset="UTF-8">
        <label>이름: <input type="text" name="name"/></label><br>
        <label>나이: <input type="number" name="age"></label><br>
        <label>MBTI: <input type="text" name="mbti"></label><br>
        <label>좋아하는 음식: <input type="text" name="foods"></label><br>
    <button type="submit" >제출</button>
    </form>
</div>
</body>
</html>

input type의 필드명 선언에 유의할 것! name="필드명"

3. 서블릿에서 요청 처리

서블릿에서 파라미터를 추출하고 request.setAttribute()로 JSP에 데이터 전달합니다.

//IntroServlet.java

package com.example;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.Arrays;

@WebServlet("/intro")
public class IntroServlet extends HttpServlet {

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse res)
            throws ServletException, IOException {
        req.setCharacterEncoding("UTF-8");

        String name = req.getParameter("name");
        String age = req.getParameter("age");
        String mbti = req.getParameter("mbti");
        String foodsParam = req.getParameter("foods");

        String[] foods = (foodsParam == null ? new String[0]
                : Arrays.stream(foodsParam.split(","))
                    .map(String::trim)
                    .filter(s -> !s.isEmpty())
                .toArray(String[]::new));

        req.setAttribute("name", name);
        req.setAttribute("age", age);
        req.setAttribute("mbti", mbti);
        req.setAttribute("foods", foods);

        RequestDispatcher rd = req.getRequestDispatcher("/result.jsp");
        rd.forward(req, res);
    }

}

4. JSP에서 결과 출력

전달받은 name, age, mbti, food를 출력합니다.
servlet에서 전달받은 foods 을 분리하고, 배열에 저장하여 jsp에 전달 후 출력합니다.

        String[] foods = (foodsParam == null ? new String[0]
                : Arrays.stream(foodsParam.split(","))
                    .map(String::trim)
                    .filter(s -> !s.isEmpty())
                .toArray(String[]::new));

위에서 입력받은 foods의 값에 삼항 연산자를 사용하여 공백인지 점검을 진행,

공백이 아닌 경우 Array.stream 부터의 명령어 수행과정을 거쳐 나아감

Array.stream을 통해 쉼표를 기준으로 문자열을 분리하고 이후 과정을 통해 값을 필터링 하는 과정을 진행함

❤️‍🔥 도전 과제

1. 음식 리스트 예쁘게 출력

배열 형태로 전달된 음식 데이터를 <ul><li> 구조로 출력해보세요.

//result.jsp

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>결과</title>

    <style>
        * {box-sizing: border-box;}
        body {
            font-family: 'Noto Sans KR', sans-serif;
            margin: 0; color: black; background: white;
        }

        .intro-container {
            max-width: 900px; margin: 40px auto; padding: 24px;
            background: white; border-radius: 16px;
            box-shadow: 0 10px 24px rgba(0,0,0,0.06);
            text-align: center;
        }

        .chips { display:inline-block; gap:8px; flex-wrap:wrap; margin:8px 0; }
        .chip { padding:6px 10px; border:1px solid #ddd; border-radius:20px; }
    </style>
</head>
<body>
<div class="intro-container">
    <p><b>${name}</b>님은 <b>${age}</b>살의 <b>${mbti}</b> 성격을 가진 분이며, </p>

    <c:choose>
        <c:when test="${fn:length(foods) > 0}">
            <p>좋아하는 음식은
            <!-- 도전1 ul / li -->
            <ul>
                <c:forEach var="f" items="${foods}">
                    <li>${f}</li>
                </c:forEach>
            </ul>


            <!-- 도전2 칩 스타일 -->

            <div class="chips">
                <c:forEach var="f"  items="${foods}">
                    <span class="chip">${f}</span>
                </c:forEach>
            </div>
            다음과 같습니다.</p>
        </c:when>
        <c:otherwise>
            <p>좋아하는 음식 정보가 없어요.</p>
        </c:otherwise>
    </c:choose>
<a href="${pageContext.request.contextPath}/form.jsp">다시 입력</a>
</div>
</body>
</html>

2. JSTL 도입(선택)

JSTL 라이브러리 추가 후 <c:forEach>를 사용해 음식 리스트 출력합니다.

c:forEach 태그에 대한 개념 정리
<c:forEach var="item" items="${list}">
${item}
</c:forEach>

var : 반복문 안에서 사용할 변수 이름

items : 반복할 대상 (배열, List, Set, Map, 문자열 배열 등 가능)

${list}는 request/setAttribute 에서 가져온 값

예) foods = [ "떡볶이", "마라탕", "삼겹살"

☠️ 트러블 슈팅

발생한 Issue ①
- tomcat 세팅 간 설정한 디렉토리 외에 web.xml이 지속적으로 추가 생성되는 이슈 발생
  - jsp 파일과 jar 파일의 위치, 참조 위치를 어디로 두어야 하는지 명확하게 인지할 필요가 있음
발생한 Issue ②
- JSP와 Thymeleaf 문법의 차이점에 대한 이해도 필요
  - 호출자 선언 + 치환 개념에 대한 차이를 인지하고 어느 부분에서 차이가 있는지 확인해야함
발생한 Issue ③
- tomcat 이슈를 해소하고나서 fom.jsp 화면에서 내용을 기입하고 제출버튼 클릭 시 500 error가 발생했음
- 500 error 해소 이후에는 설정해놓은 속성명에 값을 정상적으로 불러오지 못하는 상황이 있었음
발생한 Issue ④
- result.jsp에서 도전과제로 진행했던 칩 형태, 리스트 형태의 결과값이 문장 바깥으로 나오게 되어 결과값이 이상하게 보임
해결방법 / 찾아본 내용
- ① tomcat server의 Application context 값이 다른 값으로 설정되어 있어 http://localhost:8080/ 자체에서 아예 연결이 되지 않는 것으로 보여졌었음
  - 값을 공백으로 설정하고 이외의 처리과정에 맞춰 환경을 설정하니 정상적으로 입력 폼이 노출 되었음
- ② 자바와 JSP의 차이를 인지해야 한다.
  - 자바 : 직접 객체.getName() 호출
  - JSP: ${person.name} → 내부적으로 getter 호출 → 값 치환
- ③ 속성명 선언에 있어 오류가 있었음
  - <input type="number" age="age> 로 name="필드명"으로 선언해야하는 부분에서의 실수가 있었음
    - 모든 입력 필드는 name="필드명"으로 작성할 필요가 있음
  - int vs Integer
    - 이전에 진행했던 실습 예제가 독이 되었던 상황
      - int는 null을 허용하지 않음, 빈 입력시 NumberFormatException (Cannot parse null string)
      - 입력받은 값을 그대로 보여주기만 하면 되는 상황이었으므로 String으로 처리하여 문제를 해결함
        
        > String age = req.getParameter("age")
        
        계산이 필요한 경우에만 Integer 선언할 것!
        
        이번에는 오히려 Integer를 선언해 null 값이 발생 → 500 에러를 일으키는 주범이 되었음
- ④ css 속성에서 display : lnline-block; 선언을 통해서 구조를 바꿔야 했음
  - 리스트 형태는 표값으로 들어가 매끄럽진 않지만 문장 사이에 원하는 값을 넣는 과정을 경험했음

'JAVA > Java 실습' 카테고리의 다른 글

[JAVA] 계산기 과제 개념 추가 정리 (0)	2025.09.16
점메추 SPA 에디션 (0)	2025.09.10
MVC 기반 점심 메뉴 추천기 (0)	2025.09.10
나를 소개합니다 (0)	2025.09.08
JSP / Servlet 실습 (0)	2025.09.05

⛳️ 과제 목표

📚 필수 과제

❤️‍🔥 도전 과제

☠️ 트러블 슈팅

'JAVA > Java 실습' 카테고리의 다른 글

티스토리툴바