상대 경로 찾는법

📌 상대 경로 (../, ./) 이해하기

상대 경로는 현재 위치를 기준으로 파일이나 폴더를 찾는 방법이야.

---

✅ 1. ./ → 현재 폴더 (현재 위치)

• ./은 현재 디렉터리를 가리켜.
• 생략해도 같은 의미야.

  ./file.txt   # 현재 폴더에 있는 file.txt
  file.txt     # 위와 동일 (./ 생략 가능)

✅ 예제

import myModule from './myModule.js'; // 현재 폴더에 있는 myModule.js 가져오기

---

✅ 2. ../ → 한 단계 위 (부모 폴더)

• ../은 한 단계 위(부모 폴더)로 이동할 때 사용해.

  ../file.txt  # 부모 폴더에 있는 file.txt

✅ 예제

import myModule from '../myModule.js'; // 부모 폴더에 있는 myModule.js 가져오기

---

✅ 3. ../../ → 두 단계 위

• ../../은 부모 폴더의 부모 폴더로 이동.

  ../../file.txt  # 두 단계 위 폴더에 있는 file.txt

✅ 예제

import myModule from '../../myModule.js'; // 두 단계 위 폴더의 myModule.js 가져오기

---

📌 정리

경로	의미
./	현재 폴더
../	부모 폴더
../../	부모의 부모 폴더
../../../	3단계 위 폴더

📌 파일 및 폴더 구조 예시

아래와 같은 폴더 구조가 있다고 가정하자.

/project
 ├── index.html
 ├── main.js
 ├── /src
 │    ├── app.js
 │    ├── /components
 │    │    ├── Header.js
 │    │    ├── Footer.js
 │    ├── /assets
 │         ├── logo.png
 ├── /config
      ├── settings.js

---

✅ 경로 예제

현재 파일	접근할 파일	상대 경로
/src/app.js	/src/components/Header.js	./components/Header.js
/src/app.js	/src/assets/logo.png	./assets/logo.png
/src/components/Header.js	/src/app.js	../app.js
/src/components/Header.js	/config/settings.js	../../config/settings.js
/config/settings.js	/src/app.js	../src/app.js
/main.js	/config/settings.js	./config/settings.js

---

✅ 실제 코드 예제

1️⃣ /src/app.js에서 /src/components/Header.js 가져오기

import Header from './components/Header.js';

• app.js에서 현재 폴더(./) 기준으로 components/Header.js를 가져옴.

2️⃣ /src/components/Header.js에서 /src/app.js 가져오기

import App from '../app.js';

• Header.js에서 한 단계 위(../)로 올라가서 app.js를 가져옴.

3️⃣ /src/components/Header.js에서 /config/settings.js 가져오기

import Settings from '../../config/settings.js';

• Header.js에서 두 단계 위(../../)로 이동 후 config/settings.js를 가져옴.

---

📌 정리

기호	의미
./	현재 폴더
../	한 단계 위 (부모 폴더)
../../	두 단계 위 (부모의 부모 폴더)