002. JSP - HTML 코더 퇴사 시키기 / 개발자 더 힘들게 하기

강좌/Spring @MVC

002. JSP - HTML 코더 퇴사 시키기 / 개발자 더 힘들게 하기

여름나라겨울이야기 2013. 2. 25. 23:52

728x90

Java 언어에서의 웹 구현: 그 두번째 역사 JSP

지난 강좌의 소스를 그대로 사용하겠습니다. 글로 타이핑하기 손꾸락 아파서리.. 바로 소스 탐색 들어갑니다.

왼쪽의 Package Explorer 에서 오른쪽 클릭 New > Other.. 을 선택해줍니다. Select a wizard 창에서 Wizards: 항목에 JSP 를 입력해 줍니다. Web > JSP File 을 선택한 후 [Next >] 버튼을 클릭해 줍니다.

File name: 에 Member.jsp 을 입력하고 바로 [Finish] 버튼을 클릭해 줍니다. 아래와 같은 JSP 파일이 WebContent 폴더 아래 생성됩니다.

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

</body>
</html>

위의 Member.jsp 를 아래와 같이 변경했습니다. MemberServlet.java 에서 C&P 능력을 시전하시면 됩니다. 괜히 타이핑 하시다가 오타 납니다. ^^;

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.heaven.spring.Member" %>    
<%
	Member juliet = new Member();
	juliet.setName("줄리엣");
	juliet.setGender(Member.FEMALE);
	juliet.setAge(18);
	
	Member romeo = new Member();
	romeo.setName("놈임요");
	romeo.setGender(Member.MALE);
	romeo.setAge(19);
	
	Member seoyoung = new Member();
	seoyoung.setName("이서영");
	seoyoung.setGender(Member.FEMALE);
	seoyoung.setAge(32);
	
	Member samjae = new Member();
	samjae.setName("이삼재");
	samjae.setGender(Member.MALE);
	samjae.setAge(62);
%>    
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<b><%= juliet.getName() %></b> <%= juliet.toString() %><br/>
<b><%= romeo.getName() %></b> <%= romeo.toString() %><br/>
<b><%= seoyoung.getName() %></b> <%= seoyoung.toString() %><br/>
<b><%= samjae.getName() %></b> <%= samjae.toString() %><br/>
</body>
</html>

음음 어디가 바뀌었는지 보이시나요? SyntaxHighlight 가 또 이럴 때는 불편하네요.

<%@ page language="java" contentType="text/html; charset=UTF-8"
 pageEncoding="UTF-8"%>
<%@ page import="com.heaven.spring.Member" %>
<%
 Member juliet = new Member();
 juliet.setName("줄리엣");
 juliet.setGender(Member.FEMALE);
 juliet.setAge(18);

 Member romeo = new Member();
 romeo.setName("놈임요");
 romeo.setGender(Member.MALE);
 romeo.setAge(19);

 Member seoyoung = new Member();
 seoyoung.setName("이서영");
 seoyoung.setGender(Member.FEMALE);
 seoyoung.setAge(32);

 Member samjae = new Member();
 samjae.setName("이삼재");
 samjae.setGender(Member.MALE);
 samjae.setAge(62);
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<%= juliet.getName() %> <%= juliet.toString() %> 
<%= romeo.getName() %> <%= romeo.toString() %> 
<%= seoyoung.getName() %> <%= seoyoung.toString() %> 
<%= samjae.getName() %> <%= samjae.toString() %> 
</body>
</html>

<% %> 과 <%= %> 부분은 설명 안 드려도 되겠죠. 설마 설마.. 설마라면 Head First Servlet & JSP 삼독/정독하시거나 또는 꽃등심 비용 만드셔서 주말 일일 강좌 신청하십시요. ㅡㅡ; 일일 강좌 들으시고 JSP 3 개월 코스가 있는 학원으로 고고씽!!!

