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

<< 학습 목표 >>

1. WEB-INF 폴더의 역할을 설명할 수 있다.

2. WEB-INF 폴더에 웹 페이지를 두는 이유를 설명할 수 있다.

---

앞서 우리는 클라이언트(사용자)가 .html 로 끝나지 않는 요청을 보냈을 때 서버가 어떤 과정으로 요청을 처리할 페이지 또는 서블릿을 찾는지 설명했음

 

메인 페이지(member 폴더 -> index.html)에 접속하기 위해서 사용자가 http://localhost:8080/studyProject/member 로 접속했다면?

서버는 해당 URL에 맞는 서블릿이나 페이지가 있는지 찾음

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

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

 

서버가 해당 URL에 맞는 서블릿이나 페이지가 없을 때 URL의 마지막에 /index.html 을 붙이는 이유가 있음

프로젝트 -> src -> webapp -> WEB-INF -> web.xml 로 들어가보자

 

web.xml은 우리가 서블릿을 처음 배울 때 서블릿을 직접 생성한 후 서블릿을 프로젝트에 등록하고 서블릿이 요청을 받을 수 있게 URL을 지정했던 파일임

 

이 파일 내 webcom-file-list 태그를 보자

 

이 태그 내 가장 위에 있는 welcom-file 태그를 보면 index.html 이라고 되어있음

그래서 서버가 해당 URL에 맞는 서블릿이나 페이지가 없을 때 URL의 마지막에 /index.html 을 붙이는 것

만약 가장 위에 있는 welcom-file 태그를 지우면 서버는 해당 URL에 맞는 서블릿이나 페이지가 없을 때 URL의 마지막에 /index.jsp 를 붙임

 

welcom-file-list 태그 자체가 없으면 어떻게 될까?

그래도 서버는 여전히 위 이미지에 나와있는 welcom-file 태그의 순서대로 URL의 마지막에 하나씩 붙여가며 웹 페이지를 찾음

 

index.html 파일에 대해서 더 깊게 들어가면 복잡해지니 index.html 은 여기까지만 보자

---

우리가 지금까지 페이지에 .html 없이 접속하도록 처리를 해 이제 웹 페이지의 URL이 2개가 됐음

페이지 명	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

 

항상 이원화는 좋지 못함

페이지 URL을 단일화 시켜보자

 

단일화 시키는 방법은 굉장히 간단함

1. member 폴더를 WEB-INF 폴더로 이동 시킴

2. 웹 페이지로 포워딩 시켜주는 서블릿의 경로를 WEB-INF 안에 있는 member 폴더로 바꿈

 

<< member 폴더를 WEB-INF 폴더로 이동 시킴 >>
아래와 같이 member 폴더를 WEB-INF 폴더 안으로 이동시키자

위 이미지는 여러분들에게 보여주기 위해 member 폴더를 복사/붙여넣기 한 것임

여러분은 member 폴더를 드래그 & 드롭해 WEB-INF 로 이동 시켜야함

 

member 폴더를 WEB-INF 폴더로 이동 시킨 이유는 뭘까?

WEB-INF 안에 web.xml 파일이 들어있는 것처럼 이 폴더 안에는 웹 프로젝트, 서버와 관련된 굉장히 중요한 설정 파일들이 들어있는 곳임

그래서 서버는 기본적으로 클라이언트가 WEB-INF 로 요청을 보낼 수 없게 막아 뒀음

이를 활용해서 우리의 웹 페이지를 WEB-INF 폴더 안으로 이동 시키면 메인 페이지부터 회원 정보 수정 페이지까지 더 이상 사용자들은 직접 접근할 수 없음

이를 통해 웹 페이지의 URL을 단일화 시킨 것

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

 

이제 뭘 해야할까?

사용자가 각 페이지의 URL로 접근했을 때 이제 WEB-INF 폴더 안에 있는 각 페이지로 포워딩 되도록 서블릿의 포워딩 경로를 수정해야함

 

<< 웹 페이지로 포워딩 시켜주는 서블릿의 경로를 WEB-INF 안에 있는 member 폴더로 바꿈 >>

일단, 메인 페이지는 제외하고 회원 가입 서블릿 ~ 회원 정보 수정 서블릿까지 포워딩 경로를 수정하자

 

<< 회원 가입 서블릿 포워딩 경로 수정 >>

---

---

 

<< 회원 가입 완료 서블릿 포워딩 경로 수정 >>

---

---

 

<< 로그인 서블릿 포워딩 경로 수정 >>

---

---

 

<< 회원 정보 수정 서블릿 포워딩 경로 수정 >>

---

---

---

이제 마지막으로 메인 페이지(WEB-INF -> member -> index.html)로 접근할 수 있게 서블릿을 추가하자

member 패키지 -> MemberMain 서블릿을 추가하고 아래 코드를 입력하자

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")
public class MemberMain extends HttpServlet {
	
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		RequestDispatcher rd = request.getRequestDispatcher("/WEB-INF/member/index.html");
		rd.forward(request, response);
	}

}

 

이제 서버를 실행 시키고 메인 페이지부터 회원 가입 수정 페이지까지 차례대로 접근도 해보자