유튜브 뉴렉처 Spring 강의 35강
HTML 파일 설정하기
기본적인 페이지를 가지고 MVC를 개발해야하기때문에 기본적인 HTML파일을 설정한다.
*예제다운로드 : 예제는 뉴렉처 Spring 35강에 링크
html 예제 파일을 압축풀어준뒤 이것을 기반으로 웹프로젝트를 만들것이기때문에 webapp 폴더에 넣어준다.
현재 index.jsp는 아무런 내용도없기때문에 퍼블리싱되어있는 문서 index.html 내용을 옮겨주도록 한다.
경로에 맞게 css , images , js 폴더를 html폴더 밖으로 빼주도록한다.
정적 파일 서비스하기
스프링은 기본적으로 정적인 파일을 막아놓는다.
/ 만있을때는 jsp는 괜찮지만 기본적으로 정적인파일은 다 막아놓는것
/* 는 jsp까지 막힌다.
해결하기 위해서는 dispatcher에서 사용자가 요청을하는 url을 어떤 디렉토리에서 찾을지 설정해주면된다.
이렇게 설정을 할수있는데 일반적으로는 resource라는 파일에 묶어서 사용한다.
<mvc:resources location="/resource/" mapping="/resource/**" />
Spring dispatcher에 mvc스키마 파일을 사용하기위해 beans에 설정을 추가해준다. (네임스페이스)
xmlns를 복사해준뒤 뒤에 붙여주고 mvc라는 이름의 mvc주소로 바꾸어주고 이름을 xmlns:mvc 로 설정
shemaLocation 또한 복사해준뒤 뒤에 붙여주고 mvc주소로 바꾸어준다.
설정후에 mvc태그를 사용한다.
최근에는 Spring boot 에서 static을 많이 사용하고있기때문에 static으로 설정을 해주도록한다.
(resources 파일에 넣어두고 mapping을 /resources/** 사용해도 괜찮지만
jsp파일 경로앞에 /resources/를 추가해주어야하는 불편함이있다)
<mvc:resources location="/static/" mapping="/**" />
static(정적) 파일이 요청되면 static폴더에서 찾아본다. (이때 static의 매핑은 루트로 되어있다)
static폴더안에 css, images , js 같은 정적폴더들을 넣어놓고 실행해보면 잘 동작하는것을 확인할수있다.
공지사항 컨트롤러 추가하기
예제로 받은 html파일의 notice 폴더에 있는 detail.html 과 list.html 를 jsp파일로 변환 하도록한다. (코드 복사붙여넣기)
컨트롤러를 준비하기위해 java코드가있는 컨트롤러 패키지안에서
notice 패키지를 하나 추가하고 ListController를 만들어준다.
ModelAndview 에 정보를 전달 해주고 반환받는다.
컨트롤러를 만들었으면 URL과 매핑을 시켜주어야한다 ( dispatcher-servlet.xml 에서 )
매핑을 시켜준 후에 index.jsp에서 공지사항으로 가는 경로를 수정해준다.
컨트롤러의 URL은 확장자가 빠져야한다.
메인화면에서 고객센터를 눌러 공지사항페이지로 이동했을때 주소가 list 로 나오면 성공적으로 처리된것
Detail 또한 컨트롤러를 만들고 매핑을 시켜준뒤 공지사항페이지에서 자세한 페이지로 이동할수있게 해준다.
(같은 작업)
페이지 모듈 분리하기
페이지 집중화를 위해서 페이지 공통으로 나타나는부분과 아닌부분을 나누어주어야한다.
view 폴더 안에 인클루드의 의미를 가지고있는 inc라는 폴더를 하나만들어준다.
inc폴더 안에는 index 페이지의 header와 footer부분을 각각 잘라서 jsp 파일로 만들어준다. (잘라서 붙여넣기)
* index.jsp는 header와 footer부분을 지워주어야한다
header.jsp (기존의 index.jsp의 header부분)
footer.jsp (기존의 index.jsp의 footer부분)
이렇게 나누어준 공통분모를 가지고있는 jsp는 ( list.jsp , detail.jsp ) 공통분모를 지워주도록한다.
(같은 내용 중복 방지) *head와 header를 헷갈리면 안된다.
list.jsp와 detail.jsp를 잘보면 visual 과 aside를 공통분모로 사용하고있는것을 알수있다.
이것들도 공통분모로써 inc폴더에 빼주게될텐데 전체페이지가 사용하고있는 header와 footer를 가지고있는 inc폴더말고
고객센터 메뉴들만 사용하는 공통분모이기 때문에 따로 폴더명을 만들고 그안에 inc폴더를 만들어 저장해주도록한다.
*이때 새로만든 폴더안에 notice(공지사항)폴더를 옮겨주고 , 이벤트(event) .. 등 의 폴더를 만들어
같은 공통분모를 가지고있는 폴더를 모아준다
aside.jsp
visual.jsp
현재 list.jsp에는 main을 포함한 껍데기들이 남아있기때문에 배치영역(Layout)으로 사용하기좋다
Layout페이지를 만들기 위해서 list.jsp를 복사해 inc에 붙여넣기를 해준다. ( 이름을 layout으로 바꾸어준다)
가져온 페이지의 main부분은 따로 잘라내서 list.jsp내용을 지우고 그대로 복사붙여넣기를 해준다.
이렇게되면 현재 layout.jsp는 레이아웃만 남아있는상태
list.jsp는 main만 가지고있는 상태가된다.
detail.jsp 또한 레이아웃은 이미가져왔으니 main만 남기고 전부 지워주도록한다.
layout.jsp
list.jsp
detail.jsp
이렇게 나누어진 파일들은 Tiles를 이용해 조립할수있다.
뉴렉처 Spring강의 40강 완
'Step by Step' 카테고리의 다른 글
| Spring 공부 2021-04-02 (0) | 2021.03.30 |
|---|---|
| Spring 공부 2021-03-29 (0) | 2021.03.29 |
| Spring 공부 2021-03-21 (0) | 2021.03.21 |
| Spring 공부 2021-03-18 (0) | 2021.03.18 |
| Spring 공부 2021-03-17 (0) | 2021.03.17 |