JSP 페이지 모듈화하기, include 액션태그를 이용해보자

오늘은 JSP의 include 액션태그에 대해 작성해보려고 한다.

include 액션태그란 무엇일까?

 

설명에 앞서, 우리나라 최고의 포탈사이트인 naver에서 jsp라는 검색어로 검색을 진행해보았다.

본인은 jsp에 대한 이미지를 검색해보고 싶어(?) 위 화면에서 이미지 버튼을 눌렀다.

 

 

이 때 한 가지 사실을 알 수 있는데, 발견하였는가?

위 캡쳐본과 비교해보면 검색한 내용의 컨텐츠가 변경된 것과는 다르게 상단부분의 네이버 마크 및 아이디 상태, 검색창 등이 동일하게 유지됨을 알 수 있다.

 

그러면 새로운 페이지를 만들 때 다른 페이지와 동일한 부분도 똑같이 코딩할까?

정답은 'No' 이다.

이미 만들어 놓은 부분이 존재하다면 그 부분의 코드만을 끌어와서 사용한다면 간편하게 새로운 페이지를 만들 수 있으며, 페이지의 모듈화 또한 쉽게 가능할 것이다.

 

본 include 액션태그를 실습해보기 위해 개인적으로 만들어보고 있는 홈페이지를 이용하여 실습을 진행하였다.

올리기 부끄러운 퀄리티지만 실습을 위해 새로 만드는 것이 더 귀찮았기에...

 

홈페이지의 메인 화면이다.

홈페이지를 크게 세 부분으로 나누면 다음과 같다.

1. 사이트 명과 마크, 네비게이션으로 이루어진 top부분

2. 내용 및 로그인, 로그인 밑의 구현하지 않은 부분(아직 무엇을 넣을지 고민 중이다..)으로 이루어진 main부분

3. 메인 내용 밑의 footer부분

 

네비게이션을 통해 새로운 내용을 담은 페이지로 이동하고 싶다면, top부분과 footer부분은 고정시키고 main부분만 수정하여 새로운 페이지를 만든다면 코드를 간결화할 수 있고 모듈화가 가능할 것이다.

위의 사진은 메인 페이지의 코드를 숨기기하여 간단하게 틀만 보인 코드이다.

위에서 설명한 1번의 부분이 header와 ul 두 부분을 묶은 부분이며, 2번의 부분이 contents 클래스의 div, 3번 째 부분이 footer이다. 따라서 이 세 개를 따로 각각 top.jsp, main.jsp, footer.jsp라는 이름으로 저장하였다. (login_tool은 제외)

 

그럼 이제 테스트 페이지에 위 틀을 사용하여 실습을 진행해보도록 하겠다.

 

실습 결과를 보이기 앞서, jsp에서 include 액션태그를 이용하는 방법은 다음과 같다.

 

<jsp:include page="포함하고 싶은 페이지" flust="true"></jsp:include>
<!-- page에는 포함할 jsp페이지의 경로를 지정한다. 
	 flush에는 지정한 jsp 페이지를 실행하기 전에 출력 버퍼를 flush할 것인지에 대한 
     여부를 지정한다. true시 flush하며, false일시에는 flush하지 않는다. 기본 값은 
     false로 되어있다. -->

 

새로 만든 testInclude.jsp 페이지의 코드이다. 단순하게 top, main, footer.jsp 세 개의 jsp파일을 포함하기만 하였고

다른 코드를 포함하지 않았는데, 출력결과가 어떻게 나오는지 확인해보자.

 

처음의 페이지와 동일하게 화면이 나옴을 알 수 있다. 그럼 이번에는 main.jsp를 지우고 실행해보자.

 

main.jsp 파일을 포함하지 않고 테스트 메시지를 넣었다. 본 페이지의 형식에 맞게 margin을 설정하였다.

 

실행한 모습이다. main 부분의 내용이 전부 지워지고 테스트 메시지가 출력됨을 알 수 있다.

 

따라서 이러한 include라는 액션태그를 잘 이용한다면 코드를 모듈화하고, 원하는 부분만을 불러와서 사용하면 되므로 웹 프로그래밍에 있어 간편함을 느끼게 도와줄 것이다.

ajax를 이용하여 내용만을 변화시켜줄 수도 있지만, 꽤나 많은 화면의 변경 및 구조의 변경이 따른다면 include 액션태그를 사용하여 새로운 페이지를 만들어 불러오는 형식을 사용해도 좋을 것이다.