Chapter05. CRUD 프로젝트 / URL에서 포트 번호 없애기

<< 학습 목표 >>

1. 내가 만든 서비스의 URL에 포트 번호를 생략할 수 있다.

2. 내가 만든 서비스의 URL에 프로젝트 명을 바꿀 수 있다.

---

다시 한번 네이버의 URL을 보자

네이버의 URL과 우리가 만든 서비스의 URL이 다른 점이 있음

네이버의 URL

https://www.naver.com

우리가 만든 서비스의 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

 

1. 네이버의 URL은 https 로 시작하지만 우리의 URL은 http 로 시작함

2. 네이버는 www가 붙어있지만 우리는 www가 붙어있지 않음

3. 네이버는 com이 붙어있지만 우리는 com이 붙어있지 않음

4. 우리는 8080이 붙어있음

5. 우리는 서버 IP 주소 다음에 studyProject 가 붙어있음

 

등 여러 가지 차이가 있음

 

여기서 1번은 우리가 해결할 수 없는 차이임

https 는 http 보다 보안이 강화된 프로토콜로 https 프로토콜을 사용하는 프로젝트가 되려면 돈을 내고 보안 관련 설정을 해야함

네이버, 쿠팡 같은 서비스는 사람들이 사용할 서비스이므로 반드시 돈을 내고 https 프로토콜을 사용해야하지만 우리는 공부를 위해서 만든 프로젝트이므로 굳이 돈을 내고 https 프로토콜을 사용할 필요는 없음

혹시 "나는 네이버, 쿠팡처럼 실제와 가까운 서비스를 꼭 만들고 싶다" 하시는 분은 네트워크 과목을 공부하고 SSL/TLS 인증서 관련된 내용을 인터넷에서 찾아보자

 

2, 3번도 우리가 해결할 수 없는 차이임

예전 글에서 언급했듯 네이버가 숫자로 된 서버 아이피 주소 대신 www.naver.com 을 사용할 수 있는 이유는 이름이 www.naver.com 인 도메인을 구매했기 때문임

도메인 역시 돈을 주고 구매해야하기 때문에 우리는 굳이 돈을 내고 도메인을 구매할 필요는 없음

 

드디어 우리가 해결할 수 있는 차이인 4, 5번!

4, 5번은 우리가 돈을 내지 않아도 어렵지 않게 차이를 없앨 수 있음

---

4. 우리는 8080이 붙어있음

이는 잘 알고 있듯 포트 번호로 서버 IP 주소 다음 포트 번호를 써야함

포트 번호를 생략할 수 있음

포트 번호를 생략하면 프로토콜에 맞는 기본 포트 번호가 기입됨

http 프로토콜은 80번 포트가 기본 포트 번호임

https 프로토콜은 443번 포트가 기본 포트 번호임

왜 그럴까? 라는 생각이 드는분은 https://johngrib.github.io/wiki/why-http-80-https-443/ 이 블로그 글을 보시길

따라서 우리 웹 서버의 포트 번호를 80번으로 바꾸면 사용자들이 접속할 때 포트 번호를 입력하지 않아도됨

서버의 포트 번호를 바꿔보자

 

이클립스 -> [ Servers ](1) -> 서버 더블클릭(2) -> Overview 화면 내 HTTP/1.1의 PortNumber 를 80 으로 변경(3) -> 저장(Ctrl + S)

 

이제 서버를 실행시키자

혹시 서버가 실행되지 않으면서 [ ~ Already ~ ] 메세지가 보인다면 여러분의 컴퓨터에 어떤 프로그램이 이미 80번 포트를 사용하고 있다는 것

해당 프로그램이 어떤 프로그램인지 안다면 그 프로그램을 끄면 됨

만약 모른다면 컴퓨터를 재부팅 해보자

그래도 안되면 아쉽지만 80번 포트 말고 다시 변경하기 전 포트 번호를 사용하자

 

서버의 포트 번호가 80번으로 바꼈으니 80번 포트 번호를 기입해 접속해보자

 

