💡URL(URI)
- http://localhost:8090/client/html/ex12_url.html
- https://www.naver.com/
- https://www.google.co.kr/?hl=ko
- Uniform Resource Identifier
- Uniform Resource Locator
URL(URI)는 웹 상의 자원(페이지, 이미지, 영상, 프로그램 등)을 구분하기 위한 고유 주소값이다.
URL과 URI의 관계
URI가 정의하는 게 더 크고, 그 안에 부분집합으로 존재하던 게 URL로, URI가 상위 개념이다.
하지만 URL을 제외한 URI의 기능이 거의 쓸모가 없어졌기 때문에 현재는 URL과 URI를 거의 동급으로 취급한다.
1. 프로토콜
- http://
- https://
프로토콜(Hyper Text Transfer Protocol)은 웹 페이지를 주고받는 통신 방식이다.
우리는 현재 http를 사용하고 있다. 아파치 톰캣에서 인증서와 도메인을 발급받으면 https를 사용할 수 있지만, 그냥 로컬 호스트로는 https를 사용할 수 없다.
프로토콜은 웹 서버와 클라이언트 간의 데이터를 주고받기 위한 약속으로 생각하면 된다.
2. 도메인
- localhost
- www.naver.com
- www.google.com
네이버 웹서버를 예로 들면 LAN카드에 192.18.10.111이라는 IP주소와 naver.com이라는 도메인이 부여된다.
그런데 이를 그냥 네이버 웹서버에 저장하는 게 아니라 DNS(Domain Name Service)에서 IP주소와 도메인을 저장한다.
그리고 도메인과 IP주소가 동일한 거라는 정보를 DNS에 저장하면 우리가 컴퓨터로 www.naver.com을 찾아갔을 때 바로 네이버로 가는 게 아니라 DNS에 들렀다가 네이버 웹서버에 가게 된다.
도메인은 IP 주소의 별명이라고 생각하면 된다.
3. 웹 서버 포트번호
- :8090
- :80
- :443
웹 서버 포트번호는 웹 서버(아파치 톰캣)를 찾기 위해서 사용한다.
- https://www.naver.com:443/
- https://www.google.com:443/
네이버와 구글에도 보이지는 않지만 포트번호 443번이 있다.
IP 주소는 상대방 컴퓨터와 통신하는 게 아니라 상대방 컴퓨터의 프로그램과 통신을 해야 한다. 그래서 IP 주소로 컴퓨터까지는 찾아갈 수 있는데, 어떤 프로그램과 통신해야 하는지 구분하기 위해서는 포트번호를 사용하게 된다.
포트번호는 하나의 프로그램이 독점해서 사용하므로 프로그램 간의 식별자 역할을 하는 게 가능하다.
결론적으로 IP 주소 + 웹 서버 포트번호가 있어야 정확하게 연결을 할 수 있다.
80번과 443번은 사람들이 웹 서버로 사용하기로 약속해 놓은 것이기 때문에 생략이 가능하다. 따라서 도메인 뒤에는 80번 혹은 443번이 생략되어 있다고 보면 된다.
4. Context Root와 실제 자원의 경로
- /client/html/ex12_url.html
client는 Context Root(=webapp 폴더)이다.
/html/ex12_url.html는 실제 자원의 경로이다.
💡URL 표현 방법
1. 상대 경로
상대 경로는 주소의 시작을 '.'으로 한다.
'.'의 의미는 현재 페이지가 존재하는 폴더의 경로이다.
<h1>페이지 이동하기</h1>
<h2>상대 경로</h2>
<a href="./ex11_link.html">이동하기</a><br>
<a href="ex11_link.html">이동하기</a><br>
'/.'을 생략하여 URL을 작성할 수 있다.
경로
- 파일 경로: C:\test\aaa\test.txt
- 웹 경로: http://test.com/aaa/test.html
파일 경로는 구분자로 '\'를 사용하지만, 웹 경로는 '/'를 사용한다.
2. 절대 경로
절대 경로는 주소의 시작을 '/'으로 한다.
'/'의 의미는 현재 프로젝트의 웹 루트 폴더이다.
이때 '/client'가 반드시 들어가야 한다. '/client'는 webapp 폴더를 의미한다.
<h1>페이지 이동하기</h1>
<h2>절대 경로</h2>
<a href="/client/html/ex11_link.html">이동하기</a><br>
3. 로컬 경로
로컬 경로는 드라이브명으로 시작하는 경로이다.
로컬 경로는 브라우저에서 모두 막아 놓았기 때문에 사용이 불가능해졌다.
모양은 만들어지긴 하나, 이동하기를 눌러도 이동이 되지 않는다.
<h1>페이지 이동하기</h1>
<h2>로컬 경로</h2>
<a href="C:\Class\code\client\ClientTest\src\main\webapp\html\ex11_link.html">이동하기</a><br>
4. 외부 경로
외부 경로는 프로토콜 이름(http://, https://)으로 시작한다.
다른 사이트의 자원을 참조할 때 사용한다.
<h1>페이지 이동하기</h1>
<h2>외부 경로</h2>
<a href="https://isaac-christian.tistory.com/">이동하기</a><br>
웹은 인터넷에 공개만 되어 있다면 이처럼 남의 것도 내 것처럼 사용할 수 있다.
📌페이지 이동하기
위와 같이 폴더와 파일이 있다고 할 때, 상대 경로와 절대 경로를 구분하여 만들어보도록 하자.
<h1>페이지 이동하기</h1>
<h2>상대 경로 버전</h2>
<ul>
<li><a href="./ex12_url.html">12번 예제</a></li>
<li><a href="./member/member.html">member.html</a></li>
<li><a href="./admin/admin.html">admin.html</a></li>
<li><a href="./member/auth/auth.html">auth.html</a></li>
</ul>
<h2>절대 경로 버전</h2>
<ul>
<li><a href="/client/html/ex12_url.html">12번 예제</a></li>
<li><a href="/client/html/member/member.html">member.html</a></li>
<li><a href="/client/html/admin/admin.html">admin.html</a></li>
<li><a href="/client/html/member/auth/auth.html">auth.html</a></li>
</ul>
상대 경로나 절대 경로나 자기 자신이라고 할지라도 본인 타입의 이름을 적어 주어야 구분할 수 있다.
member.html 수정
<h1>member</h1>
<h2>상대 경로 버전</h2>
<ul>
<li><a href="./ex12_url.html">12번 예제</a></li>
<li><a href="./member/member.html">member.html</a></li>
<li><a href="./admin/admin.html">admin.html</a></li>
<li><a href="./member/auth/auth.html">auth.html</a></li>
</ul>
<h2>절대 경로 버전</h2>
<ul>
<li><a href="/client/html/ex12_url.html">12번 예제</a></li>
<li><a href="/client/html/member/member.html">member.html</a></li>
<li><a href="/client/html/admin/admin.html">admin.html</a></li>
<li><a href="/client/html/member/auth/auth.html">auth.html</a></li>
</ul>
위의 html 코드를 하위 폴더의 member.html에 그대로 옮겨보았다.
그러자 상대 경로 버전은 실행이 안 되고, 절대 경로 버전에서만 실행이 된다.
상대 경로 버전은 해당 파일을 기준으로 만들어지기 때문에 위치를 바꾸면 쓸모없게 된다.
<h1>member</h1>
<h2>상대 경로 버전</h2>
<ul>
<li><a href="./../ex12_url.html">12번 예제</a></li>
<li><a href="./member.html">member.html</a></li>
<li><a href="./../admin/admin.html">admin.html</a></li>
<li><a href="./auth/auth.html">auth.html</a></li>
</ul>
<h2>절대 경로 버전</h2>
<ul>
<li><a href="/client/html/ex12_url.html">12번 예제</a></li>
<li><a href="/client/html/member/member.html">member.html</a></li>
<li><a href="/client/html/admin/admin.html">admin.html</a></li>
<li><a href="/client/html/member/auth/auth.html">auth.html</a></li>
</ul>'나'는 '.'이고, 하나 올라가라는 의미는 '..'이다.
그래서 하나 올라가라는 의미로 '..'를 작성하고 상대 경로에 맞게 수정하면 정상적으로 작동한다.
admin.html 수정
<h1>admin</h1>
<h2>상대 경로 버전</h2>
<ul>
<li><a href="./../ex12_url.html">12번 예제</a></li>
<li><a href="./../member/member.html">member.html</a></li>
<li><a href="./admin.html">admin.html</a></li>
<li><a href="./../member/auth/auth.html">auth.html</a></li>
</ul>
<h2>절대 경로 버전</h2>
<ul>
<li><a href="/client/html/ex12_url.html">12번 예제</a></li>
<li><a href="/client/html/member/member.html">member.html</a></li>
<li><a href="/client/html/admin/admin.html">admin.html</a></li>
<li><a href="/client/html/member/auth/auth.html">auth.html</a></li>
</ul>
auth.html 수정
<h1>auth</h1>
<h2>상대 경로 버전</h2>
<ul>
<li><a href="./../../ex12_url.html">12번 예제</a></li>
<li><a href="./../member.html">member.html</a></li>
<li><a href="./../../admin/admin.html">admin.html</a></li>
<li><a href="./auth.html">auth.html</a></li>
</ul>
<h2>절대 경로 버전</h2>
<ul>
<li><a href="/client/html/ex12_url.html">12번 예제</a></li>
<li><a href="/client/html/member/member.html">member.html</a></li>
<li><a href="/client/html/admin/admin.html">admin.html</a></li>
<li><a href="/client/html/member/auth/auth.html">auth.html</a></li>
</ul>auth에서 admin으로 가려면 부모 폴더의 부모 폴더를 찾아서 두 번 올라가야 하기 때문에 '../'을 두 번 써 주었다.
상대 경로는 절대 경로보다 짧다는 장점이 있지만, 경로가 바뀔 때마다 수정해 줘야 한다는 단점이 있다.
프로젝트를 할 때에는 수정이 잦기 때문에 절대 경로를 사용하는 것이 편하다.