그럼 바로 브라우저에서 실행해 보겠습니다. JSP 는 실행하기도 편합니다. Package Explorer 에서 Member.jsp 오른쪽 버튼 Run as > Run on Server 를 선택해줍니다. [Next >] 클릭, 이어서 [Finish] 를 클릭해 줍니다. 바로 STS 내장 브라우저를 통해 실행된 화면을 보실 수 있습니다. 자동으로 브라우저가 열리지만 주소창은 잘 봐주세요. WebContent 가 경로에 없습니다. 그 마법은 다들 아실 거라 믿습니다. 아멘? 아멘!

기존의 MemberServlet.java 와 Member.jsp 를 살짝 비교해 보세요.

MemberServlet.java

Member.jsp

package com.heaven.spring;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class MemberServlet extends HttpServlet {
    @Override
    public void doGet(HttpServletRequest req, HttpServletResponse resp)
            throws ServletException, IOException {        
        Member juliet = new Member();
        juliet.setName("줄리엣");
        juliet.setGender(Member.FEMALE);
        juliet.setAge(18);
        
        Member romeo = new Member();
        romeo.setName("놈임요");
        romeo.setGender(Member.MALE);
        romeo.setAge(19);
        
        Member seoyoung = new Member();
        seoyoung.setName("이서영");
        seoyoung.setGender(Member.FEMALE);
        seoyoung.setAge(32);
        
        Member samjae = new Member();
        samjae.setName("이삼재");
        samjae.setGender(Member.MALE);
        samjae.setAge(62);
    
        resp.setContentType("text/html; charset=UTF-8");
        resp.setCharacterEncoding("UTF-8");
        PrintWriter out = resp.getWriter();
        
        out.println("<html>");
        out.println("<body>");
        showMember(out, juliet);
        showMember(out, romeo);
        showMember(out, seoyoung);
        showMember(out, samjae);
        out.println("</body>");
        out.println("</html>");
    }

    private void showMember(PrintWriter out, Member member) {        
        out.println("<b>" + member.getName() + "</b> " + member.toString() + "</br>");
    }
}

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page import="com.heaven.spring.Member" %>
<%
    Member juliet = new Member();
    juliet.setName("줄리엣");
    juliet.setGender(Member.FEMALE);
    juliet.setAge(18);
    
    Member romeo = new Member();
    romeo.setName("놈임요");
    romeo.setGender(Member.MALE);
    romeo.setAge(19);
    
    Member seoyoung = new Member();
    seoyoung.setName("이서영");
    seoyoung.setGender(Member.FEMALE);
    seoyoung.setAge(32);
    
    Member samjae = new Member();
    samjae.setName("이삼재");
    samjae.setGender(Member.MALE);
    samjae.setAge(62);
%>    
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<b><%= juliet.getName() %></b> <%= juliet.toString() %><br/>
<b><%= romeo.getName() %></b> <%= romeo.toString() %><br/>
<b><%= seoyoung.getName() %></b> <%= seoyoung.toString() %><br/>
<b><%= samjae.getName() %></b> <%= samjae.toString() %><br/>
</body>
</html>

헥헥.. 워드로 작성해서 올릴까요. 힘드네요.. 워드를 이용하면 이미지가 안 올라간다 하고.. ㅡㅜ. PDF 로 올리면 님들이 보기도 힘들고 검색어도 안 먹고... 저는 웹 퍼플리셔도 아닌데 신이시여 왜 저에게 이런 난관을.. div 에 스크롤 입힌 거 안해 본지가... 어흑

좌우에 매칭 되는 부분을 색상으로 맞추어 보았습니다. 이전 강좌에서 Servlet 으로 구현할 때 필요한 파일은 Member.java 와 MemberServlet.java 그리고 설정 파일인 web.xml 이렇게 3개 였습니다. 이제 JSP 로 구현하게 되면 기존의 Member.java 와 새롭게 Member.jsp 2 개의 파일만 있으면 됩니다. JSP 로 구현한 경우 web.xml 에 별도의 설정은 필요 없습니다.

