웹 개발을 위한 HTML 가이드 번외 2편 - 웹과 컴퓨터의 경로(주소)

개요

벌써 10월입니다. 나는 아무것도 안했는데! 정말 부지런하게 살아야겠다는 생각이 팍 들었습니다. 아무튼간에 이번 글은 웹 개발을 위한 HTML 가이드 번외 2편입니다.

저번 글에서 우리는 하이퍼 링크를 구현해주는 태그인 링크 태그 즉 a태그에 대해서 알아봤습니다. 이번 글은 링크 태그와 같은 파일의 경로를 필요로 하는 다른 태그나 훗날 다루게 될 다양한 것들을 대비해서 컴퓨터와 웹의 경로에 대해서 간단하게 짚고 넘어가려고 합니다. 이번 글에서는 로컬 주소와 웹 주소의 차이점을 알아보고 절대경로와 상대경로에 대해서 알아봅니다.

디렉토리

웹이나 컴퓨터에서는 특정한 주소를 디렉토리라고 부릅니다. 주소, 경로, 패스 다 같은 말이죠. 웹에서 페이지들이 사용하는 주소와 컴퓨터에서 폴더와 파일이 사용하는 주소는 다르지만 유사합니다. 웹의 페이지들도 결국에는 어떤 컴퓨터의 폴더에 존재하는 파일들이기에 아주 큰 차이는 없지만 그래도 알아보도록 합시다.

로컬 디렉토리

로컬 주소는 윈도우의 경우 드라이브부터 접근을 하죠. C 드라이브나 D 드라이브 같은 것들 말입니다. 컴퓨터 상에서의 경로로써 표기할 때에는 C:₩로 표기를 합니다. 그리고 이 의미는 C 드라이브의 내부를 가리킵니다. 맥이나 리눅스 같은 유닉스 계열의 OS의 경우에는 / 로 시작을 합니다. 루트 디렉토리죠.

가령 파일의 위치는 드라이브나 루트 디렉토리를 시작으로 내부 폴더들을 표기하고 폴더 내로 들어가면 /나 (₩)로 구분을 하고 가장 마지막에 파일을 표기합니다.

F:\니힐 폴더\아이유 델루나2.png
/home/nihilncunia/web-coding/Blog/nihilog/code/package.json

이런식으로 말이죠.

웹 디렉토리

웹 디렉토리의 경우엔 드라이브로 시작하지 않습니다. http 혹은 https라는 프로토콜로 시작합니다. 웹 페이지들은 서버상에서 http 혹은 https 프로토콜로 통신을 하기 때문입니다. 근데 지금은 이 원리 자체는 중요하지 않고 웹 주소는 https://로 시작을 합니다. 과거에는 https://로 시작하는 주소가 많았는데 요즘은 인증된 페이지가 많아서 https://로 시작하는 주소가 더 많습니다.

프로토콜의 다음에는 아이피 주소가 옵니다. 아이피는 0.0.0.0과 같은 구조의 숫자들이고 이는 컴퓨터가 가진 일종의 주민등록번호 같은 것이라고 이야기 했던 적이 있습니다. 아이피의 다음에는 포트가 옵니다. 0.0.0.0:8080 8080이 바로 포트에 해당하는 숫자죠.

http://0.0.0.0:8080 이게 세트입니다. 웹 주소는 이렇게 시작을 합니다. 하지만 이렇게 보면 되게 지저분해보이고 어렵죠. 외우기가 어려울 겁니다. 그래서 사람들은 도메인이라는 것을 만들어냈습니다. 도메인을 통해서 아이피를 대신하게 하고 아이피로 접근한 것과 같은 효과를 낼 수 있게 만들었죠. 그게 오늘날의 웹 사이트들의 주소입니다. naver.com이나 google.com 같은 것들이 도메인입니다.

