📝 공통 코드(header, footer) 중복 제거
💡 Eclipse
🔎 EncodingFilter.java
.
.
.
// 필터 역할을 수행하는 메소드
public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
// ServletRequest == HttpServletRequest의 부모 타입
// ServletResponse == HttpSErvletResponse의 부모 타입
// -> 필요 시 다운캐스팅
// 모든 요청의 문자 인코딩을 UTF-8로 설정
request.setCharacterEncoding("UTF-8");
// 모든 응답의 문자 인코딩을 UTF-8로 설정
response.setCharacterEncoding("UTF-8");
// application scope로 최상위 경로를 얻어올 수 있는 값 세팅
// application 내장 객체 얻어오기
ServletContext application = request.getServletContext();
// 최상위 주소 얻어오기
String contextPath = ( (HttpServletRequest)request ).getContextPath();
// 다운캐스팅
// 세팅
application.setAttribute("contextPath", contextPath);
// 연결된 다음 필터 수행(없으면 Servlet 수행)
chain.doFilter(request, response);
}
}
🔎 header.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<header>
<!-- 클릭 시 메인페이지로 이동하는 로고 -->
<section>
<a href="${contextPath}">
<!-- header를 별도의 jsp로 분리한 경우
상대 경로로 작성된 이미지의 경로가 일치하지 않게 됨
* 지금처럼 분리시켜 둔 jsp에 경로를 지정하는 경우
상대 경로는 문제가 발생할 가능성이 높음
-> 절대 경로 사용이 바람직함
-->
<%--
/community
<%= request.getContextPath() %>
${pageContext.servletContext.contextPath}
위에 작성된 내용은 모두 같은 결과이지만 하자가 조금씩 있음
-> 모든 주소 요청 시 동작하는 EncodingFilter에서
application scope에 최상위 주소를 간단히 부를 수 있는 형태로 저장
--%>
<img src="${contextPath}/resources/images/logo.jpg" id="home-logo">
</a>
</section>
<!-- header의 두번째 자식 div -->
<section>
<article class="search-area">
<!-- form 내부 input 태그 값을 서버 또는 페이지로 전달 -->
<form action="#" name="search form">
<!-- fieldset : form 내부에서 input을 종류별로 묶는 용도로 많이 사용 -->
<fieldset>
<input type="search" id="query" name="query"
placeholder="검색어를 입력해주세요" autocomplete="off">
<!-- 검색 버튼 -->
<button type="submit" id="search-btn" class="fa-solid fa-magnifying-glass"></button>
</fieldset>
</form>
</article>
</section>
<section></section>
</header>
<nav>
<ul>
<li><a href=#>공지사항</a></li>
<li><a href=#>자유 게시판</a></li>
<li><a href=#>질문 게시판</a></li>
<li><a href=#>FAQ</a></li>
<li><a href=#>1:1문의</a></li>
</ul>
</nav>🔎 footer.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!-- JSTL은 사용되는 JSP 파일마다 작성되어야 한다. -->
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<footer>
<p>Copyright © KH Information Educational Institute M-Class</p>
<article>
<a href="#">프로젝트 소개</a>
<span>|</span>
<a href="#">이용약관</a>
<span>|</span>
<a href="#">개인정보처리방침</a>
<span>|</span>
<a href="#">고객센터</a>
</article>
</footer>
<%-- session에 message 속성이 존재하는 경우 alert창으로 해당 내용을 출력 --%>
<c:if test="${ !empty sessionScope.message }">
<script>
alert("${message}");
// EL 작성 시 scope를 지정하지 않으면
// page -> request -> session -> application 순서로 검색하여
// 일치하는 속성이 있으면 출력
</script>
<%-- message 1회 출력 후 session에서 제거 --%>
<c:remove var="message" scope="session"/>
</c:if>🔎 signUp.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KH 커뮤니티</title>
<link rel="stylesheet" href="../resources/css/main-style.css">
<link rel="stylesheet" href="../resources/css/signUp-style.css">
<script src="https://kit.fontawesome.com/4dca1921b4.js" crossorigin="anonymous"></script>
</head>
<body>
<main>
<!-- header include -->
<jsp:include page="/WEB-INF/views/common/header.jsp"/>
<!-- 회원가입 -->
<section class="signUp-content">
<!-- 회원가입 화면 전환 주소(GET)와 같은 주소로
실제 회원가입을 요청(POST)
-> 요청 주소가 같아도 데이터 전달 방식이 다르면 중복 허용
-->
<!-- 절대경로 : /community/member/signUp
현재주소 : /community/member/signUp
상대경로 : signUp
-->
<form action="signUp" method="post" name="signUp-form">
<label for="memberEmail">
<span class="required">*</span> 아이디(이메일)
</label>
<div class="signUp-input-area">
<input type="text" id="memberEmail" name="memberEmail"
placeholder="아이디(이메일)" maxlength="30"
autocomplete="off" required>
<!-- autocomplete="off" : 자동 완성 미사용 -->
<!-- required : 필수 작성 input 태그 -->
<button type="button">인증번호 받기</button>
</div>
<span class="signUp-message">메일을 받을 수 있는 이메일을 입력해 주세요.</span>
<label for="emailCheck">
<span class="required">*</span> 인증번호
</label>
<div class="signUp-input-area">
<input type="text" id="emailCheck"
placeholder="인증번호 입력" maxlength="6"
autocomplete="off">
<button type="button">인증하기</button>
</div>
<span class="signUp-message confirm">인증되었습니다.</span>
<label for="memberPw">
<span class="required">*</span> 비밀번호
</label>
<div class="signUp-input-area">
<input type="password" id="memberPw" name="memberPw"
placeholder="비밀번호" maxlength="30">
</div>
<div class="signUp-input-area">
<input type="password" id="memberPwConfirm"
placeholder="비밀번호 확인" maxlength="30">
</div>
<span class="signUp-message error">비밀번호가 일치하지 않습니다.</span>
<label for="memberNickname">
<span class="required">*</span> 닉네임
</label>
<div class="signUp-input-area">
<input type="text" id="memberNickname" name="memberNickname"
placeholder="닉네임" maxlength="10">
</div>
<span class="signUp-message confirm">사용 가능한 닉네임입니다.</span>
<label for="memberTel">
<span class="required">*</span> 전화번호
</label>
<div class="signUp-input-area">
<input type="text" id="memberTel" name="memberTel"
placeholder="(- 없이 숫자만 입력)" maxlength="11">
</div>
<span class="signUp-message error">전화번호 형식이 올바르지 않습니다.</span>
<label for="memberAddress">
주소
</label>
<div class="signUp-input-area">
<input type="text" id="memberAddress" name="memberAddress"
placeholder="우편번호" maxlength="6">
<button type="button">검색</button>
</div>
<div class="signUp-input-area">
<input type="text" name="memberAddress" placeholder="도로명주소">
</div>
<div class="signUp-input-area">
<input type="text" name="memberAddress" placeholder="상세주소">
</div>
<button type="submit" id="signUp-btn">가입하기</button>
</form>
</section>
</main>
<!-- footer include -->
<jsp:include page="/WEB-INF/views/common/footer.jsp"/>
</body>
</html>
풀스택 개발자 기록집 📁