이미지 파일의 경로 설정에 대한 질문입니다.

React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드

Ch3-2. 임원 소개(Leadership.jsx) 페이지

해결된 질문

작성

src 폴더 안에 pages폴더와 assets폴더가 있는데 왜 경로를 ../../assets 이렇게 잡아야 하는 거죠?
.. 을 두 번 쓰면 두 번 위로 올라가는 거니까 src 폴더 밖에서 assets 폴더를 찾겠다는 거 아닌가요?

HTML/CSS javascript react node.js mongodb

답변 2

닭강정

지식공유자

안녕하세요. 질문 남겨주셔서 감사합니다!
먼저, 3-2의 전체 폴더 구조를 아래에 정리해드리겠습니다.

src/
├── App.css
├── App.jsx
├── assets/
│   ├── Human1.jpg
│   ├── Image1.jpg
│   ├── Image2.jpg
│   └── react.svg
├── Components/
│   ├── Footer/
│   │   └── Footer.jsx
│   └── Navbar/
│       └── Navbar.jsx
├── index.css
├── main.jsx
└── Page/ (상위 폴더 2)
    ├── About/
    │   └── About.jsx
    ├── Board/
    │   └── Board.jsx
    ├── Contact/
    │   └── Contact.jsx
    ├── Leadership/ (상위 폴더 1)
    │   └── Leadership.jsx   ← 이 파일에서 작업 중입니다
    ├── MainPage/
    │   ├── Contact.jsx
    │   ├── Forum.jsx
    │   ├── Hero.jsx
    │   └── MainPage.jsx
    └── Services/
        └── Services.jsx

질문을 다시 정리하자면

src 폴더 안에 assets 폴더와 Page 폴더가 존재
Leadership.jsx에서 assets/Human1.jpg 이미지를 불러올 때 ../../assets/Human1.jpg처럼 상위 폴더로 두 번 이동해야 하는 걸까요?

이는 자바스크립트에서의 상대 경로 규칙 때문입니다. Leadership.jsx 기준으로 보면 현재 경로는 src/Page/Leadership/Leadership.jsx 이고 src/assets까지 도달하기 위해서는 Leadership(1번) -> Page(2번) -> src 폴더총 2번을 빠져나가야 합니다. 따라서 상위 폴더로 두 번 빠져나가는 ../../ 키워드를 사용했습니다.

Leadership.jsx에서 src/assets 폴더에 도달하기 까지 경로를 직접 머릿속으로 그려보시면 이해하시기 더 편합니다.

감사합니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. yosemyti님께서 질문하신 이미지 파일 경로 설정에 대해 안내해 드리겠습니다.

경로 설정 이해하기

웹 개발에서 파일 경로는 파일 시스템의 구조를 기준으로 상대 경로나 절대 경로를 설정하게 됩니다. 질문에서 언급하신 ../../assets 경로는 상대 경로로서, 파일 구조에 따라 조정되는 방식입니다.

상대 경로(../../assets): 현재 파일 위치를 기준으로 상대적인 위치를 설정하는 방식입니다.
- ..는 상위 디렉토리로 이동을 의미합니다. 예를 들어, ../../assets는 현재 디렉토리에서 두 단계 위로 올라간 후 assets 디렉토리로 이동하는 경로입니다.
- 이 경우, src 폴더 안에서 pages 폴더가 있고, assets 폴더는 src 폴더 아래에 위치해 있다면, pages 폴더에서 assets 폴더로 접근하기 위해 ../../assets가 사용되었을 수 있습니다.
왜 두 번 올라가는지: pages 폴더가 src 폴더 내에 있기 때문에 src에서 pages까지의 경로에서 두 번 올라가게 된다고 고려할 수 있습니다. 즉, pages 폴더가 src 폴더 내에 있는 경우 pages에서 assets로 가기 위해 두 번 올라가게 됩니다.

확실한 이해를 위해, 파일 구조를 다시 한번 확인해 주시고, 필요하다면 트리 형태로 구조를 그려보시면 더 명확해질 것입니다.

유사한 질문 및 자세한 설명

비슷한 주제에 대한 추가적인 설명은 초기 설정에 대한 질문에서 확인하실 수 있습니다. 이 글에서는 프로젝트의 폴더 구조와 경로 설정에 관한 내용을 다루고 있어 도움이 될 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변