백엔드 개발이 먼저 끝나고 백엔드 개발 인원들이 프론트에 붙어 같이 작업하게 되었습니다. 이 과정에서 확실히 속도가 붙은건 좋았으나 js를 서로 만들다보니 그 구조과 굉장히 복잡해진 것 같습니다.
오늘 있었던 사례를 적어보겠습니다.
네비게이션 바에 적용할 자바스크립트를 적용하려 <script>태그에 넣어 확인하던 중 js파일이 작동하지 않는 문제가 있었습니다.
그래서 이유를 찾기위해 해당 파일과 관련된 파일들을 하나씩 확인해 나갔고 이유를 알 수 있었습니다.
먼저 네비게이션 바의 구조를 설명드리자면 네비게이션 바는 모든 페이지에 들어있어야 하기때문에 모든 html에는 네비게이션 바를 넣을 수 있는 div가 있고 해당 html을 불러오는 js파일이 있습니다.
메인페이지 -> 네비게이션 js -> 쿼리셀렉터로 해당 div 할당 -> 네비게이션바 html 삽입 과 같은 구조입니다.
document.addEventListener("DOMContentLoaded", function () {
// 네비바를 삽입할 위치
var navbarContainer = document.querySelector("#navbar-container");
if (navbarContainer) {
// base-nav.html 파일을 가져와서 네비게이션바 위치에 삽입
fetch("base-nav.html")
.then(response => response.text())
.then(data => {
navbarContainer.innerHTML = data;
})
}
})이 코드가 네비게이션바의 정보를 담고있는 html 코드를 불러오는데 이 코드에서 데이터를 text로 변환한 후에 보내 먹히지 않았던 것이였습니다. 이 문제를 해결하기 위해 여러곳을 돌아다니며 <script>태그를 넣고 다녔고, js파일에 eventlitsner를 추가하기도 하는 등 많은 노력을 기울이다 방법을 찾을 수 있게 되었습니다.
document.addEventListener("DOMContentLoaded", function () {
// 네비바를 삽입할 위치
var navbarContainer = document.querySelector("#navbar-container");
if (navbarContainer) {
// base-nav.html 파일을 가져와서 네비게이션바 위치에 삽입
fetch("base-nav.html")
.then(response => response.text())
.then(data => {
navbarContainer.innerHTML = data;
const script_element = document.createElement('script')
script_element.setAttribute('src', '/assets/js/base-nav.js');
document.querySelector('head').appendChild(script_element);
})
}
})결국에 저기서 시작해 로드가 끝나는 시점이 저 곳이니 저기에다가 새로운 태그를 삽입해 넣으면 되겠다고 생각했습니다. 위와 같이 데이터를 삽입시켜주고 나서 <script>태그를 생성해 붙혀주는 과정을 거쳤더니 이전에는 돌아가지 않던 js파일이 정상 작동 할 수 있었습니다.
