Chapter05. CRUD 프로젝트 / URL에서 .html 없애기(1)

<< 학습 목표 >>

1. 웹 페이지가 .html 로 끝나지 않아야 하는 이유를 설명할 수 있다.

2. 주소창에 .html 없이 입력했을 때 서버가 어떤 순서로 페이지 또는 서블릿을 찾는지 설명할 수 있다.

3. 웹 페이지가 .html 로 끝나지 않게 처리할 수 있다.

---

이번 Chapter에서 쿠키와 세션을 배워 상태 정보를 저장할 수 있는 방법을 배웠음

남은 Chapter가 하나이기도 하지만 서블릿을 다 배웠다고 생각해도 됨

 

이번 Chapter의 마지막으로 우리가 앞서 개발했던 CRUD 프로젝트를 개선하자

1. URL의 마지막이 .html 로 끝나지 않도록 만들기

2. 비밀번호 암호화 하기

3. 쿠키를 적용해 아이디 기억하기

4. 세션을 적용해 로그인 상태 정보 활용하기

---

우선! 이번 Chapter에서 배웠던 쿠키와 세션은 잠깐 두고 URL에서 .html 을 없애자

우리가 만든 CRUD 프로젝트를 배포(Deploy / 사람들이 이용할 수 있게 오픈하는 것)했다고 상상해보자

사용자들은 우리가 오픈한 CRUD 서비스를 이용하기 위해 웹 페이지의 URL을 입력할 것

 

메인 페이지에 접속하기 위해서 http://localhost:8080/studyProject/member/index.html

 

사용자가 우리 서비스에 접속하기 위해서 입력하는 URL의 마지막에 보면 .html 이 있음

일반적인 서비스는 .html 처럼 마지막에 [ .~ ] 를 입력하지 않음

마지막에 .~ 를 입력하지 않게 하는 이유

1. 사용자 편의 : 사용자가 우리 서비스에 접속할 때 조금이라도 편하게 접속하도록 하기 위함

2. 보안상 이점 : 엄청나게는 아니지만 보안상의 이점도 약간 생김 [ .~ ] 로 끝나면 해커는 "아~ 이 서비스는 html 로 되어있으니까 html의 약점을 뚫고 들어가서 개인정보를 모조리 빼와야지" 라고 해커가 우리 서비스를 더 쉽게 해킹할 수 있도록 만듬 그러나 .~ 로 끝나지 않으면 이 서비스가 html 로 되어있는지 다른 무언가로 되어있는지 모르니 해커가 해킹을 하려면 더 고생을 해야함

 

네이버의 메인 페이지 URL을 보자

 

우리 서비스도 일반적인 서비스처럼, 네이버처럼 .html 을 빼고 접속할 수 있게 만들어보자

 

그 전에~!

서버를 실행시키고 브라우저 주소창에 지금 바로 http://localhost:8080/studyProject/member 만 입력해보자

 

혹시 눈치 채지 못한 분을 위해서 이번에는 주소창에 http://localhost:8080/studyProject/member/index.html 을 입력해보자

 

달라진게 없음

그렇다는건 http://localhost:8080/studyProject/member 와 http://localhost:8080/studyProject/member/index.html 모두 같은 페이지를 보여준다는것

 

여기서 드는 의문은?

우리가 별도의 처리를 하지 않았는데 어떻게 이렇게 되는거지?

 

우리가 URL에 http://localhost:8080/studyProject/member 이렇게 입력하면 서버는 우선 해당 URL에 맞는 서블릿이나 페이지가 있는지 찾음

그러나 해당 URL에 맞는 서블릿이나 페이지가 없다면 URL의 마지막에 /index.html 을 붙여서 해당 웹 페이지가 있는지 찾음

그러한 웹 페이지가 있다면 해당 웹 페이지를 보여주고 그러한 웹 페이지가 없다면 404 Not Found 웹 페이지를 보여줌

 

그래서 일반적으로 서비스의 메인 페이지의 이름은 index.html 로 지어줌

---

이번에는 메인 페이지를 제외 한 나머지 페이지에 .html 을 빼고 접속할 수 있게 만들어보자

 

메인 페이지에서 회원가입 버튼을 눌러 회원가입 페이지로 이동해보자

 