난 분명히 포트 번호를 기입하고 접속했는데 사라진걸 볼 수 있음

포트 번호가 사라진게 아닌 생략된것임

http의 기본 포트 번호가 80번이므로 브라우저가 포트 번호를 생략한 것

 

이렇게 이제 우리도 네이버처럼 포트 번호 없이 접속할 수 있는 서비스가 되었음

우리가 만든 서비스의 URL
메인 페이지	http://localhost/studyProject/member
회원 가입 페이지	http://localhost/studyProject/member/join
회원 가입 완료 페이지	http://localhost/studyProject/member/joinSuccess
로그인 페이지	http://localhost/studyProject/member/login
회원 정보 수정 페이지	http://localhost/studyProject/member/update

---

5. 우리는 서버 IP 주소 다음에 studyProject 가 붙어있음

이는 프로젝트명으로 사용자의 요청을 받을 프로젝트 명임

프로젝트를 서버에 올리면 서버는 기본적으로 프로젝트명을 그대로 사용함

그러나 서버에 올라가는 프로젝트명을 바꿀 수 있음

 

서버에 올라가는 프로젝트 명을 바꿀 때는 이클립스 -> [ Servers 탭 ](1) -> 서버 더블클릭(2) -> Modules(3) -> 프로젝트 클릭(4) -> [ Edit ](5)

 

이렇게 서버에 올라가는 프로젝트 명을 바꿀 수 있음

여기서 Path 부분에 프로젝트명을 sp로 바꿔보자

sp로 변경(1) -> [ OK ](2) -> 저장(Ctrl + S)

 

그리고 서버를 재시작한 다음 메인 페이지에 접속해보자

서버에 올라간 프로젝트 명을 바꿨으니 메인 페이지에 접속할 때 프로젝트 명도 바꿔야함

 

이러한 방법을 활용해서 프로젝트 명을 완전히 지워버리면 우리 서비스에 접속할 때 프로젝트 명을 생략할 수 있음

다시 프로젝트 명을 바꾸자

완전히 지우는대 맨 앞에 있는 / 는 반드시 남겨둬야함

 

이제 서버를 재시작하고 다시 메인 페이지에 접속해보자

서버에 올라간 프로젝트 명을 바꿨으니 메인 페이지에 접속할 때 프로젝트 명도 바꿔야함

 

이로써 우리가 만든 서비스의 URL도 네이버 서비스의 URL과 제법 비슷해졌음

우리가 만든 서비스의 URL
메인 페이지	http://localhost/member
회원 가입 페이지	http://localhost/member/join
회원 가입 완료 페이지	http://localhost/member/joinSuccess
로그인 페이지	http://localhost/member/login
회원 정보 수정 페이지	http://localhost/member/update

---

서버를 재시작 하고 메인 페이지에 접속했을 때는 잘 보임

그러나 메인 페이지에서 각 버튼들을 누르면 404 NotFound 페이지가 보임

 

간단히 해결할 수 있는 문제이지만 여기서 많은 분들이 당황해서 "왜 이렇지?" 생각하며 머리가 백지가 됨

우리가 메인 페이지에서 각 버튼을 눌러 이동하는 URL에 프로젝트 명이 들어갔기 때문임

따라서 우리 프로젝트 내 모든 URL에서 프로젝트 명을 빼야함

 

하나씩 찾아서 프로젝트 명을 빼자

간단하고 단순한 작업이기 때문에 따로 코드를 첨부하진 않음

 

! 여기서 한가지 팁 !

<< 내가 원하는 키워드를 갖고 있는 파일을 쉽게 찾는 방법 >>

이클립스 내 [ Search 메뉴 ](1) -> [ Search 기능 ](2) -> 찾고자 하는 키워드 입력(3) -> 검색(4)

 

가령 현재 우리가 찾고자 하는 키워드는 /studyProject 이므로 아래와 같이 검색어를 입력하고 검색을 하면 이클립스 하단에 [ Search ] 패널이 생기면서 검색 결과가 보임

 

[ Search 패널 ] 내 보이는 파일에 들어가서 바꿔주면 됨