Bootstrap 의 Navs 를 웹 페이지에 추가하는데 같은 형태를 내기 위해 여러 페이지에 같은 Navs 코드를 복사해서 쓰는게 비 효율적이다 라고 생각했습니다.
Navs 메뉴가 하나라도 변경되면 관련된 모든 파일을 열어서 일일이 수정해 주어야 하는데 이런 번거로움을 해결하고 싶었습니다.
방법을 찾는 도중 이상한 내용이 있을 수 있습니다. Javscript 나 HTML 관련 지식과 실력이 매우 부족함을 언급드립니다.
Header 영역을 별도의 파일로 관리하고 각 페이지 코드에서 Header 영역을 불러와 그려줍니다. 그리고 불러온 페이지에 맞게 Header 영역을 설정해 줍니다. 위의 예로 Example 페이지에서 Header 를 불러왔다면 Example 버튼이 선택되 있어야 합니다.
정리하자면 Navs 의 HTML 코드를 별개의 파일로 분리하고 불러오는 페이지에 맞춰 Navs 를 원하는 형태로 수정하는 것이 목표입니다.
Javascript 로 HTML 을 추가하는 기능은 이미 구현되 있는 것이 있었습니다.
www.w3schools.com/howto/howto_html_include.asp
위 기능을 사용해 보니 includeHTML 호출 직후 Navs 초기화 코드를 호출해 주었는데 HTML Element 를 찾지 못하는 이슈가 있었습니다. XMLHttpRequest 를 통해 HTML 코드를 추가하는 것이 비동기인 듯 합니다. 참고로 PHP 파일을 호출해도 정상적으로 로드는 되었습니다.
<body>
<div w3-include-html="view.navs.php"></div>
<script type="text/javascript" src="view.navs.js"></script>
<script defer type="text/javascript" src="include_html.js"></script>
<script>
includeHTML();
initNavs();
</script>
</body>
HTML 이 추가 되는 타이밍에 맞춰 Javascript 호출을 하면 해결되지 않을까 해서 추가하려는 view.nave.php 파일에 Javscript 호출 코드를 추가해 줬습니다. 이런 경우에는 Javascript 코드가 추가는 되나 호출되지 않는 이슈가 발생합니다.
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
...
</nav>
<script type="text/javascript" src="view.navs.js"></script>
<script type="text/javascript">
initNavs();
</script>아무래도 위 방법으로는 HTML 추가 타이밍에 맞춰 초기화를 하기가 쉽지 않아 보입니다. Javascript 의 비동기 기능을 사용하면 어찌 되지 않을까 싶은 생각이 들긴 했지만 일단 다른 방법을 찾아봅니다.
Jquery 의 .load 를 사용하면 HTML 추가가 가능하고 추가 후 콜백을 받는 것도 가능하다고 합니다.
.load() | jQuery API Documentation
Description: Load data from the server and place the returned HTML into the matched elements. Note: Prior to jQuery 3.0, the event handling suite also had a method named .load(). Older versions of jQuery determined which method to fire based on the set of
api.jquery.com
<head>
<script type="text/javascript" src="/node_modules/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="/vader87/scripts/common/js/view.navs.js"></script>
<script type="text/javascript">
$(function(){
$("#header").load("/vader87/scripts/common/php/view.navs.php", function() {
initNavs();
});
});
</script>
</head>
<body>
<div id="header"></div>
</body>Bootstrap 을 쓰고 있기 때문에 Jquery 는 추가되 있어 바로 사용해 보았더니 원하는 결과가 나왔습니다.
이제 Header 를 별도의 파일로 관리할 수 있고, 가져다 사용하는 곳에 맞춰 초기화 할 수도 있습니다.
참고로 좀더 찾아보니 Django 라는 플랫폼에서 HTML 을 Template 형태로 관리하는 것이 가능하다고 합니다. 궁극적으로 고려해 볼만하지 않을까 싶습니다.
docs.djangoproject.com/en/3.1/howto/overriding-templates/
Overriding templates | Django documentation | Django
Django The web framework for perfectionists with deadlines. Overview Download Documentation News Community Code Issues About ♥ Donate
docs.djangoproject.com
'Works > Web' 카테고리의 다른 글
| [Web] Maria DB 설치 및 사용 (0) | 2021.01.16 |
|---|---|
| [Web] Mac OS 에서 SSL 인증 받기 (1) | 2021.01.02 |
| [Web] Cloud FireStore 관리자 생성 및 관리자 접근 권한 부여 (0) | 2020.12.31 |
| [Web] Firebase Cloude Function 사용기 (4) | 2020.12.30 |
| [Web] Chrome 에서 변경한 코드가 반영되지 않을 때 (1) | 2020.12.29 |
댓글