[본격 게시판짜기 Part2.1 Model2 MVC패턴] 뷰(View) 코드 분리

2012/06/13 - [Lecture/HTML] - [본격 게시판짜기 Part1.1 - 게시판도 HTML부터] 게시글 리스트

2012/06/13 - [Lecture/HTML] - [본격 게시판짜기 Part1.2 - 게시판도 HTML부터] 글입력폼

2012/06/13 - [Lecture/Javascript-기초] - [본격 게시판짜기 Part1.3 - Dom 맛보기 ] 글입력폼 검사

2012/06/13 - [Lecture/Jsp] - [본격 게시판짜기 Part1.4 - HTML-> JSP] form 파라미터 받기

2012/06/26 - [Lecture/SQL / Oracle] - [본격 게시판짜기 Part1.5 JSP > Oracle] 게시판 DB 테이블 생성

2012/06/26 - [Lecture/Jsp] - [본격 게시판짜기 Part1.6 Oracle > JSP] Database 접속 및 Select

2012/07/05 - [Lecture/Jsp] - [본격 게시판짜기 Part1.7 JSP, SQLDeveloper] 게시글 입력 및 리스트조회기능

2012/07/08 - [Lecture/Jsp] - [본격 게시판짜기 Part1.8 JSP 게시글 조회] 게시글 조회기능 및 게시글 삭제

안녕하세요 cocy입니다.

이제부터 본격적으로 MVC패턴 게시판 만들기를 들어갈텐데요, 

코드를 아에 처음부터 다시 작성하지 않고,

model1으로 개발한 소스를 가지고 코드를 분리하여 만들도록 하겠습니다.

그래서 여지껏 포스팅했던 소스가 필요하시면 

svn이라는 소스공유플러그인을 이클립스에 설치해

다음의 주소에서 import하실 수 있습니다.

https://dev.naver.com/svn/board1/board1

svn username/password : anonsvn/anonsvn

svn플러그인 설치법과 svn사용법은 다음의 게시글을 참고하시기바랍니다.

http://cusmaker.tistory.com/entry/SVN-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EC%84%A4%EC%B9%98

네이버 SVN서비스가 종료되어 늦었지만 지금이라도 github으로 대체합니다. 

github : https://github.com/zuhthebeg/board1

소스 확보가 끝나셨으면 이제 큰 밑그림을 그려봅시다.

막상 MVC가 현재까지 작성한 소스들의 분업화, 코드분리라고 했는데 

어디서부터해야할지 막막한게 사실입니다.

코드를 찬찬히 뜯어봅시다.

살펴보면 지금까지 작성한 코드에서 이질적인 코드 두 부류가 눈에 보이실 겁니다.

바로 스크립트릿(<%, %>) 안에 들어가는 jsp구문들입니다. 

MVC에서는 바로 이 스크립트릿을 사용하지 않습니다.

저러한 소스들은 모두 프로젝트를 열어보시면 src폴더안에 순수한 자바코드로서 들어가게 됩니다.

그렇게 되면  JSP안에는 HTML코드와 자바스크립트 코드만 남게 되겠죠?

그것이 바로 MVC 뷰의 시작입니다.

그럼 데이터들을 표시(<%=, %>)해주는건 어떻게 할까요?

데이터베이스에서 불러온 값을 변수에 담아서 뿌려주는 건 JSP에서 당연히 해야하는일입니다.

하지만 스크립트릿의 분리가 MVC의 뷰 구성에 시작이라고 했습니다.

그래서 JSP에서는 EL(Expression Language)라고 하는 표현언어를 사용합니다.

바로 JSTL이라는 놈입니다.

jstl-1.2.jar

다운 받아서 WebContent > WEB-INF > lib 폴더에 붙여넣기 해주세요.

이러한 라이브러리들은 인터넷 검색하면 쉽게 찾을 수 있습니다.

그럼 이를 사용하려면

기본적으로 이 라이브러리를 사용하려면 jsp페이지 상단에 다음의 구문을 추가합니다.

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

라이브러리를 사용하겠다는 선언입니다.

사용법은 간단합니다. 자세한 사용법은 차차 익혀나가시면 됩니다.

<%= %> 대신에 ${변수이름}

for문 대신에 <c:forEach items="" var=""></c:forEach>   

items에는 for문으로 돌릴 리스트나 맵따위가 들어가며 var에는 iterator될 값들이 들어갑니다.

if문 대신에 <c:if test=""></c:if>

쌍따음표안에 조건문이 들어갑니다.

content.jsp를 예로 들건데요

그전에 jstl을 쓰려면 소스 각 부분에 포진한 스크립트릿들을 한데 모아줄 필요가 있습니다.

그보다전에 아주 중요한 request객체에 대해서 설명해 드릴텐데요,

전에 인코딩문제와 파라미터를 받을때 쓰인것을 기억하실겁니다.

request객체의 역할은 이뿐만아니라, MVC패턴에서 아주 중요한 ※dispatcher와 forward를 합니다. 검색해보세요

request.setAttribute() 라는 메소드는 getParameter()와 반대로 페이지에서 해당 변수들을 사용할 수 있게합니다.

그럼 기존의 소스를 request.setAttribute()를 사용해서 스크립트릿과 html부로 이원화 시켜봅시다.

*그림 2-1 기존소스

*그림 2-2 수정된 소스

content.jsp의 헤더부터 바디까지의 소스입니다. 

차이점이 보이시나요?

스크립트릿으로 표현되는 모든 부분을 상단에 하나의 스크립트릿안에 전부 넣었습니다.

그다음에는 이 소스를 java소스로 만들고 이소스와 jsp페이지간의 연결고리를 만들어야 하는데요.

이때 컨트롤러가 등장합니다. 

컨트롤러의 역할은 해당 URL을 파악하고 해당하는 java 액션(위의 스크립트릿에 들어있는 기능)파일을 찾아 매치시켜주고,

해당 액션이 실행되면 request.setAttribute()에 의해 넘어온 값들을 jsp페이지로 포워딩시켜주는 역할을 합니다.

다음시간에는 이러한 역할을 하는 컨트롤러의 구성을 해 보도록 하겠습니다.

아차차 그전에 index.jsp페이지의 코드분리가 필요한데요,

DB에서 가져오는 데이터가 많기때문에 뭔가 코드 분리하기가 애매합니다.

request.setAttribute()를 써야되는 시점도 애매하고,,,,

이때 Entity Beans라고 하는 디자인패턴이 등장합니다.

다음시간에는 Entity Beans에 대해서 알아보고 index.jsp의 코드분리도 같이 진행하도록 하겠습니다.

그 다음에 컨트롤러구성에 들어가도록 합시다.

수고하셨습니다.

다음장으로 >> http://cusmaker.tistory.com/84