저희 팀은 프로젝트에 사용할 템플릿을 미리 선정해두었습니다. 저희 프로젝트 테마에도 어울리는 색감과 구성이여서 모두가 맘에 들어했습니다.
그리고 오늘 템플릿에 사용자가 기입한 정보를 얻기위해 html을 수정하는데 어려움을 겪었습니다.
js로 innerhtml을 이용해 기존 html카드 형식과 완전히 동일한 코드를 html에 삽입했습니다.
// 예시
const template = document.createElement("div");
template.setAttribute("class", "col-md-4 col-sm-6 fh5co-tours animate-box");
template.setAttribute("data-animate-effect", "fadeIn");
template.innerHTML = `
<div href="#"><img src="${imagePath}" alt="여행루트 게시글 이미지" class="img-responsive">
<div class="desc">
<span></span>
<h3>${route.title}</h3>
<span>${route.duration}</span>
<span>댓글 수: ${route.comment_count}</span>
<span>${route.user.nickname}</span>
<span class="price">${rate}</span>
<a class="btn btn-primary btn-outline" href="#">Book Now <i class="icon-arrow-right22"></i></a>
</div>
</div>
`;이러면 부트스트랩이 꼬일일도 없으니 안심하고 웹페이지를 확인하는데 전혀 반응하지 않았습니다..
혹시 데이터가 들어오지 않은건지 div가 생성되지 않은건지 수차례 확인했는데 이유를 알게되었습니다. 그 이유는 부트스트랩에 있는 main.js라는 파일이 문제였는데 이 파일에 있는 특정 함수가 template 변수로 설정해 놓은 div들의 클래스를 변경시켜주고 있더군요...
아무래도 저 함수가 적용이 된 후에 제 js가 작동이 되다보니 제 js로 삽입한 html이 보이지 않았던 것이였습니다.
이후 setAttribute에 main.js가 변환시켜주고 있던 class를 집어넣어 잘 작동되는 것을 확인했습니다.
두번째는 입력창을 템플릿이 지정한 div외에 새로 만들어 사용할 때 문제가 생겼습니다.
해당 모양과 틀에서는 원하는 정보를 모두 담을 수 없기에 다른 틀을 하나 더 만들어 정보를 받고자 했지만, 이상하게도 제가 작성한 html입력창은 보이지 않았습니다.
그래서 다른 장소에 입력창을 만드니 이번에는 아예 모든 html이 내려가버리더군요...
해당 문제는 아직 해결하지 못해 더 시간이 걸리면 기본 틀을 부수고 만들 계획입니다. 일단 정상작동하는 웹을 만들고싶기에 비록 통일성이 떨어진다는 지적이 나올지 몰라도 강행해야겠습니다.
분명 css를 다루면 해결할 수 도 있을 것같은데 아직 저에게 화려한 템플릿을 다루기에는 상당히 어려웠던 것 같습니다.
