1. 내용 : 프로젝트를 발표할 때 심리적 안정을 줄 수 있는 방법이 있다.
바로 에러페이지를 만드는 것이다.
만드는 방법도 간단하고 발표하다 예기치 못하게 오류가 나는 경우
에러페이지를 보여주기 위해서였다며 너스레도 떨 수 있다.
(물론 학원에서 하는 프로젝트이기에 가능한 이야기임)
그리고 실제 웹페이지를 만들 때에도 에러페이지는 중요하다.
에러가 발생하였을 때 "원하시는 페이지를찾을 수가 없습니다." 등의 안내와 함께
사용자가 어떤 행동을 해야 하는지를 제시해줄 수 있기 때문이다.
그렇다면 에러페이지를 지금부터 만들어보자!
2. 경로 / 코드 및 화면
위의 경로를 참고하여 web.xml을 켠 후 아래의 코드를 추가한다. 그리고 코드에 적힌 경로에 맞춰 error 폴더와 함께 error404.jsp와 error500.jsp도 만들어 주었다.
<!-- 에러 페이지로 넘기기 -->
<error-page>
<error-code>404</error-code>
<location>/WEB-INF/error/error404.jsp</location>
</error-page>
<error-page>
<error-code>500</error-code>
<location>/WEB-INF/error/error500.jsp</location>
</error-page>그리고 각 에러 페이지에 필요한 안내 문구와 이미지를 넣어준다. 그에 대한 코드는 아래와 같다.
1) error404.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>\
<%@ page import="java.util.Random" %>
<!DOCTYPE html>
<html>
<head>
<%@include file="/WEB-INF/inc/header.jsp" %>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
</head>
<body>
<%@include file="/WEB-INF/inc/top.jsp" %>
<div class="container">
<div class="row mt-5">
<h2 class="tit_error">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
404<br>
원하시는 페이지를찾을 수가 없습니다.
</h2>
<p class="desc_error">
원하시는 페이지의 주소가 잘못 입력되었거나,<br>
변경 혹은 삭제되어 요청하신 페이지를 찾을 수가 없습니다.<br>
입력하신 페이지의 주소가 정확한지 다시 한번 확인해 주시기 바랍니다.
</p>
<div>
<img class="logo_img" src="<%=request.getContextPath() %>/resources/img/error<%
Random ran = new Random();
int number = ran.nextInt(6)+1;
out.print(number);
%>.gif" style="width:400px; height:400px;" >
</div>
</div>
</div>
</body>
</html>2) error500.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page import="java.util.Random" %>
<!DOCTYPE html>
<html>
<head>
<%@include file="/WEB-INF/inc/header.jsp" %>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<%@include file="/WEB-INF/inc/top.jsp" %>
<h2 class="tit_error">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
<path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"/>
</svg>
500<br>
내부 서버 오류가 있습니다. </h2>
<p class="desc_error">
죄송합니다. 현재 서버에 문제가 있어 <br>
요청하신 페이지를 표시할 수 없습니다.<br>
계속해서 문제가 발생한다면 관리자에게 문의해주세요.
</p>
<div>
<img class="logo_img" src="<%=request.getContextPath() %>/resources/img/error<%
Random ran = new Random();
int number = ran.nextInt(6)+1;
out.print(number);
%>.gif" style="width:400px; height:400px;" >
</div>
</body>
</html>3) 실제 화면 (404를 예시로)
우리는 에러페이지의 사진을 랜덤으로 뜨게 하여 재미요소도 더했지만
(여러 번 에러가 나는 경우의 대비이기도 하였다. 혹시 모르니까...)
실제 발표 때는 에러가 나지 않아서.... 보여주지 못했다ㅋㅋㅋㅋㅋ
사실 이상한 주소를 쳐서 보여줄 수도 있지만 까먹었음
'SPRING > SPRING 프로젝트' 카테고리의 다른 글
| SPRING 팀 플젝 : 게시판에 summernote 에디터 적용하기 (0) | 2023.01.30 |
|---|---|
| SPRING 팀 플젝 : 쇼핑몰 고객센터 FAQ (0) | 2023.01.27 |
| SPRING 팀 플젝 : @valid를 이용한 회원 가입 유효성 (1) | 2023.01.11 |
| SPRING 팀 플젝 : 오라클로 쇼핑몰 DB 설계하기(ERD) (0) | 2023.01.11 |
| SPRING 팀 플젝 : 네이버 아이디로 로그인 하기(네아로) (1) | 2023.01.07 |
댓글