Other

Chapter 11 화면처리

각 영역에 대한 모든 처리와 테스트가 완료됨
만일 에러가 발생한다면 모든 문제는 화면 쪽에서만 발생한다고 말할 수 있음
화면에는 JSP와 JavaScript(jQuery), CSS, HTML을 이용해서 작성함

화면을 개발하기 전에는 반드시 화면의 전체 레이아웃이나 디자인이 반영된
상태에서 개발하는 것을 추천함
일부 개발자들은 화면을 나중에 처리한다고 생각하고 진행하는 경우가 있는데 결과적으로는
두 배의 시간을 들이는 결과가 될 가능성이 높기 때문에 권장하지 않음

만일 웹 디자이너가 같이 참여하지 못한다면 최근에 유행하는 BootStrap을 이용한
무료 디자인을 찾아보는 것도 좋음
https://startbootstrap.com/template-categories/all/

예제에서 사용할 디자인은 'SB Admin2'를 이용합니다
SB Admin2는 http://startbootstrap.com/template-overviews/sb-admin-2/를 통해서
다운로드 후에는 압축을 풀어서 사용하면 됨

11.1 목록 페이지 작업과 includes

스프링 MVC의 JSP를 처리하는 설정은 servlet-context.xml에 아래와 같이 작성되어 있음

servlet-context.xml의 일부

	<!-- Handles HTTP GET requests for /resources/** by efficiently serving up static resources in the ${webappRoot}/resources directory -->
	<resources mapping="/resources/**" location="/resources/" />

	<!-- Resolves views selected for rendering by @Controllers to .jsp resources in the /WEB-INF/views directory -->
	<beans:bean class="org.springframework.web.servlet.view.InternalResourceViewResolver">
		<beans:property name="prefix" value="/WEB-INF/views/" />
		<beans:property name="suffix" value=".jsp" />
	</beans:bean>

스프링 MVC의 설정은 ViewResolver라는 객체를 통해서 이루어지는데,
위의 설정을 보면 /WEB-INF/views/폴더를 이용하는것을 볼 수 있음

WEB-INF경로는 브라우저에서 직접 접근할 수 없는 경로이므로 반드시
Controller를 이용하는 모델2 방식에서는 기본적으로 사용하는 방식임

게시물 리스트의 URL은 /board/list이므로 최종적인 경로는
/WEB-INF/views/board/list.jsp가 됨 해당 경로에 list.jsp 파일을 추가하겠음

views/board/list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
    <h1>List Page</h1>
</body>
</html>

list.jsp는 우선 정상적으로 URL 처리가 되는지를 확인해야 하므로 Tomcat으로 실행해서 확인함
'ex02' 프로젝트를 선택하고 Run on Server로 tomcat실행 localhost경로에 /controller/board/list로 접근
첫 실행시에만 /controller를 붙이고 서버설정에서 Path를 /로 교체해줌

11.1.1 SB Admin2 페이지 적용하기

정상적으로 'board/list' 페이지가 동작한다면 SB Admin2의 pages 폴더에 있는
tables.html 내용을 list.jsp의 내용으로 그대로 카피앤페이스트 해줌
이때 list.jsp의 상단에 JSP Page 지시자는 지우지 않아야함

views/board/list.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
... 이하 생략 ...

브라우저에서는 CSS 등이 완전히 깨진 상태이므로 텍스트만 출력되는것을 볼 수 있음

bootstrap 디버깅 과정

CSS와 JS파일들의 경로를 수정하는 작업은 브라우저의 개발자 도구를 통해서 확인하며 진행함
개발자 도구를 통해서 현재 브라우저의 Network 부분을 확인하고, 페이지를 '새로고침'하면 잘못된 URL의 정보를 확인가능

SB Admin02의 CSS 경로는 http://localhost:8080/vendor/bootstrap/css/bootstrap.min.css 이므로
현재 프로젝트에서는 제대로 서비스될 수 없음

com.crow.config.WebConfig 클래스에는 CSS나 JS 파일과 같이 정적인(static) 자원들의 경로를
resources라는 경로로 지정하고 있음

servlet-context.xml의 일부

<resources mapping="/resources/**" location="/resources/" />

SB Admin2의 압축을 풀어둔 모든 폴더를 프로젝트 내 webapp 밑의 resources 폴더로 복사해 넣어줌
(resources라는 폴더가 여러개 존재하므로 주의해야함 WEB-INF라는 경로를 기준으로 찾는 것이 좋음)

파일들을 resources 경로로 넣어도 아직은 페이지에서 경로를 수정하지 않았기 때문에 문제가 생기는 것은 동일함
list.jsp 파일에서 CSS나 JS 파일의 경로를 /resources로 시작하도록 수정함
(가장 간단한 방법은 Find/Replace를 이용하는 방식임 하지만 bootstrap 개편후 사이트 에서 받은 버전에선 불가능)

수정 후 브라우저를 통해서 /board/list를 호출하면 CSS가 정상적으로 적용된 화면을 볼 수 있음
CSS, JS 파일들의 링크는 모든 페이지에서 사용될 것이므로 화면에서 디자인이 깨지지 않는 것을 확인한 후에 다음 내용을 진행하도록 해야함

11.1.2 includes 적용

JSP를 작성할 때마다 많은 양의 HTML 코드를 이용하는 것을 피하기 위해 JSP includes 지시자를 활용해서
페이지 제작 시에 필요한 내용만을 작성할 수 있게 사전에 작업을 해야 함

현재 프로젝트 views 폴더에 includes 폴더를 작성하고, header.jsp와 footer.jsp를 선언함

header.jsp 적용

header.jsp는 페이지에서 핵심적인 부분이 아닌 영역 중에는 위쪽의 HTML 내용을 처리하기 위해서 작성함
브라우저에서 검사기능을 활용하면 특정한 <div>가 어떤 부분을 의미하는지 확인할 수 있음

SB Admin2는 <div>들 중에서 id 속성값이 page-wrapper부터가 핵심적인 페이지의 내용임
list.jsp 파일의 처음 부분에서 <div id='page-wrapper'>라인까지 잘라서 header.jsp의 내용으로 처리함
(약 378라인 근처)

list.jsp 일부

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

<%@ include file="../includes/header.jsp" %>

            <div class="row">
                <div class="col-lg-12">
                    <h1 class="page-header">Tables</h1>
...생략...

header.jsp <%@include ...로 처리한 후에는 다시 브라우저에서 화면이 깨지지 않는지 확인해야 함

2022_03_05 - oneso123456789/2022 GitHub Wiki

Other

Chapter 11 화면처리

11.1 목록 페이지 작업과 includes

servlet-context.xml의 일부

views/board/list.jsp

11.1.1 SB Admin2 페이지 적용하기

views/board/list.jsp

bootstrap 디버깅 과정

servlet-context.xml의 일부

11.1.2 includes 적용

header.jsp 적용

list.jsp 일부

footer.jsp 적용

⚠️ GitHub.com Fallback ⚠️

2022_03_05 - oneso123456789/2022 GitHub Wiki

Other

Chapter 11 화면처리

11.1 목록 페이지 작업과 includes

servlet-context.xml의 일부

views/board/list.jsp

11.1.1 SB Admin2 페이지 적용하기

views/board/list.jsp

bootstrap 디버깅 과정

servlet-context.xml의 일부

11.1.2 includes 적용

header.jsp 적용

list.jsp 일부

footer.jsp 적용

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️