[꼼꼼한 개발자] 꼼코더
35. 코드로 배우는 스프링 웹 프로젝트 - [화면 처리] - 화면 개발, includes 적용, Model에 담긴 데이터 출력 본문
35. 코드로 배우는 스프링 웹 프로젝트 - [화면 처리] - 화면 개발, includes 적용, Model에 담긴 데이터 출력
꼼코더 2023. 1. 27. 01:08📺 화면 개발
지금까지 처리와 테스트를 모두 마쳤다
만일 에러가 발생한다면 화면 관련 에러일 것이다.
화면 개발은 JSP, JavaScript(jQuery), CSS, HTML을 이용해서 작성한다.
화면을 개발하기 전에는 반드시 화면 전체 레이아웃이나, 디자인이 반영된 상태에서 개발하는 것을 추천한다.
화면을 나중에 처리하다가는 두 배의 시간을 드리는 결과가 나타날 수 있다.
웹 디자이너가 없다면 유행하는 BootStrap을 이용한 무료 디자인들을 찾아보자
예제에서 사용할 디자인은 ‘SB Admin2’를 사용한다.
에서 다운 로드 후 압축을 풀어 사용하자.
📑 목록 페이지 작업과 includes(servlet-context.xml 파일수정)
스프링 MVC의 JSP 처리 설정은 servlet-context.xml에 아래와 같이 작성한다.
스프링 MVC의 설정에서 화면 설정은 ViewResolver라는 객체를 통해서 이루어진다.
예제 설정은 ‘/WEB-INF/views’ 폴더를 이용하는 것을 볼 수 있다.
‘/WEB-INF/views’ 경로는 브라우저에서 직접접근이 불가한 경로이다
따라서 위 예제처럼 Controller를 이용하는 모델 2 방식에서는 기본적으로 사용하는 방식이다.
게시물 리스트 URL은 ‘board/list’이므로 최종적인 ‘‘/WEB-INF/views/board/list.jsp’가 된다
해당경로에 list.jsp 파일을 추가 후 작성해보자.
👨🏻💻 list.jsp 작성
board 폴더 생성 → list.jsp 파일 생성
SB Adming2의 pages 폴더 속 tables.html의 내용을 복사하여
상단 JSP 지시자를 제외한 나머지 코드를 전부 복붙 해준다.
위 jsp 코드 속을 보면 파일 경로는 vendor 이므로 css, js 모두 정상적으로 실행될 수 없다.
그 이유는 servlet-context.xml 코드 속을 보면
CSS나 JS 파일과 같이 정적인(static) 자원들의 경로를 ‘resources’라는 경로로 지정하고 있기 때문이다.
SB admin 압축을 풀어 모든 폴더(css, js 등)를 프로젝트 webapp > resources 폴더로 복사해 넣어놓는다
파일들을 resources 경로로 넣어도 아직 페이지 경로를 수정하지 않았기 때문에
코드 속에서 페이지 경로도 수정해 주자
💁🏻♂️ 결과
이제 브라우저에 /board/list를 호출하면 다음과 같이 css까지 정상적으로 적용된 화면이 나타난다.
👉🏻 includes 적용
JSP를 작성할 때마다 많은 양의 HTML 코드를 이용하는 것을 피하기 위해
JSP의 include 지시자를 활용해서 페이지 제작 시 필요한 내용만 작성할 수 있게 사전작업이 필요하다.
views 폴더 → includes 폴더 생성 → header.jsp, footer.jsp 생성
👨🏻💻 header.jsp
header.jsp는 위 쪽 HTML 내용을 처리하기 위해 작성한다.
SB Admin2는 <div> 중에서 id 속성값이 ‘page-wrapper’부터가 핵심정인 내용이므로
처음부터 <div id="page-wrapper"> 라인까지 잘라 옮겨준다.
👨🏻💻 list.jsp 파일 수정
header.jsp를 <%@include file="../includes/header.jsp"%> 처리 후 브라우저에서 화면이 깨지지 않는지 확인해 본다.
💁🏻♂️ 결과
👨🏻💻 footer.jsp적용
<div id="page-wrapper">가 끝나는 태그부터 마지막까지 옮겨준다.(잘라서 붙이기)
👨🏻💻 list.jsp 파일 수정
footer.jsp를 <%@include file="../includes/footer.jsp"%> 처리 후 브라우저에서 화면이 깨지지 않는지 확인해 본다.
💁🏻♂️ 결과
header.jsp와 마찬가지로 수정 뒤에 정상적으로 동작하는지 확인해 준다
📑 목록 화면 처리
list.jsp 페이지 일부를 include 하는 방식으로 처리했어도
많은 HTML의 내용들이 남아 있으니 아래와 같이 최소한의 태그들만 적용시켜 준다
이후 JSTL의 출력과 포맷을 적용할 수 있는 태그 라이브러리를 추가한다.
🧸 Model에 담긴 데이터 출력
/board/list를 실행했을 때 이미 BoardController는 Model을 이용해서
게시물의 목록을 ‘list’라는 이름으로 담아서 전달했으니 list.jsp에서는 이를 출력한다.
출력은 JSTL을 이용해서 처리한다.
💁🏻♂️ 결과
데이터 베이스의 전체 목록이 출력된다.
위 내용은 코드로 배우는 스프링 웹 프로젝트 교재를 참고하여 작성되었습니다.
코드로 배우는 스프링 웹 프로젝트 - YES24
이 책은 Spring Framework(이하 스프링)를 사용해서 말 그대로 ‘웹 프로젝트’를 어떻게 진행하는지를 설명하는 책이다. 웹 프로젝트라고 거창하게 표현하지만, 좀 더 구체적으로는 스프링으로 웹
www.yes24.com
