지난 이야기...
멤버카드 append 문제로 멤버카드를 가로로 덧붙이고 싶었던 우리팀은 가로스크롤과 캐러샐에 대해 각각 공부한다.
나는 캐러샐을, 다른 팀원들은 가로 스크롤을 구현하는 데에 성공했는데 프로젝트에는 가로 스크롤을 사용하기로 결정했다.
이렇게 프로젝트는 거의 마무리가 되어가는 듯 했다.
초반에는 Git에 익숙하지 않아서 파일을 직접 공유하고 합치던 절차도 Git을 이해한 후부터 pull과 push를 통해 순조롭게 공유되고 있었다.
그런 듯 했다...
아니 이거 또 왜 이래?
팝업창이 안 뜨잖아!!!!!!
문제발생 : 파일 연결하기
캐러샐을 적용시켜본다고 전에 쓰던 파일은 쓸 수 없게 되었기 때문에 새로 파일을 클론해와서 쓰려고 했는데 가져온 파일에서 팝업이 또 되지 않는 문제가 발생했다.
팝업 관련해서는 코드가 하나도 변경되지 않았는 데도 그랬다.
도통 이유를 알 수 없어 튜터님께 들고 가 보니 해답을 얻을 수 있었다.
페이지의 주소를 확인해보니 메인페이지의 경로와 팝업창의 폴더 경로가 달랐던 것이다(!)
내가 클론을 해올 때 새로운 폴더를 만들어서 그 안에 폴더 째로 프로젝트 파일들을 클론해왔는데, 이 때문인지 메인페이지의 주소는 경로에 폴더 하나가 더 붙은 반면, 팝업 페이지는 코드 파일에 적힌 그대로 남아있어서 차이가 나게 되었던 것이다!
핵심 원인은 파일의 경로를 "/popup.html"로 지정했다는 것이었다.
$("#uploadbtn").click(async function () {
window.open(
"/popup.html",
"_blank",
"width=800, height=600, top=50, left=50, scrollbars=yes"
);
});문서명 앞에 /를 붙이게 되면 이게 절대경로가 되는데 경로의 주소가 저 /뒤부터 시작되어 고정되는 것이었다.
그래서 나의 경우처럼 파일경로가 /폴더1/폴더2/popup.html 로 폴더안에 겹겹이 들어가있는 경우에 그 앞에 있는 경로를 다 무시하게 되어 파일 경로를 찾을 수 없게 된 것이었다.
해결
나는 /를 빼서 상대경로로 바꾸어주는 것으로 문제를 해결하고 팝업창을 띄울 수 있었다.
파일의 경로에 대한 지식을 알게 된 날이었다.
/위치 : 절대경로
/를 안할 시 : 상대경로
덤으로 ../ 를 하면 상위 경로가 되는 것도 가르쳐 주셨다.