Servlet 에서 필요한 파일	JSP 에서 필요한 파일
Member.java 구현	Member.java 구현
MemberServlet.java 구현	Member.jsp 구현
web.xml 설정

음~ 원하시면 Member.java 구현도 Member.jsp 파일 안에 넣어 버리는 것도 가능하긴 한데 이득이 없어서 패스..

실무에서라면 *.java 는 프로그래머가 구현합니다. *.jsp 는 조금 더 HTML 태그 친화적(?)이군요. Servlet 구현할 때 프로그래머가 잘 알지도 못하는 HTML 태그도 써야하고 css, javascript 까지.. 흠흠... 그 부담을 HTML, css, javascript 전문가인 HTML 코더(또는 퍼블리셔)에게 위임할 수가 있군요. 그런데 프로그래머는 편해졌는데 HTML 코더는 *.htm 만 작성하면 됬던 것을 이제는 확장자를 *.jsp 로 바꾸고 그 안에 java 코드도 넣어줘야 합니다. HTML 코더가 과연 java 코드가 들어간 Member.jsp 를 혼자 구현할 수 있을까요? 절대 못 하겠죠? 결국 프로그래머와 HTML 코더 사이에 아름다운 협업(?)/짝프로그래밍(?)이 발생하게 됩니다. 그리고 어느 날 HTML 코더는 홀연히 강호.. 아니 회사를 떠나 잠적합니다. ㅡㅡ;

servlet 구현의 문제점은 뭐라구요? 스파게티 코드!!! 그럼 jsp 구현에서 스파게티 코드 문제가 해결이 되었을까요? 이런 걸 조삼모사라고 합니다.

servlet 구현: java 코드 안에 HTML 태그 집어 넣기

out.println("" + member.getName() + " " + member.toString() + "");

JSP 구현 : HTML 태그 안에 java 코드 집어 넣기

<%= juliet.getName() %> <%= juliet.toString() %>

어쩌라고.. ㅡㅜ 이런 조삼모사.. 원숭이 대가리.. 말미잘.. 멍게.. 변타이(????)

많이 징징거렸는데 사실 위 코드 정도까지는 아닙니다. 나름 극복하고자 하는 노력들을 통해 스파게티 코드를 최소화하고 프로그래머와 HTML 코더 사이에 분업 할 수 있도록 하는 방안들이 많이 있습니다. 즉, 프로그래머는 java 코딩만 집중하고, HTML 코더는 HTML 구성만 집중하게 하는 여러 아이디어들이 솟구쳐 나오기 시작했습니다. 그 중에서도 극강의 기법이 있었으니 바로 뭘까요? 에이 알면서.. 다음 강좌에 답이 있겠죠.

그럼 다음 강좌는 댓글 이후에 뵈어요. 마라나타. ^^/

프로젝트 소스: ExpertSpringMVC001.zip

저작자표시 비영리 동일조건

'강좌 > Spring @MVC' 카테고리의 다른 글

006. FrontController 패턴 2/2 - 급마무리 (4)	2013.03.04
005. FrontController 패턴 1/2 - 의역: 출입구 패턴, 분배기 패턴 (10)	2013.02.27
004. MVC? Model2 - 개발자를 칼퇴 시켜주는가? - 추고 중 (3)	2013.02.26
003. JSTL & EL - java 프로그래머와 HTML 코더의 협업 (20)	2013.02.26
001. Servlet - HTML 로 개발자 피로감 상승 시키기 (9)	2013.02.25

현재글002. JSP - HTML 코더 퇴사 시키기 / 개발자 더 힘들게 하기

여름나라겨울이야기

spring, AOP, Servlet, Srping, mvc, 털, 추상화, 스프링, 로엔, @MVC, Spring MVC, 자바스크립트, 뮤클캐스트, 음악방송, di, PSA, 의존성 주입, It, JavaScript, Spring @MVC,

Today :
Yesterday :

여름나라겨울이야기