상대경로/절대경로

경로(path)?

 

웹 개발에서 경로의 중요성

- 웹 개발에서 경로는 파일 또는 리소스에 접근하기 위해 필수적인 개념이다.

서버 내의 파일 시스템에 폴더의 위치를 가르키며 해당 파일을 찾고 가져오도록 한다.

 

경로를 사용하는 이유

• 리소스 연결 : HTML,CSS,JS 파일 및 이미지, 비디오 등 웹페이지에 연결하여 웹 어플리케이션이 작동할 수 있도록 하는 목적이 있다.
• 구조적 파일 관리 : 프로젝트의 구조가 커지면 파일을 체계적으로 관리하고 연결하는데 중요한 역할을 한다.
• 유지보수 : 프로젝트가 커지거나 변경이 있을 때 경로 설정이 잘 되어있으면 리소스 위치를 쉽게 수정하고 관리가 가능하다.

절대경로 

정의 : 최상위 루트를 기준으로 경로를 지정하는 방식

예시 : /root/style.css , https://example.com/image/photo.jpg

 

장점 : 정확한 위치를 명시하므로 경로 오류가 적다.

단점 : 경로가 길고, 서버 이동 시 경로에 대한 수정작업이 필요할 수 있다. (파일 이동이 없는 대상으로 하는 것이 좋다.) 

상대경로

정의 : 현재 파일의 위치를 기준으로 다른 파일이나 폴더로의 경로를 지정하는 방식

예시 : ./image/photo.jpg // ../about.html

 

 

장점 : 프로젝트 내부에서 파일 구조가 이동해도 유연하게 대응할 수 있다.

주의 사항 : 파일 구조를 정확하게 이해햐야한다.

 

언제 절대경로를 사용해야할까?

• 외부 리소스 연결 : 외부 서버에서 제공되는 CDN (Jquery,googleFont,API) 등 을 사용할 때 절대경로를 사용한다.
• 서버 간 일관성 유지 : 동일한 서버에 여러 페이지에 동일한 리소스를 연결할 때 모든 파일에서 경로가 일관되도록 절대경로 를 사용하는 것이 좋다.

장점 

• 경로가 명확하고 일관성 있다.
• 프로젝트를 배포하고 나서도 리소스 위치가 안정적임
• 외부 리소스를 쉽게 호출 가능

단점

• 경로가 길고 가독성이 떨어질 수 있다.
• 서버가 변경되면 모든 경로를 수정해야한다.
• 로컬 개발환경에서는 절대경로를 사용하기가 어렵다.

---

실제 사용 사례 장단점을 비교해보자

상대경로를 사용한 예 

- CSS  와 이미지 연결 : 웹페이지 내에서 CSS 파일과 이미지 파일을 참조할 때 상대경로를

사용하여 간단하게 처리가 가능하다.

• index.html :

<link rel="stylesheet" href="./css/style.css">

• style.css :

background-image: url('../images/background.jpg');

 

절대경로를 사용한 예

CDN 을 통한 자바스크립트 라이브러리 호출 : 외부에서 제공되는 프레임워크를 사용할 대 절대경로를 사용할 수 있다.

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

 

비교 요약