회원 가입 페이지의 마지막에 있는 .html 을 없애보자

아무것도 하지 않은 지금

URL에서 .html 을 없애면?

당연히 404 Not Found 페이지가 보임

 

왜일까? 이미 방금 설명했음

서버는 우선 http://localhost:8080/studyProject/member/join URL에 맞는 서블릿 또는 웹 페이지를 찾음

 

---

여기서 한가지 반드시 기억해야할 점은 요청과 요청 방식 임

클라이언트(사용자) 가 브라우저의 주소창에 URL을 입력하면 해당 URL로 GET 방식 요청이 들어감

---

 

해당 URL로 지정된 서블릿이 있지만 doPost 메서드만 구현했기 때문에 GET 방식 요청을 받을순 없음

 

결국 해당 URL로 지정된 서블릿이 없는것이라고 판단하고 이제 해당 URL에 맞는 웹 페이지를 찾음

member 폴더 안에 join.html 웹 페이지는 있지만 join 인 웹 페이지는 없음

마지막으로 서버는 http://localhost:8080/studyProject/member/join/index.html 을 찾아봄

당연히 member 폴더 안에 join 폴더가 없기 때문에 member 폴더 안에 join 폴더 안에 index.html 이라는 파일은 더더욱 당연히 없으니 404 Not Found 페이지가 보이는 것

 

이제 우리가 특별한 처리를 해 사용자가 http://localhost:8080/studyProject/member/join 으로 접근하면 member 폴더 안에 있는 join.html 웹 페이지가 보이도록 하자

특별한 처리라고 했지만 굉장히 간단함

 

해당 URL을 받을 수 있는 서블릿은 있지만 doGet 메서드를 구현하지 않아 GET 방식 요청을 받을 수 없는것이므로 해당 URL을 받을 수 있는 서블릿(member 패키지 -> MemberJoin 서블릿)에 doGet 메서드를 아래와 같이 추가하자

( 코드 전체를 첨부하면 불필요하게 너무 길어 doGet 메서드만 첨부했음 )

// ...

import javax.servlet.RequestDispatcher;

// ...

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
	RequestDispatcher rd = request.getRequestDispatcher("/member/join.html");
	rd.forward(request, response);
}

 

여러분이 지금까지 복습을 잘 했다면 설명이 필요 없는 아주 간단한 코드이고 바로 이해할 수 있을 것

설명을 듣기 전에 서버를 재시작 하고 다시 똑같은 URL인 http://localhost:8080/studyProject/member/join 으로 접근해보자

이제 회원가입 페이지가 나옴

 

설명을 해보면 이제 회원 가입 페이지로 접근할 수 있는 URL이 두 개가 된 것임

1. http://localhost:8080/studyProject/member/join.html

2. http://localhost:8080/studyProject/member/join

 

1번 URL로 접근하면 곧바로 member 폴더 안에 있는 join.html 이 보여지는 것임

---

---

 

2번 URL로 접근하면 우선 member 패키지 안에 있는 MemberServlet 으로 요청이 들어가고 MemberSerlvet의 doGet 메서드가 동작해 포워딩 방식으로 member 폴더 안에 있는 join.html 이 보여지는 것

---

---

 

이렇게 간단하게 우리 서비스도 네이버처럼 .html 로 끝나지 않게 바꿨음

바꾸는 이유는? 모르겠다면 다시 이 글의 처음부터 읽어보며 이유를 찾아보자

---

이제 남은 회원 가입 완료 페이지(joinSuccess.html), 로그인 페이지(login.html), 회원 정보 수정 페이지(update.html) 도 모두 .html 없이 접속할 수 있도록 수정하자

 

이 글을 읽는 여러분이 먼저 처리 해보시길
만약 어떻게 해야될 지 모르겠다면 다시 처음부터 천천히 읽어보면서 어떤 과정을 거쳐왔는지 봐야함

 

 

<< 회원 가입 완료 페이지 .html 없이 접속 >>

---

.html이 빠진 회원 가입 완료 페이지의 URL(http://localhost:8080/studyProject/member/joinSuccess) 을 받을 수 있게 서블릿 추가

 

 

---

 

member 패키지 -> MemberJoinSuccess 서블릿 추가 후 아래 코드 입력

package member;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/member/joinSuccess")
public class MemberJoinSuccess extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		RequestDispatcher rd = request.getRequestDispatcher("/member/joinSuccess.html");
		
		rd.forward(request, response);
	}

}

