-
4. JSTL를 이용한 View에서 기능 처리 (참고)Back-end Developer/Spring Framework, 설정 및 실습 2018. 12. 11. 14:01
지난번에 MVC 패턴을 통해 Model, View Controller 생성을 해봤었죠.
이번엔 그 중 View에서 JSTL이라는 Library를 활용해보는 방법을 알아볼까 합니다.
JSTL?
JSP의 경우는 전에도 말씀드렸다시피, HTML과 같이 사용되어 코드의 가독성이 매우 떨어진다는 단점이 있었죠.
이를 보완하기 위해 등장한것이 'JSTL'입니다. Eclipse에서 의존성 추가를 이용해 해당 Library 사용이 가능합니다.
JSTL의 종류
- Core (prefix: c)
기본적인 라이브러리입니다. 변수지원, 출력, 제어문, 반복문 등의 페이지 관련 처리 기능을 포함합니다.URI: http://java.sun.com/jsp/jstl/core- XML Processing (prefix: x)
XML 관련 처리를 해주는 라이브러리입니다.URI: http://java.sun.com/jsp/jstl/xml- I18N (prefix: fmt)
포맷 처리 및 국제화 지원 라이브러리입니다.URI: http://java.sun.com/jsp/jstl/fmt- SQL (prefix: sql)
DB 관련 CRUD 처리를 지원하는 라이브러리입니다.URI: http://java.sun.com/jsp/jstl/sql- functions (prefix: fn)
Collection, String 처리 지원 라이브러리 입니다.원하시는 LIbrary를 추가하시고 JSP 상단에 '<%@ taglib prefix = "prefix" uri = "uri" %>' 라고 적어주시면 됩니다.(prefix는 본인이 임의로 설정해도 된다고 하는데, 굳이 표준을 따르지 않을 이유는 없으니 표준에 맞춰 갑시다! ^^)실습
우리는 여기서 기본적인 Core를 사용해 반복문 처리를 해주도록 기능을 구현해보겠습니다.
JSTL 의존성 추가
우선 LIbrary가 없으므로, 전에 Lombok 의존성 추가와 동일한 방법으로 실시해주시면 됩니다.
이렇게요~ 어렵지 않으니 그냥 넘어갈게요.
참고로 의존성에 코드가 아래와 같이 붙으니, 이렇게 입력하시고 저장하셔도 상관 없습니다.
12345<dependency><groupId>javax.servlet</groupId><artifactId>jstl</artifactId><version>1.2</version></dependency>cs 저장하면 설치 진행되는거 아시죠? 조금만 기다려주세요.
이제 Core URI가 필요한데 제가 이미 위에 써놨죠? 혹시 나중에 필요하시다면 'JSTL Core URI'라고 구글에 검색하면 바로 나옵니다.
검색하면 아래와 같은 코드가 나오는데, 우린 Syntax만 사용하면됩니다. 저 코드 어디서 많이 보셨죠?
12345Standard Syntax:<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>XML Syntax:<anyxmlelement xmlns:c="http://java.sun.com/jsp/jstl/core" />cs 맞습니다. 제가 아까 말씀드린, JSP 상단에 써야 할 코드입니다.
우린 코어를 사용할 예정이니 당연하게도, 'prefix = c URI = /core' 이러한 코드가 쓰여있네요. 복사하시구요.
저처럼 success.jsp의 상단에 코드를 추가해주세요.
12345678910111213141516171819<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><%-- JSP Expression Language --%><ul><li>Id: ${customer.id }</li><li>Name: ${customer.name }</li><li>E-mail: ${customer.email }</li></ul></body></html>cs 라이브러리를 사용할 기본적인 준비는 다되었습니다. 이제 DoLogin.java 클래스에서
자신이 로그인한 정보 뿐만아니라,각 로그인 아이디의 값의 정보를 배열에 담아 넘겨주어 값을 가져오는 형식으로 바꾸어볼게요.
doGet method에 아래와 같은 코드를 추가해주세요.
배열이라고는 했지만, 배열리스트를 사용한것은 굳이 설명 안드려도 되겠죠...?
TMI를 던져보자면, 우선 ArrayList 자체가 내부적으로 배열 구조를 가지기도하고,지금은 데이터의 갯수가 정해져있지만, 실제 개발에서 데이터 추가가 얼마나 더 발생할지 모르는 상황에서 고정적인 크기를 잡는다는 것은 낭비겠죠.. 가변적인 크기를 잡는게 나중에 수정 할 일도 없을테구요.
(사실 이건 제가 굳이 설명 안드려도 될 문제라 생각하지만, 혹시라도 모르셨다면, 자바 자료구조에 대해 더 공부해 보시길 바래요.)
123456789101112131415161718192021222324252627282930/*** @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)*/protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {String customerId = request.getParameter("customerId");// perform bussiness login return a bean as a resultCustomerService service = new CustomerService();Customer customer = service.findCustomer(customerId);request.setAttribute("customer", customer);// we can iterate over lists using forEach in JSTLList<Customer> customers = new ArrayList<>();customers.add(new Customer("id006", "Kim", "kim@snut.ac.kr"));customers.add(new Customer("id007", "Lee", "lee@snut.ac.kr"));customers.add(new Customer("id008", "Park", "park@snut.ac.kr"));request.setAttribute("customerList", customers);String page = null;if(customer == null) {page = "/view/error.jsp";}else {page = "/view/success.jsp";}RequestDispatcher dispatcher = request.getRequestDispatcher(page);dispatcher.forward(request, response);}cs 새로운 데이터를 List에 추가했습니다. 기존에 있던 데이터와 같이 담으셔도되고, 귀찮으면 저처럼 새로운 데이터만 담아주셔도 됩니다.
결과는 저랑 좀 다르겠죠. 저는 새로 추가한 멤버만 추가적으로 뜰것이고, 모든 멤버를 추가하신 분은 전체 멤버 리스트가 출력될 것입니다.
이제 success.jsp 코드를 완성해 볼게요.
123456789101112131415161718192021222324252627282930<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title></head><body><%-- JSP Expression Language --%><ul><li>Id: ${customer.id }</li><li>Name: ${customer.name }</li><li>E-mail: ${customer.email }</li></ul><%-- JSTL --%><table style = "border: 1px solid red; padding: 10px;" ><c:forEach var = "customer" items = "${customerList}"><tr><td> ${customer.id} </td><td> ${customer.name} </td><td> ${customer.email} </td></tr></c:forEach></table></body></html>cs 실행 결과JSTL 부분 추가된거 보이시죠? 테이블 형식으로 출력해봤어요. 경계선 잡고 내부 여백주고,
동일한 멤버의 정보를 나타내는 데이터는 한 행에 위치하도록 태그로 잡아주었습니다.
또한, forEach 문을 통해, 리스트(items)의 값을 하나씩(var) 받아와 반복적으로 값을 추가해 붙이도록 코드를 구성했네요
실행해보시면 아래와 같이 나옵니다.
빨간색 네모칸은 제가 그린거 아니에요. 아시죠?
아까 테이블 설정을 저렇게 해두었으니, 그대로 했는데 저게 안나왔다면 뭔가 잘못된거 같으니 수정해 보시길 바랍니다.
이렇게 JSP EL, JSTL을 통해 특히 View에선 JSTL을 잘 활용해 좀 더 가독성이 좋은 코드를 만들도록 노력하는 것이 좋다합니다.
지난번처럼 배포도 해볼게요.
Export -> WAR file -> destination: tomcat/webapps/ -> finish
이제 터미널의 bin 파일에 들어가서 tomcat 실행해서 web에서도 잘 뜨는지 확인해보세요.
저는 이렇게 잘 뜹니다.
당연히 주소는 helloMVC로 들어가셔야합니다. 제가 쓴 URL과 같은 주소로 들어가세요. 실수하고 왜 안되지 하고 계시면 곤란해요 ^___^...
오늘은 이게 끝이네요. 여기까지 고생하셨습니다.^^ 되도록이면 3의 내용과 같이보시면 좋을것같아요.
반응형'Back-end Developer > Spring Framework, 설정 및 실습' 카테고리의 다른 글
6. Annotation으로 의존성 주입하기 (0) 2018.12.16 5. DI (Dependency Injection: 의존성 주입) (0) 2018.12.13 3. JSP, Servlet을 활용한 MVC 패턴 설계 (0) 2018.12.05 2. Servlet 개념 정리 및 실습, 배포(deploy) (0) 2018.12.01 1. Spring Framework(eclipse), Mysql, Tomcat 설치 및 설정 (0) 2018.11.28
