개발자 성장 기록 54 - JSP

웹페이지는 정적 페이지와 동적 페이지로 나눌 수 있다.

 

정적 웹페이지는 웹서버에 저장된 .html 파일을 검색해서 문서 그대로 전달하여 브라우저에 보여준다.

 

동적 웹페이지는 저장된 내용을 다르게 가공하여 보여주는 방식이다.

클라이언트가 웹 페이지를 요청하면 서버가 그 요청을 분석하여 응답결과를 HTML 문서로 만들어서 브라우저를 통해 보여준다.

JSP (Java Server Pages)

JSP는 HTML코드에 Java 코드를 사용하여 동적 웹페이지를 생성하는 웹 애플리케이션 라이브러리이다.

JSP가 실행되면 Java Servlet으로 변환되어 웹 애플리케이션 서버에서 동작하게 되며, 생성된 데이터들을 웹페이지와 클라이언트를 통해 응답을 한다.

 

JSP 동작과정

1. 브라우저가 웹 서버에게 JSP에 대한 요청 정보를 전달한다.
2. 브라우저가 요청한 JSP가 최초로 요청했을 경우만 JSP로 작성된 코드가 서블릿 코드로 변환된다.
3. 서블릿 코드를 컴파일하여 실행가능한 bytecode로 변환한다.
4. 서블릿이 실행되어 요청을 처리하고 응답 정보를 생성한다.

초기에 자바 웹개발은 서블릿만을 이용한 개발이었지만 이후 JSP 기술이 발표되면서 JSP 형태의 개발이 점차 발전하게 되었고, 지금의 서블릿 + JSP 형태로 각각의 역할을 나누어 개발을 하는 방식이 이루어지고 있다.

---

 

Model2 (Spring MVC 패턴)

Model1은 JSP가 Controller / View 역할을 전부 맡아서 수행하고 있다. 그럴 경우에 개발이 빠르게 진행될 수 있다는 장점이 있지만, 유지보수가 어렵고 가독성이 좋지 않다는 단점이 있기에 대부분 Model2를 사용하고 있다.

 

Model2는 Model1과 달리 웹브라우저의 요청을 서블릿이 받는다. 그리고 그 요청을 View(JSP)에게 전달할지 Model(Java Bean)에 전달할 것인지 정하여 전송해 준다.

Model2 방식의 경우 HTML코드와 Java 코드를 분리해 놓았기 때문에 개발을 확장시키기도 쉽고, 코드를 깔끔하게 작성할 수 있다.

그림1. JSP를 활용한 model2 개발 방식

---

JSTL (JSP Standard Tag Library)

JSTL은 표준 태그 라이브러리로 JSP 페이지에서 일반적인 핵심 기능을 캡슐화하여 제공하는 JSP 태그 컬렉션이다.

일반적인 반복, 조건의 로직이나, 포맷팅 작업, XML 문서, SQL 태그의 조작을 위한 태그를 사용할 때 사용된다.

태그 선언

JSTL에서 제공하는 태그는 크게 5가지가 있다.

• core : 가장 자주 사용되는 태그이다. 일반적인 프로그램 기능을 제공
• formatting : 날짜, 시간, 숫자 텍스트를 표시하고 변환하는 기능을 제공
• sql : RDBMS와 상호작용하는 태그를 제공
• xml : XML문서를 생성하고 조작하는 기능을 제공
• functions : 일반적인 문자열을 가공하고 조작하는 표준함수를 제공

아래처럼 태그를 선언한 뒤에 사용이 가능하다.

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>

---

Core 태그

<c:out>

• 값을 출력한다.
• <%= 값 %>, ${표현식} 과 동일한 기능을 한다.
• 닫는 태그가 무조건 있어야 한다.
• XSS 취약점 공격에 대한 가장 기본적인 방어를 지원한다.
• 사이트를 사용하는 유저가 작성하는 콘텐츠는 무조건 <c:out> 태그를 사용하여 출력해야 한다.

  <c:out value="${표현식}" />

주요 속성

• value : 출력할 값을 지정한다. 생략할 수 없다.
• escapeXml : 특수문자를 변환할지 여부를 지정한다. 기본값은 true이며 생략이 가능
• default : value에서 지정한 값이 Null일 경우 표현할 값을 지정한다. 생략 가능

<c:if>

