1. 개요
전자정부 프레임워크의 개발환경 아키텍쳐에서는 편리한 조립식 구현환경을 제공하여 위저드 방식을 이용하여 한번의 클릭으로 공통컴포넌트를 선택하고 설치하는 기능과 DB 테이블 생성까지 바로 실행할 수 있는 코드를 생성해 준다고 설명합니다.
실제로 이전 포스트 전자정부 프레임워크 3.0 :: 홈페이지 구축하기 에서 홈페이지 템플릿을 위저드 방식을 이용하여 뚝딱 만들어 냈습니다.
이제 만들어진 홈페이지가 어떻게 구성되어 있으며, 실제 소스코드의 흐름이 어떻게 흘러가는지 살펴보겠습니다.
2. 홈페이지 구성
서버로 실행한 홈페이지의 메인화면 상단의 제목 옆에 빨간 물음표 버튼을 클릭하면, 홈페이지 템플릿 소개 화면이 보입니다. 홈페이지는 크게 사이트소개, 정보마당, 고객지원, 알림마당, 사이트관리 총 5개의 대메뉴로 구성되어 있으며, 관리자용 메뉴인 "사이트관리" 메뉴는 홈페이지에서 관리자 ID로 로그인을 하면, 관리자에게만 보이는 메뉴입니다.
관리자 계정은 전자정부 프레임워크 3.0 :: 홈페이지 구축하기 에서 기초정보를 입력할 때, all_sht_data_oracle.sql 에 설정되어 있는 사용자정보입니다.
아이디 : admin
비밀번호 : 1
화면 우측 상단에 로그인 버튼을 클릭하면 로그인화면으로 이동합니다. 아이디와 비밀번호를 입력하고 로그인버튼을 클릭하면 로그인 후, 메인화면으로 이동합니다.
관리자 계정으로 로그인을 하게되면, 사이트관리(관리자) 메뉴가 보입니다. 그리고 화면 우측 상단에도 로그인 된 사용자의 정보와 로그아웃 버튼이 보입니다. 일반적인 홈페이지의 로그인 과정과 기본적으로 같기 때문에 화면의 내용은 쉽게 이해하실 겁니다.
화면의 구조는 어느정도 파악되었을 거라 생각하며, 그래도 잘 이해가 안된다(?) 싶으시면 화면의 이것 저것을 좀더 만져보시길 바랍니다.
3. 소스코드 구조 및 흐름
이제 생성된 코드 구조를 확인해 보겠습니다.
로컬 이클립스에서 톰캣으로 서버를 구동하고, 웹 브라우저에서 http://localhost:8090/sht_webapp 로 접속하면, 기본적으로 프로젝트/src/main/webapp/로 접속되어 index.jsp 화면을 보여줍니다. 톰캣 server.xml에서 context path 경로를 바꾸더라도 항상 기본 경로는 프로젝트/src/main/webapp/로 접속됩니다.
현재는 이렇다고 이해하고, 이제 실제 메인화면이 나타나는 과정을 살펴보겠습니다.
전자정부 프레임워크는 기본적으로 spring mvc 기반으로 되어 있으며, 아래와 같은 과정에 의해 화면이 나타납니다.
이와 같은 설정을 기반으로 홈페이지 메인을 요청합니다.
http://localhost:8090/sht_webapp/
그러면 프로젝트홈/src/main/webapp/index.jsp 이 실행됩니다.
index.jsp파일에는 document.location.href에 의해 /cmm/main/mainPage.do URL로 다시 요청됩니다.
URL이 요청되면 DispatcherServlet에 설정된 RequestMappingHandlerMapping에 의해서 Controller 클래스에서 @RequestMapping 어노테이션으로 설정된 value값이 요청한 URL /cmm/main/mainPage.do 과 일치하는 메서드를 찾아서 매핑시켜 실행합니다.
URL과 매핑되는 Controller를 찾아보니 프로젝트홈/src/main/java/egovframework/let/main/web/EgovMainController.java getMgtMainPage 메서드와 매핑되는 것을 찾았습니다.
getMgtMainPage 메서드의 프로세스가 수행되면, 공지사항 메인 컨텐츠 조회를 수행하고, main/EgovMainView 값이 return 되면 UrlBasedViewResolver 에 의해 프로젝트홈/src/main/webapp/WEB-INF/jsp/main/EgovMainView.jsp 페이지가 호출됩니다.
그러면 샘플 홈페이지의 메인화면이 나타나게 됩니다.
5. 메인페이지의 구조
메인화면의 구조를 간단히 살펴보면, 크게 헤더(header), 탑메뉴(topnavi), 메인(main_container), 푸터(footer) 부분으로 나누어 지며, 메인 부분은 타이틀이미지, 공지사항, 묻고 답하기, 배너, 하단 서비스 부분으로 구성되어 있습니다.
기본 코드에서는 묻고 답하기 부분의 이미지가 갤러리로 되어 있는 버그가 있네요.. (급하게 진행하는 정부정책사업의 폐해인듯...)
6. 사이트소개 메뉴의 흐름
이번엔 사이트소개 메뉴의 흐름을 살펴보겠습니다.
사이트소개 메뉴는 탑메뉴(topnavi)에 해당하는 부분입니다.
사이트소개 메뉴는 메인페이지 EgovMainView.jsp 코드에서 id="topnavi" 라는 div에 import 되어있는 페이지에 사이트소개의 링크URL 정보가 정의되어 있습니다.
<c:import url="/EgovPageLink.do?link=main/inc/EgovIncTopnav" />
먼저 /EgovPageLink.do URL을 찾아보면, EgovComUtlController.java 파일에 moveToPage 메서드에 매핑되어 있습니다.
파일경로 : 프로젝트홈/src/main/java/egovframework/com/cmm/web/EgovComUtlController.java
moveToPage 메서드는 "JSP 호출작업만 처리하는 공통 함수"라고 (C언어스러운) 주석이 친절하게 작성되어 있습니다. 이 메서드는 link라는 파라미터로 전달된 값을 그대로 return하는 메서드입니다.
위의 과정을 통해 탑메뉴(topnavi) 정보는 메인페이지에 탑메뉴 부분에 EgovIncTopnav.jsp 페이지를 그대로 import 시킨 것입니다. 이미 눈치 채신 분도 있겠지만, link 파라미터의 코드정보만으로도 어느 위치에 어느 jsp 파일이 import 되어 있는지 쉽게 알 수 있습니다.
link= main/inc/EgovIncTopnav 는 main 화면에서 import 하는 파일들이 모여있는 inc 폴더 아래 EgovIncTopnav.jsp 파일을 연결(link)하라는 의미로 해석하면 좀 더 쉽게 이해할 수 있을 것입니다.
EgovIncTopnav.jsp 파일을 열어보면, 사이트소개는 클릭 시 fn_main_headPageMove 함수를 실행하는 javascript로 구현되어 있습니다.
<li>
<a href="#LINK" onclick="javascript:fn_main_headPageMove('11','main/sample_menu/EgovAboutSite')" >사이트소개</a>
</li>
fn_main_headPageMove 함수는 메뉴번호(menuNo)와 링크URL(link)을 파라미터로 설정하여 /EgovPageLink.do를 호출합니다. 사이트소개도 탑메뉴의 호출과정과 마찬가지로 link 파라미터로 설정되는 main/sample_menu/EgovAboutSite 값의 의미만으로도 메인페이지(main)의 샘플메뉴(sample_menu)에 해당하는 EgovAboutSite.jsp 페이지를 호출하라는 의미로 쉽게 확인할 수 있습니다.
파일경로 : 프로젝트홈/src/main/webapp/WEB-INF/jsp/main/sample_menu/EgovAboutSite.jsp
※ 이클립스에서 파일명을 알고 있으면, 단축키(Ctrl+Shift+R)를 사용하여 파일을 빠르게 찾을 수 있습니다.
EgovAboutSite.jsp 파일을 열어보면, 메인페이지인 EgovMainView.jsp 와 비슷한 구조로 헤더, 탑메뉴, 메인(container), 푸터의 구조로 되어 있으며, 메인페이지와는 조금 다르게, 메인(container) 부분에 좌측메뉴를 import 한 코드가 구현되어 있습니다.
<div id="container">
<!-- 좌측메뉴 시작 -->
<div id="leftmenu"><c:import url="/EgovPageLink.do?link=main/inc/EgovIncLeftmenu" /></div>
결과적으로 Spring MVC 흐름에 의해 사이트소개 메뉴를 클릭하게 되면, 아래와 같이 EgovAboutSite.jsp 화면이 보여지게 됩니다.
위와 같이 전자정부 프레임워크의 홈페이지 메뉴에 해당하는 화면(View)들이 Spring MVC 기반으로 바뀌고 설정되는 부분에 대해 간략하게 살펴보았습니다.
[출처] 전자정부 프레임워크 3.0 :: 홈페이지 구조 및 흐름 이해하기|작성자 Joy to the world
'IT노트 > eGov&Spring F/W' 카테고리의 다른 글
| [Spring 레퍼런스] 20장 스프링을 사용한 원격작업(remoting) 및 웹 서비스 #1 (0) | 2015.01.30 |
|---|---|
| <context- param> (0) | 2015.01.30 |
| Interceptor 와 Filter 의 차이점 (0) | 2015.01.30 |
| The Spring Tool Suite™ (STS) (0) | 2015.01.30 |
| 스프링의 스케쥴러 (0) | 2015.01.30 |
