Java

jsp

99duuk 2024. 12. 10. 16:56

<c:forEach>

<c:forEach var="item" items="${collection}">
    <!-- 반복해서 실행할 코드 -->
</c:forEach>

 

  • var: 반복 시 사용할 변수 이름 (예: item).
  • items: 반복할 대상 (Java의 List, Set, 배열, 또는 Map).
  • begin, end: (선택 사항) 반복의 시작과 끝 인덱스를 지정.
  • step: (선택 사항) 반복 시 건너뛸 간격.

<c:out>

<c:out>는 JSP의 JSTL 태그 중 하나로, 데이터를 출력할 때 사용

일반적으로 ${expression}과 동일한 역할을 하지만, HTML 이스케이프를 지원한다는 차이

<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String content = "<b>HTML 태그</b>";
    request.setAttribute("content", content);
%>
<p>일반 출력: ${content}</p>
<p>HTML 이스케이프 출력: <c:out value="${content}" /></p>
일반 출력: <b>HTML 태그</b>
HTML 이스케이프 출력: &lt;b&gt;HTML 태그&lt;/b&gt;

 

<c:choose>

JSTL에서 조건문을 구현하기 위해 사용

Java의 switch-case와 비슷하며, <c:when>과 <c:otherwise>를 함께 사용

<c:choose>
    <c:when test="${condition}">
        <!-- 조건이 참일 때 실행 -->
    </c:when>
    <c:otherwise>
        <!-- 조건이 모두 거짓일 때 실행 -->
    </c:otherwise>
</c:choose>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
    String role = "admin";
    request.setAttribute("role", role);
%>
<c:choose>
    <c:when test="${role == 'admin'}">
        <p>관리자입니다.</p>
    </c:when>
    <c:when test="${role == 'user'}">
        <p>일반 사용자입니다.</p>
    </c:when>
    <c:otherwise>
        <p>권한이 없습니다.</p>
    </c:otherwise>
</c:choose>

<jsp:include>

JSP 파일 내에서 다른 JSP를 동적으로 포함할 때 사용

<jsp:include page="included.jsp">
    <jsp:param name="paramName" value="paramValue" />
</jsp:include>

 

  • page: 포함할 JSP 파일 경로.
  • <jsp:param>: 포함된 JSP로 값을 전달할 때 사용.

 

1. JSP 내에서 JavaScript 작성 vs. 외부 JavaScript 파일로 분리

1) JSP 내에서 JavaScript 작성

특징

  • JavaScript 코드를 JSP 파일에 직접 포함
  • HTML과 JavaScript가 한 파일에 섞여 있어 수정이 편리하지만, 코드가 많아지면 복잡도가 증가
<!DOCTYPE html>
<html>
<head>
    <title>Form Submission</title>
    <script>
        function submitForm() {
            document.mainForm.submit();
        }
    </script>
</head>
<body>
    <form name="mainForm" action="/submit" method="post">
        <input type="text" name="inputField" />
        <button type="button" onclick="submitForm()">Submit</button>
    </form>
</body>
</html>

장점

  • 단일 파일에 HTML, JSP, JavaScript가 포함되어 있어 간단한 프로젝트에서는 편리.
  • 빠르게 테스트하거나 디버깅할 수 있음.

단점

  • JavaScript가 많아지면 코드 관리가 어려워짐.
  • 코드 재사용이 어려워 동일한 기능을 여러 JSP에서 사용할 경우 중복 작성 필요.
  • HTML과 로직이 섞여 있어 유지보수성 저하.

2) 외부 JavaScript 파일로 분리

특징

  • JavaScript 코드를 별도의 .js 파일로 작성하고 <script> 태그로 JSP에 포함

 

main.js

function submitForm() {
    document.mainForm.submit();
}

 

jsp

<!DOCTYPE html>
<html>
<head>
    <title>Form Submission</title>
    <script src="main.js"></script>
</head>
<body>
    <form name="mainForm" action="/submit" method="post">
        <input type="text" name="inputField" />
        <button type="button" onclick="submitForm()">Submit</button>
    </form>
</body>
</html>

장점

  • 재사용성: 동일한 JavaScript 파일을 여러 JSP에서 재사용 가능.
  • 분리된 책임: HTML(뷰)와 JavaScript(동작)가 분리되어 유지보수성이 높아짐.
  • 가독성 향상: JSP 파일에서 JavaScript 코드가 제거되어 깔끔해짐.
  • 캐싱 활용: 외부 .js 파일은 클라이언트 브라우저에서 캐싱 가능, 로딩 속도 개선.

단점

  • 별도의 파일 관리를 해야 하므로 초기 설정이 필요.
  • 기능을 파악하기 위해 여러 파일을 참조해야 할 수 있음.

 

 

 

폼 처리 로직과 mainForm 관련 이슈

JSP 내에서 폼 처리 로직

직접 폼 제출 (JSP 내부 JavaScript 작성):

<script>
    function submitForm() {
        document.mainForm.submit();
    }
</script>

<form name="mainForm" action="/submit" method="post">
    <input type="text" name="inputField" />
    <button type="button" onclick="submitForm()">Submit</button>
</form>

 

  • 장점: 단순하고 빠르게 동작.
  • 단점: JavaScript가 많아지면 유지보수가 어려움.

 

외부 파일로 폼 처리 로직 분리

외부 JavaScript에서 동적으로 폼 처리

function getDocumentId() {
    return document.mainForm;
}

function submitForm() {
    const form = getDocumentId();
    form.submit();
}

 

<script src="main.js"></script>

<form name="mainForm" action="/submit" method="post">
    <input type="text" name="inputField" />
    <button type="button" onclick="submitForm()">Submit</button>
</form>

 

  • 장점: JavaScript의 모든 폼 관련 로직을 한 파일로 관리 가능.
  • 단점: 외부 파일 의존성이 생김(초기 설정 필요).

 

main.js

// 공통 함수: 폼 가져오기
function getForm(formName) {
    return document[formName];
}

// 공통 함수: 폼 제출
function submitForm(formName) {
    const form = getForm(formName);
    if (form) {
        form.submit();
    } else {
        console.error("Form not found:", formName);
    }
}

 

jsp

<!DOCTYPE html>
<html>
<head>
    <title>Form Submission</title>
    <script src="main.js"></script>
</head>
<body>
    <form name="mainForm" action="/submit" method="post">
        <input type="text" name="inputField" />
        <button type="button" onclick="submitForm('mainForm')">Submit</button>
    </form>
</body>
</html>

'Java' 카테고리의 다른 글

파라미터 타입이 다른 공통 로직 모듈화 - 제네릭  (0) 2024.12.11
파라미터 타입이 다른 공통 로직 모듈화 - 인터페이스  (0) 2024.12.11
Java Stream - Stream, map, collect()로 리스트 객체 가공  (0) 2024.10.29
일급 컬렉션  (0) 2024.10.21
정적 팩토리 메서드  (1) 2024.10.21

'Java'의 다른글

  • 현재글jsp

관련글

티스토리툴바