• if문과 동일한 기능을 수행한다. 
• else에 해당하는 태그는 없다.

  <c:if test="${표현식}">
    HTML 컨텐츠
  </c:if>
  <!-- test에서 제시한 조건이 true면 HTML 컨텐츠가 화면에 출력된다. --->

주요 속성

• test : 결괏값이 boolean인 검사 조건을 지정하며 생략할 수 없다.

<c:choose>  <c:when> ~ <c:otherwise>

• if ~ else if ~ else if ~ else 와 동일한 기능을 한다.

  <c:choose>
    <c:when test="${조건식1}">
      HTML 컨텐츠
      <!-- test에서 제시한 조건식1이 true면 HTML 컨텐츠가 화면에 출력된다. --->
    </c:when>
    <c:when test="${조건식2}">
      HTML 컨텐츠
      <!-- test에서 제시한 조건식2이 true면 HTML 컨텐츠가 화면에 출력된다. --->
    </c:when>
    <c:when test="${조건식3}">
      HTML 컨텐츠
      <!-- test에서 제시한 조건식3이 true면 HTML 컨텐츠가 화면에 출력된다. --->
    </c:when>
    <c:otherwise>
      HTML 컨텐츠
      <!-- test에서 제시한 조건식1, 조건식2, 조건식3이 전부 false면 HTML 컨텐츠가 화면에 출력된다. --->
    </c:otherwise>
  </c:choose>

• <c:when>과 <c:otherwise>는 반드시 <c:choose> 안에 위치해야 한다.
• <c:when>은 조건식을 다르게 해서 여러 번 정의할 수 있다.
• <c:otherwise>는 생략할 수 있고, 맨 마지작 <c:when> 다음에 정의해야 한다.
• <c:when>으로 제시한 조건식이 true가 되면 남아있는 <c:when>은 검사하지 않는다.
• <c:otherwise>는 <c:when>으로 제시한 조건이 모두 false로 판정될 때만 실행된다.

<c:forEach>

• for문과 같은 역할을 수행한다.
• 배열 혹은 컬렉션(List, Set)에 대해서 그 항목의 개수만큼 반복작업을 수행할 수 있다.

 

  <c:forEach var="변수명" items="${표현식}">
    <p>${변수명}<p>
  </c:forEach>

• items의 표현식으로 찾은 값이 반드시 배열 혹은 컬렉션이어야 한다.
• 검색된 배열 혹은 컬렉션의 요소 개수만큼 콘텐츠를 반복 출력한다.
• var는 배열 혹은 컬렉션에서 반복수행 시 해당 요소가 저장되는 변수의 이름을 지정한다.

  <c:forEach var="변수명1" items="${표현식}" varStatus="변수명2">
    <p>${변수명2.count} ${변수명1}<p>
  </c:forEach>

• varStatus에 지정된 변수에는 현재 반복상태정보를 담고 있는 객체가 전달된다.
• 반복상태 정보
  • index : 현재 추출한 요소의 인덱스번호(0부터 시작)
  • count : 현재 반복 횟수(1회부터 시작)
  • first : 첫 번째 요소인 경우 true
  • last : 마지막 요소인 경우 true

  <c:forEach var="변수명" begin="${표현식}" end="${표현식}">
    <a href="list.hta?pageno=${변수명}">${변수명}</a>
  </c:forEach>

• begin은 시작값, end는 끝값을 지정한다.
• begin과 end는 정수값이어야 한다.
• begin과 end의 구간만큼 콘텐츠를 반복출력한다.
• var는 현재 숫자값을 지정하는 변수의 이름을 지정한다.

---

Formatting 태그

fmt:formatNumber

• 숫자를 지정된 형식에 맞게 출력한다.
• 숫자에 콤마가 포함되어서 출력된다.

  <fmt:formatNumber value="${표현식}" pattern="패턴문자열" />

• 숫자가 지정된 형식에 맞춰서 출력된다.
• value에서 지정된 표현식으로 검색되는 값은 반드시 숫자값이어야 한다.

fmt:formatDate

• 날짜를 지정된 형식에 맞게 출력한다.
• 날짜가 '연월일시분초' 형태로 출력된다.

  <fmt:formatDate value="${표현식}" pattern="패턴문자열" />

• 날짜가 지정된 형식에 맞게 출력된다.
• value에서 지정된 표현식으로 검색되는 값은 반드시 Date값이어야 한다.

---

참고

https://chillin-dev.tistory.com/28

https://velog.io/@doby14515/JSP-in-Model2MVC