절대 경로 vs 상대 경로 (Absolute Path vs Relative Path)

00. 경로란

1. 역할

• 문서에서 다른 문서로 연결(link)하거나 문서 내에 다른 파일(그림, 음악 등)을 넣을 때, 다른 문서/파일의 위치를 명시해줘야 함
• 연결하려면 href 속성을 사용해서 문서의 연결이나 파일의 위치를 명시해주어야 하고, src 속성을 사용해서 그림의 위치를 알려주어야 함
• 이 때, 적어주는 문서나 파일의 위치를 경로(path)라고 함

2. 사용 방법

• 경로를 쓰는 방법 2가지:  절대 경로 (Absolute Path), 상대 경로 (Relative Path)

01. 정의

1. 절대 경로 (Absolute Path)

• 파일의 root(최상위 디렉토리)부터 해당 파일까지의 전체 경로
• 컴퓨터 상의 디렉토리에서는 항상 C:\ 또는 / (각각 윈도우, 유닉스) 포함, URL에서는 http://로 시작
• 일반적으로 다른 사람이 만들어 놓은 파일에 연결 또는 다른 사이트에 연결 시 사용 (즉, 배너 banner 역)
• 장점: 절대경로를 통해 어느 곳에서든 경로에 접근 가능
• 단점: 경로 변경 시 경로를 일일이 수정해야 됨, 상대경로에 비해 로딩 속도 느림 (서버 내부에서 처리되는 것이 아니고, DNS 조회를 통해 해당 파일을 찾기에)
• 예

  https://yororing-developer.tistory.com/18
  C:\Users\UserID\Desktop\test.txt

2. 상대 경로 (Relative Path)

• 현재 파일의 위치를 기준으로 연결하려는 파일의 상대적인 경로
• 장점: 서버나 프로젝트 디렉토리의 위치가 변경되어도 서버/프로젝트 내부 디렉토리 구조만 그대로라면 수정 불필요
• 단점: 자기 자신이 기준이기에 자신의 위치가 바뀌는 것에 취약
• 예

  ./src/compnents/Counter.js
  ../../img/logo.jpg​

   
• 기호 설명

기호	의미	설명
/	root	/만 사용 시 root, 즉 가장 토대가 되는 경로가 선택됨
./	현재 위치	./는 현재 위치를 나타내며 보통 생략함
../	상위 경로	../는 상위 경로를 나타내며 현재 폴더/파일이 속한 폴더를 가리킴

• 연습

  

  • 현재 c.txt에서 작업하고 있을 때, a.txt파일로 이동하려면 다음과 같이 경로를 작성

  • ../../a/a.txt

  • 반대로, a.txt에서 c.txt를 향하고 싶으면 다음과 같이 작성

  • ../c/inner_C/c.txt

  • temp를 root로 가정했을 때, root를 기준으로 a.txt의 위치를 나타내고 싶다면 다음과 같이 작성

  • /a/a.txt

02. 용도

• 절대 경로: 외부의 파일을 불러오는 경우
  • 웹 개발: CDN (콘텐츠 전송 네트워크) 사용 또는 웹에 올려진 미디어 등을 사용하는 경우

• 상대 경로: 내부의 파일을 불러오는 경우
  • 웹 개발: 디렉토리 내부에서 모듈 연결 또는 다른 파일을 import하는 경우

참조

1. https://darkcity1.tistory.com/2
2. https://velog.io/@bami/파일-경로-절대-경로와-상대-경로
3.