Github 배포 환경에서 이벤트로 하위 폴더 이동 시 주의할 점

Github  배포 환경에서 이벤트로 하위 폴더 이동 시 주의할 점

 

 

팀원과 작성한 웹페이지를 GitHub에 배포하고 기능 확인 중 어느 한 곳에서 계속 오류가 나타났습니다. 그러다가 페이지 이동간 경로 때문이라는 걸 알게 되었고 오류를 수정할 수 있었습니다. 이 글에서는 오류 발견과 해결 과정 및 해결방법에 대해 알려드리겠습니다.

 

 

Github 배포하다 만난 404

 

 

팀원과 작성한 웹페이지를 배포하려고 리포지토리 만들고 폴더를 집어넣었습니다. 그러고 나서 배포 작업을 끝나고 나니 메인페이지는 잘 구동되었습니다. 하지만 메인페이지에서 상세 페이지로 넘어가는 버튼 이벤트에서 404 에러를 보았습니다.

 

 

처음 오류가 발생했을 때에는 원인을 찾지 못하였는데 개발자 도구를 확인하고 해당 상세 페이지 자체를 읽어오지 못한다는 걸 알 수 있었습니다. 그래서 경로를 확인하니 원하던 대로 경로가 나오지 않았습니다.

 

클릭 이벤트가 진행된 곳은 a태그였고, a태그 경로는 다음과 같이 되어 있었습니다.

 

<a href="./html/detail.html">

 

웹페이지의 메인페이지인 index.html은 최상단 위치에 있었고, index.html에서 detail.html로 이동하기 위해서는 html 폴더 안으로 들어가서 그 안에 있는 detail.html을 불러와야 했습니다.

 

그래서 위 코드처럼 하위 폴더를 들어가기 위해 ./를 사용해서 이벤트를 진행하였는데 계속 404 에러가 발생했습니다.

처음엔 이해가 되지 않았습니다. 하지만 이벤트 후 경로를 확인하고 나서 차이점을 알 수 있었습니다.

 

 

Github 배포 환경에서 루트 경로

 

 

Github에서 배포하고 메인 페이지를 접속하게 되면 다음과 같은 경로로 되어 있습니다.

 

 

https://(깃허브아이디).github.io/(리포지토리명)/

 

https://(깃허브아이디).github.io/(리포지토리명)/index.html

(이 경로도 동일한 경로입니다)

 

 

하지만 index.html에서 버튼 이벤트가 발생한 위의 a 태그에서는 다음과 같은 경로로 이동했습니다.

 

 

https://(깃허브아이디).github.io/html/detail.html

 

 

경로에서 '리포지토리명'을 제외하고 이동한 것이었습니다. ./를 하면 index.html과 동일한 위치의 경로에서 가져오겠거니 했습니다. https://(깃허브아이디).github.io/(리포지토리명) 이 경로에 /html/detail.html이 붙을 줄 알았는데 https://(깃허브아이디).github.io 를 가져오고 있었습니다.

 

 

문제 해결

 

 

어렵게 생각하지 않았습니다. '리포지토리명'이 제외 되서 넘어온거니까 경로에 리포지토리명을 추가해서 이벤트 진행하도록 했습니다.

 

<a href="/(리포지토리명)/html/detail.html">

 

리포지토리명 추가 후 이벤트가 정상 동작 하는 것을 볼 수 있었습니다.

 

 

끝으로

 

배포 후 이벤트 동작이 안 되서 여러 방면으로 원인을 찾다가 결국 문제를 해결하였습니다. 클릭 이벤트 간 경로 문제로 발생한 원인이었고, 경로 수정을 통해 원활히 동작하는 것을 볼 수 있었습니다. 해결하고 보면 허무한 듯 하지만 위의 과정으로도 문제를 풀 수 있다는 경험을 했다는 것으로 유익한 시간이라 느낍니다.

 

▼ 아래 글도 읽어보세요! ▼

 

Git을 효율적으로 활용하기 위한 좋은 습관 3가지 소개

 

Git Graph로 Git 저장소 시각화하기 - VSCode 내 설치법, 사용법

 

 

GitHub에서 Branch 이슈를 매번 만드는 게 중요한 이유