네브 바에 알람기능을 보여주는 기능을 만드는 과정에서 새로 알게 된 내용을 기록

html small datetime

미리 만들어진 템플릿을 확인해보았을 때 알람 아이콘 옆에 조그마한게 알람의 숫자가 표시되고 있었다.
이를 html 태그로 확인을 해보면 다음과 같이 small태그로 자리잡고 있었다.

<li>
  <a class="waves-effect waves-block waves-light notification-button" href="javascript:void(0);" data-target="notifications-dropdown">
  <i class="material-icons">notifications_none
  	<small class="notification-badge">
  	</small>
  </i>
  </a>
</li>

w3school을 확인해보니 기존 텍스트 크기보다 조금 작게 표출하는 기능을 담담을 한다.

jquery document.ready 동작

만들려고 하는 기능은 다음과 같다.
장치가 이상이 생기게 되면 이를 알람으로 표출을 하고(목록 추가 + 숫자를 업데이트) 해당 알람 리스트 중 하나를 클릭하게 되면
해당하는 장치의 대시보드로 포커스가 이동하고 + 알람 숫자가 줄어들게 하고 싶었다.

현재 프로젝트 구조가 header에 nav bar가 들어있고 이 header파일을 다른 페이지 본문 요소에서 재활용하는 방식으로 진행을 하고 있었다.

대시보드로 포커스가 이동하는 것은 dashboard 파일에서 진행을 해야하고 알람 숫자가 줄어드는 것은 header 파일에서 진행을 해야 해서 document.ready에 이벤트가 2번 적용이 되어야 했다.

검색을 해보니 document.ready를 중복해서 사용이 가능하고 적혀진 순서대로 작동을 한다고 한다.

실제 예제로도 확인을 해보았을 때 두가지의 기능이 순서대로 작동한 걸을 확인할 수 있었다.

    <script>
      $(document).ready(function () {
        console.log("check1");
      });
      $(document).ready(function () {
        console.log("check2");
      });
   
    </script>

click event

이 부분은 클릭 이벤트를 구현했을 때도 마찬가지였다.
한 요소에 대해서 서로 다른 결과를 내는 클릭 이벤트를 구현을 했을 때 원하는 결과가 순서대로 나오게 되었다.

    <script>
      $(".check1").click(function () {
        $(".check1").html("test");
      });
      $(".check1").click(function () {
        console.log("check");
      });
    </script>

요소 추가하기

요소를 추가하는 방법이 여러가지가 있는데 대부분 .append 메서드를 활용해서 이루어진다.

vanila javascript에서는 appendchild이지만 만약 jquery를 사용한다면 append 를 사용하는 것을 추천했다. (https://stackoverflow.com/questions/15926325/jquery-append-vs-appendchild)

위 링크 답변 중에 IE가 이제 서비스를 안하게 되면서 append를 자바스크립트에서도 공식적으로 지원을 한다고 한다. 그러면 이제는 vanila 제이쿼리 관계없이 append를 사용하면 될 것 같디.

// vanila  - insert multiple elements 

var elm = document.getElementById('div1');
elm.append(document.createElement('p'),document.createElement('span'),document.createElement('div'));

// jQuery 

$(#div1).append("<p><span><div></div></span></p>")

이 요소를 추가하는 로직으로 알람 목록에 새로운 요소가 들어가야 할 때마다 알람 컨테이너에 <li>를 추가하는 식으로 구현을 하면 된다.