코드 작성을 완료하고 사이트를 배포하기 위해 node.js와 netlify를 사용해 배포 환경을 만들었다.
배포까지 완료한 후 링크를 통해 페이지에 들어갔을 때,
생각지도 못했던 오류가 발생하고 있는 것을 확인했다.
분명 Local Live 환경과 Local build 환경에서는 작동이 잘 되던 기능이 배포 환경에서 작동하지 않는다는 것이었다.
처음에는 오류가 발생하는 원인을 알 수 없어 막막하고 비상🚨이 걸렸지만, 리더님께 피드백을 받고 오류의 원인부터 하나씩 찾아가기 시작했다.
1. 이미지 경로 오류
상품 페이지에서 상품 정보를 확인하는 이미지가 사이트에 제대로 안 불러와지고, 화면에 안나타나는 오류가 발생했다.
상품 이미지 경로를 script 코드에 명확히 속성을 주었으나, 배포 사이트에서 이미지 경로를 찾지 못하는 듯 보였다.
따라서 상대 경로로 설정한 것이 문제인가 싶어서 절대 경로로 바꿔서 다시 배포해보았지만, 여전히 이미지가 안보여 실패했다.
이에 script코드에 작성한 동적인 이미지 경로를 배포 페이지에서 인식을 못한다고 판단했고, html 코드에 정적인 경로로 직접 설정해주었다.
이미지 경로를 정적으로 정의해주면서 html코드의 div가 많아졌다는 아쉬움이 있었지만, 현재로서 가장 확실한 해결 방법이었다.
경로를 넣어주고 필요없는 상품 정보는 상황에 따라 보이지 않도록 하기위해 display:none 속성을 다시 이용했다.
display:block을 활용해 안보이게 했던 div를 다시 화면에 띄우는 것도 가능해졌다.
다음은 html에 추가한 이미지 경로 div 코드와 오류를 수정한 script 코드이다.
코드가 길어서 일부만 올려두겠다. 다른 코드들도 같은 원리로 작성되었다.
<div class="swiper" id="modal_1">
<div class="swiper-wrapper">
<img
class="swiper-slide"
id="item__1"
src="/product_img/item1_1.jpg" />
<img
class="swiper-slide"
id="item__2"
src="/product_img/item1_2.jpg" />
<img
class="swiper-slide"
id="item__3"
src="/product_img/item1_3.jpg" />
<img
class="swiper-slide"
id="item__4"
src="/product_img/item1_4.jpg" />
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev">
<div class="material-icons">
<path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/>
</svg>
</div>
</div>
<div class="swiper-button-next">
<div class="material-icons">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/>
</svg>
</div>
</div>
</div>
<div class="swiper" id="modal_2">
<div class="swiper-wrapper">
<img
class="swiper-slide"
id="item__1"
src="/product_img/item2_1.jpg" />
<img
class="swiper-slide"
id="item__2"
src="/product_img/item2_2.jpg" />
<img
class="swiper-slide"
id="item__3"
src="/product_img/item2_3.jpg" />
<img
class="swiper-slide"
id="item__4"
src="/product_img/item2_4.jpg" />
</div>
<div class="swiper-pagination"></div>
<div class="swiper-button-prev">
<div class="material-icons">
<path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0"/>
</svg>
</div>
</div>
<div class="swiper-button-next">
<div class="material-icons">
<path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/>
</svg>
</div>
</div>
</div>
const btn_data1 = (document.getElementById("item1").onclick =
function () {
var username = "BB545"; // GitHub 사용자 이름
var repo = "1st_project_codingonWeb12th"; // GitHub 저장소 이름
var filePath = "product/item_1.txt";
// GitHub raw URL 생성
var rawURL =
username +
"/" +
repo +
"/main/" +
filePath;
// AJAX 요청으로 파일 가져오기
$.ajax({
url: rawURL,
success: function (data) {
// 파일 내용을 content 요소에 추가
$("#content").html(data);
},
error: function () {
$("#content").html(
"<p>파일을 불러오는 데 문제가 발생했습니다.</p>"
);
},
});
document.getElementById("modal").style.display = "block";
document.getElementById("modal_1").style.display = "block";
document.getElementById("modal_2").style.display = "none";
document.getElementById("modal_3").style.display = "none";
document.getElementById("modal_4").style.display = "none";
document.getElementById("modal_5").style.display = "none";
document.getElementById("modal_6").style.display = "none";
document.getElementById("modal_7").style.display = "none";
document.getElementById("modal_8").style.display = "none";
document.getElementById("modal_9").style.display = "none";
});
이미지 경로를 갖고 있는 div에 id를 설정해 하나씩 display 속성을 적용해주었다.
코드가 길어져서 아쉽긴 하지만 계속해서 오류를 해결하는 과정을 경험한다면 더 효율적인 방법을 찾아낼 수 있지않을까 기대해본다.
더 열심히 공부하고 구조를 생각하는 연습을 해보려한다.
이미지 슬라이더
2. alert() 함수 작동 오류
script에 이벤트 리스너로 click이벤트를 정의해놨던 alert()함수가 배포페이지에서 작동하지 않는 것을 발견했다.
이 역시도 1번과 비슷하게 script에 있는 alert()함수를 제대로 인식하지 못하고 있다고 판단하여 html코드에 onclick 속성으로 직접 alert()함수를 정의했다.
1번의 오류를 해결하고나니 간단한 스크립트 코드 오류들은 오랜시간이 필요없이 바로 해결할 수 있었다.
따라서 onclick 속성으로 정의해 수정한 후에는 배포페이지에서도 alert()함수가 정상적으로 작동하는 것을 확인할 수 있었다.
<div class="save-image-btn" onclick="alert('이미지를 저장합니다.')">
이미지 저장해서 보기
</div>
3. 로그인, 장바구니, 검색창 작동 오류
이는 개발자도구를 활용해 확인한 결과 코드에는 이상이 없어 보였다.
그러나 버튼을 누르면 창이 뜨도록 설정해둔 기능이 작동을 하지 않았고, 코드에 이상이 없음을 확인하자 다시 script 코드 문제인가 하는 의문이 들어 처음부터 살펴보기 시작했다.
전체 코드를 살펴보던 중 html 실행 코드와 script 코드의 위치가 너무 떨어져 있다는 것을 발견했고, 설마하는 마음에 script 코드 위치를 html 코드 바로 밑으로 옮겨주었다.
위치를 변경한 후에는 배포페이지에서도 로그인, 장바구니, 검색창이 정상적으로 작동했다.
html코드와 script 코드가 너무 떨어져 있는 경우, 실행해야 하는 script코드를 찾지 못할 수 있어 앞으로의 프로젝트에서도 주의가 필요할 것 같다.
이 부분에 좀 더 신경을 쓰면서 개발을 진행해가려 한다.
4. 아이콘 오류
아이콘이 안보이는 이유는 콘솔창을 통해 찾을 수 있었다.
아이콘을 가져오는 사이트의 경로가 오류가 나고 있었고, 수정을 해도 변함이 없어서 아이콘을 불러오는 사이트를 변경하기로 했다.
따라서 이전까지 계속 사용해왔던 부트스트랩을 이용해 svg 아이콘을 가져오고 화면에 보여지도록 css를 수정했더니 배포페이지에서도 아이콘이 정상적으로 화면에 보였다.
이외에도 간단한 오류들을 팀원들과 같이 의논하고 스스로 해결해보면서 프로젝트를 끝까지 목표대로 마칠 수 있었다.
