동물앨범 1-1-2

한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지

동물 앨범 만들기-1-2

해결된 질문

작성

경로 에러가 나와서 혹시 제 파일구조 때문에 그런지 궁금하여 문의드립니다!

일단 파일구조가 아래와 같은 방식으로 구성되어있습니다.(맨위에 lecture라고 따로있습니다 lecture/section06/src)

원래 강의코드

koala.html

<!DOCTYPE html>
<head>
    <title>Animal Album</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="./src/styles.css" />
</head>
<body>
    <div id="app">
        <div class="tab-bar">
            <a href="/"><div>전체</div></a>
            <a href="/penguin.html"><div>펭귄</div></a>
            <a href="/koala.html"><div class="clicked">코알라</div></a>
            <a href="/panda.html"><div>판다</div></a>
        </div>
        <div class="content"></div>
    </div>
    <script src="./src/koala.js"></script>
</body>

현제 제 코드

<!DOCTYPE html>
<head>
  <title>Animal Album</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="./src/styles.css" />
</head>
<body>
  <div id="app">
    <div class="tab-bar">
      <a href="index.html"><div>전체</div></a>
      <a href="penguin.html"><div>펭귄</div></a>
      <a href="koala.html"><div class="clicked">코알라</div></a>
      <a href="panda.html"><div>판다</div></a>
    </div>
    <div class="content"></div>
  </div>
  <script src="./src/koala.js"></script>
</body>

이렇게 해야 화면에 동물사진이 나오는데 혹시 경로 상의 문제인지 아니면 파일구조상 때문에 이렇게 작성해야하는지 궁금하여 문의드립니다! 차후에 강의를 듣고 프로젝트를 할때 불편함을 느낄지.. 걱정되어 문의드립니다!

javascript rest-api spa dom

답변 2

효빈 Hyobin

지식공유자

안녕하세요 rladygks1210님 🙂 질문 감사합니다.

제 코드와 rladygks1210님 코드의 차이는 절대경로와 상대경로 차이인데요,
웹 서버에서 실행하고 있는지, 로컬환경에서 실행하고 있는지의 차이이기 때문에, 앞으로 강의를 수강하시는데 있어서 큰 불편함은 없으실거에요 😊

rladygks1012님의 세팅에 맞춰 알맞은 경로를 작성해주시면 될 것 같습니다.

감사합니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. rladjgks1210님. 질문 주셔서 감사합니다.

경로 문제는 웹 개발에서 자주 발생할 수 있는 이슈이며, 웹 페이지 구성 요소가 불러와지지 않는 주요 원인 중 하나입니다. 현재 문제의 경우 링크를 클릭할 때 해당 파일이 경로 상에서 정확하게 지정되지 않고, 파일을 찾지 못하는 상황이 발생할 수 있습니다.

절대 경로와 상대 경로: 링크의 경로를 지정할 때, 여기 사용하신 것처럼 href="index.html" 같은 상대 경로는 현재 파일의 위치에 따라 동작이 달라질 수 있기 때문에 경로가 올바르게 설정되지 않을 수 있습니다. 웹 루트에서의 절대 경로로 지정해주는 것이 좋습니다. 예를 들어, 웹 루트에서 시작하는 경로를 사용하려면 href="/index.html" 이렇게 쓸 수 있습니다.
파일 위치 확인: 파일이 실제로 서버 또는 로컬 파일 경로에서 올바른 위치에 있는지 확인해야 합니다. 현재 구조에서 index.html, koala.html 등과 같은 HTML 파일들이 src 폴더 밖에 존재하는 것처럼 보입니다. 파일들이 실제로 그것들과 같은 경로에 있는지 확인하세요.
서버 환경의 사용: 경로 문제는 로컬 파일 경로에서 특히 많이 발생합니다. 만약 문제 없이 경로를 확인하고 싶다면 단순히 파일을 열어보는 것이 아닌, 실제 HTTP 서버 환경에서 파일을 제공하도록 설정해보세요. 만약 아직 로컬 서버에서 제공 중이 아니라면, 간단한 라이브 서버(예: VSCode의 Live Server 확장)를 사용해서 정확히 경로가 어떻게 동작하는지 확인할 수 있습니다.

이 문제와 관련하여 비슷한 질문 및 답변이 있습니다:

동물앨범에서 파일 경로 문제 해결 - 이 게시물에서는 강의의 특정 단계에서의 고유한 파일 구성 문제 및 경로 문제 해결에 대한 가장 적절한 실례를 제공합니다.

문제 해결에 도움이 되기를 바랍니다. 만약 다른 세부사항이나 추가적인 문제가 있다면, 정보를 제공해 주시면 추가적인 도움을 드릴 수 있도록 하겠습니다.

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

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

동물앨범 1-1-2