네이버에 들어가서 주소를 복사하면 https://www.naver.com/ 이렇게 나옵니다. 원래는 저 자리에 아이피가 들어가는 것이죠. 아무튼 주소의 끝에 슬래시가 있습니다. 이는 루트 디렉토리를 의미합니다. 웹 사이트마다 루트 디렉토리가 있습니다.

/는 뒤에 index.html이 생략되어 있습니다. 이 부분은 예전에 다룬 적이 있습니다. 그렇다면 루트 디렉토리는 웹 사이트의 홈 페이지를 의미하겠죠. 루트 디렉토리 내에 다른 폴더에 접근하면 https://주소/폴더/파일 혹은 https://주소/폴더 와 같은 모양이 됩니다.

로컬 디렉토리나 웹 디렉토리나 폴더로 접근할 때 슬래시 혹은 역슬래시를 사용하는 건 마찬가지인 것이죠.

웹에 존재하는 웹 사이트들은 호스트 컴퓨터가 공유하고 있는 폴더 내부에 존재하는 파일들로 구성이 되어있습니다. 어떠한 프로젝트를 개발하고 이를 배포하기 위해서는 서버 상에 존재하게끔 만들어야 하기 때문입니다. 다양한 방법으로 서버를 구축하고 실행하고 배포를 하게 되면 그때 여러분의 컴퓨터는 호스트 컴퓨터가 되는겁니다.

F:\nihil\project1

http://0.0.0.0:7556/

첫번째와 같은 디렉토리를 서버를 통해 7556 포트로 공유를 하게 되면 두번째와 같은 주소가 됩니다. 포트는 자유입니다. 7556을 좋아해서 예시를 든 것입니다! 아무튼 project1 폴더는 프로젝트 폴더고 이 안에 있는 파일들을 호스팅하는 겁니다. 0.0.0.0은 여러분의 컴퓨터의 아이피가 오게 됩니다.

절대경로와 상대경로

이번 파트는 로컬 디렉토리와 웹 디렉토리가 둘 다 해당되는 부분입니다. 절대경로와 상대경로를 알게 되면 프로그래밍하는데에 있어서 약간의 편리함이 생길겁니다. 파일 같은 것을 다룰 때에 말이죠. 절대경로와 상대경로는 파일을 다루는데에 사용되는 방법입니다. 간단하게 알아보도록 합시다.

C:\WINDOWS\system32

위와 같은 디렉토리가 있습니다. cmd 켜면 처음 보이는 디렉토리죠. 저 디렉토리를 절대경로로 표현하면 무엇일까요? 그냥 C:\WINDOWS\system32 이겁니다. 같은 주소죠. 절대경로는 최상위 디렉토리부터 접근하게 됩니다. 디렉토리를 깊게 들어가게 되면 절대경로도 길어지겠죠.

위의 디렉토리를 상대경로로 표현하면 ./ 입니다. 아주 간단하죠. 이 표기에서 .은 현재 디렉토리를 의미합니다. /는 내부를 의미하는거죠. 그래서 합치면 현재 디렉토리의 내부라는 의미입니다. 상대경로로 상위 폴더를 가리키는 방법도 간단합니다. ../라고 하면 됩니다. C:\WINDOWS와 같습니다.

이 상대경로를 잘 기억해두세요. 앞으로 링크를 할 때 같은 파일을 링크 할 때도 있을 건데 그때 계속 사용하게 될 겁니다.

이번 글의 내용은 여기까지입니다. 이번 글에서는 네가지를 알아봤습니다. 로컬 디렉토리와 웹 디렉토리에 대해서 알아봤고 절대경로와 상대경로에 대해서 알아봤습니다. 특히나 상대경로는 앞으로 많이 사용하게 될 디렉토리 접근 방법이라서 기억해두는 게 정신 건강에 이롭습니다.

이번 글은 여기서 마치도록 하겠습니다. 다음 글부터는 다시 새로운 태그들을 알아볼 겁니다. 텍스트와 관련된 태그들을 차례대로 알아볼 것인데 수가 많기 때문에 많은 파트로 나뉠 것 같습니다. 그럼 다음 글에서 봅시다.