---

 

<< 로그인 페이지 .html 없이 접속 >>

---

1. .html이 빠진 로그인 페이지의 URL(http://localhost:8080/studyProject/member/login) 을 받을 수 있게 서블릿 추가

 

---

 

package member;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import utility.ParameterUtil;

@WebServlet("/member/login")
public class MemberLogin extends HttpServlet {
	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
		RequestDispatcher rd = req.getRequestDispatcher("/member/login.html");
		rd.forward(req, resp);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// 파라미터 검증
		String id = ParameterUtil.getString(request, "id");
		String pw = ParameterUtil.getString(request, "pw");
		
		if(!ParameterUtil.isId(id)) {
			response.setStatus(400);
			return ;
		} else if(!ParameterUtil.isPw(pw)) {
			response.setStatus(400);
			return ;
		}
		
		MemberDto member = new MemberDto(id, pw, null, null);
		
		MemberService service = new MemberService();
		boolean result = service.correctIdNPw(member);
		
		if(!result) {
			response.setStatus(400);
		}
	}

}

---

 

<< 회원 정보 수정 페이지 .html 없이 접속 >>

---

1. .html이 빠진 회원 정보 페이지의 URL(http://localhost:8080/studyProject/member/update) 을 받을 수 있게 서블릿 추가

 

---

 

package member;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/member/update")
public class MemberUpdate extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		RequestDispatcher rd = request.getRequestDispatcher("/member/update.html");
		
		rd.forward(request, response);
	}

}

---

 

페이지별 .html 없이 접속할 수 있도록 처리 했으니 메인 페이지(member 폴더 -> index.html)로 가서 각 페이지로 이동하기 위한 URL에서 .html 을 빼자

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>연습 프로젝트</title>
	<link rel="stylesheet" type="text/css" href="/studyProject/css/public/common.css">
	<link rel="stylesheet" type="text/css" href="/studyProject/css/index.css">
</head>
<body>
	<header>&#60;&#60; 메인 &#62;&#62;</header>
	<main>
		<ul>
			<li><a href="/studyProject/member/join">회원가입</a></li>
			<li><a href="/studyProject/member/login">로그인</a></li>
			<li><a href="/studyProject/member/update">회원 정보 수정</a></li>
			<li><a href="#">회원 탈퇴</a></li>
		</ul>
	</main>
</body>
</html>

 

이외에도 우리가 만든 CRUD 프로젝트에는 각 상황에 맞는 페이지로 이동하기 위해 페이지의 URL을 입력한 곳이 있음

하나도 빠뜨리지 말고 웹 페이지 URL이 있는 곳에 .html 을 빼자

( 굉장히 중요한 작업임 )

---

1. 회원 가입 페이지(member 폴더 -> join.html)

 

2. 회원 가입 완료 페이지(member 폴더 -> joinSuccess.html)

 

3. 로그인 페이지(member폴더 -> login.html)

---

---

지금까지 메인 페이지, 회원 가입 페이지, 회원 가입 완료 페이지, 로그인 페이지, 회원 정보 수정 페이지로 접근할 때 .html 없이 접근할 수 있도록 했음

 

여기서 페이지별 URL을 정리하자

( 만약 "URL이 왜 두 개지?" 싶다면 다시 이 글의 처음부터 읽고 와야함 )

페이지 명	URL
메인 페이지	1. http://localhost:8080/studyProject/member 2. http://localhost:8080/studyProject/member/index.html
회원 가입 페이지	1. http://localhost:8080/studyProject/member/join 2. http://localhost:8080/studyProject/member/join.html
회원 가입 완료 페이지	1. http://localhost:8080/studyProject/member/joinSuccess 2. http://localhost:8080/studyProject/member/joinSuccess.html
로그인 페이지	1. http://localhost:8080/studyProject/member/login 2. http://localhost:8080/studyProject/member/login.html
회원 정보 수정 페이지	1. http://localhost:8080/studyProject/member/update 2. http://localhost:8080/studyProject/member/update.html