[Java / Spring] 14. 컨트롤러 추가 및 페이지 모듈 분리

본격적으로 스프링을 이용한 MVC 형태의 웹 개발을 하기 위해 컨트롤러 몇 개를 추가해보겠다.

 

우선 공지사항 컨트롤러를 추가해볼텐데 static 폴더에서 notice 폴더를 살펴보면 다음과 같은 2개의 파일이 있는 것을 확인할 수 있는데, 우리는 이것을 jsp로 구현할 것이다.

 

static

 

 

그러기 위해서 먼저 view 폴더에 'notice'라는 이름으로 폴더를 생성하고 해당 폴더 안에 위 2개의 파일 이름과 동일하게 jsp 파일 2개를 생성해준다.

 

webapp

 

 

이후 list.html 파일의 내용을 list.jsp 파일로 복사하여 가져온다. 마찬가지로 detail.html 파일의 내용을 detail.jsp 파일로 복사하여 가져온다.

 

이로써 우리는 공지사항 목록을 볼 수 있는 뷰 페이지와 실질적인 글의 내용을 볼 수 있는 뷰 페이지를 만들었다. 그렇다면 이제 컨트롤러를 준비해야 한다.

 

컨트롤러 클래스를 생성하기 전에 다른 컨트롤러와 따로 분류하기 위해서 기존 패키지 안에 또 다른 패키지를 추가해주었다.

 

 

 

이후 해당 패키지 안에 클래스를 생성하여 다음과 같이 구현한다.

 

ListController

 

 

DetailController 또한 위처럼 구현해주면 된다.

 

컨트롤러를 만들어주었으면 url 매핑을 수행해야 하기 때문에 dispatcher-servlet.xml 파일을 열어 코드를 추가해준다.

 

dispatcher-servlet.xml

 

 

이후 index 파일을 통해 실행하고 오른쪽 상단의 고객센터 버튼을 누르면 공지사항 페이지가 출력되는 것을 확인할 수 있다.

 

 

 

다만 url를 자세히 살펴보면 'list.html'을 경로로 사용하고 있는데, 이는 다시 얘기하면 컨트롤러를 요청한 것이 아니라 html 파일을 요청한 것라는 뜻이다.

 

static 폴더 안에도 notice 폴더가 존재하기 때문

 

 

이를 수정하기 위해 index.jsp 파일을 열고 헤더 부분에서 고객메뉴 부분의 url을 '/notice/list.html'에서 '/notice/list'로 변경해준다. 이유는 당연히 컨트롤러의 url을 요청해야 하기 때문이다.

 

index.jsp

 

 

이후 홈페이지에서 뒤로가기 버튼을 누른 뒤, 새로고침하고 다시 공지사항 페이지로 이동하면 컨트롤러 요청에 의한 정상적인 주소가 찍히는 것을 확인할 수 있다.

 

Result

 

 

다음으로는 글 목록에 있는 글을 클릭했을 때의 뷰 페이지를 보여줄 수 있도록 detail.jsp를 설정해주어야 한다.

 

이번에는 list.jsp 파일을 열고 공지사항 줄 부분의 url에서 .html을 제거해준다.

 

list.jsp

 

 

이후 페이지를 다시한번 새로고침하고 글 목록에 있는 글을 클릭했을 때의 결과를 확인한다.

 

 

 

페이지도 정상적으로 출력되고 주소 또한 원하는 경로로 되어 있는 것을 확인할 수 있다.

 

그런데 여기서 우측 상단의 고객센터 버튼에 마우스를 올리게 되면 우측 하단에 해당 버튼을 클릭했을 때 보여질 주소를 확인할 수 있는데, 다음과 같은 주소가 나타나는 것을 확인할 수 있다.

 

 

 

우리는 index.jsp의 헤더 부분에 있는 url만 수정했으므로 다른 jsp 파일에 있는 헤더 부분을 참조하게 될 경우 위와 같은 일이 발생하는 것이다.

 

이를 해결하기 위해 모든 jsp 파일의 헤더 부분을 수정해줄 수도 있겠지만, 좀 더 효율적으로 일하기 위해서 페이지의 공통 분모를 집중화하는 방법을 사용해보자.

 

먼저 페이지 모듈화를 위해 index.jsp 파일의 header 부분을 잘라내기하고, view 폴더 아래에 'inc'라는 이름의 폴더를 생성한 뒤, 해당 폴더에 jsp 파일을 추가하여 잘라내기 했던 header 부분을 붙여넣기한다.

 

동일한 방식으로 index.jsp 파일의 footer 부분을 잘라내기하고, inc 폴더에 jsp 파일을 추가하여 잘라내기 했던 footer 부분을 붙여넣기 한다.

 

 

 

다음으로 list.jsp 파일의 header 부분과 footer 부분이 index.jsp 파일에 있던 header, footer 부분과 동일하기 때문에 모두 지워준다.

 

다음으로는 list.jsp와 detail.jsp의 공통 분모인 visual 부분을 list.jsp 파일에서 지워준다.

다만 visual 부분은 모든 페이지에 공통적으로 포함되지는 않기 때문에 inc 폴더에 jsp 파일을 둘 순 없고 따로 폴더를 생성해주어야 한다.

 

때문에 다음과 같이 폴더를 생성하고 해당 폴더 안에 jsp 파일을 추가하여 이전에 잘라내기 했던 visual 부분을 붙여넣어 준다.

 

 

 

추가로 이전에 생성했던 notice 폴더 또한 customer로 분류되므로 위치를 옮겨주었다.

 

 

 

이후에도 customer와 관련된 요소가 늘어나게 된다면 customer 폴더 안에 새로운 폴더가 계속해서 추가될 것이다.

 

이제 다음 공통 분모인 aside 부분을 list.jsp 파일에서 지워준 뒤, customer -> inc 폴더에 jsp 파일을 추가하고 붙여넣기 한다.

 

 

 

다음으로 main 부분만 따로 분류하기 위해 list.jsp 파일을 복사하여 customer -> inc 폴더에 붙여넣기 하고, 파일 이름을 'layout'으로 변경한 뒤 파일을 열어 main 부분을 잘라내기 한다.

 

 

 

이후 list.jsp 파일을 열고 <page> 태그를 제외한 모든 구문을 삭제한 뒤, 잘라내기 했던 main 부분을 붙여넣기 한다.

 

모든 공통 분모들이 이미 분리되어 저장되었기 때문에 detail.jsp 파일에서는 main 부분만 잘라내기 한 뒤, <page> 태그를 제외한 다른 모든 구문을 삭제하고, 잘라내기 했던 main 부분을 붙여넣기 한다.