#

handlebar 라이브러리

  • 이 라이브러리를를 이용하면 Template literal보다 더 쉽게 templating을 해줄 수 있다.
  • handlebar말고도 다른 라이브러리도 많다.

기본예제



<html>
    <head>
    </head>
        
        <h1>hello world</h1>
        <section class="show">
        </section>
        <script type="myTemplate" id="listTemplate">
        <li>
            <div>게시자 : </div>
            <div class="content"><article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">

  <header class="post-header">
    <h1 class="post-title p-name" itemprop="name headline">jQuery에 대해서...</h1>
    <p class="post-meta">
      <time class="dt-published" datetime="2019-08-22T13:20:54+00:00" itemprop="datePublished"><p>created : Aug 22, 2019</p>
        <p>updated : Aug 22, 2019</p>
      </time></p>
  </header>

  <div class="post-content e-content" itemprop="articleBody">
    <ul id="markdown-toc">
  <li><a href="#jquery의-장점" id="markdown-toc-jquery의-장점">Jquery의 장점</a></li>
  <li><a href="#사그라든-jquery의-인기" id="markdown-toc-사그라든-jquery의-인기">사그라든 Jquery의 인기</a></li>
  <li><a href="#현재는-어떻게-되어가고-있나" id="markdown-toc-현재는-어떻게-되어가고-있나">현재는 어떻게 되어가고 있나?</a></li>
  <li><a href="#그렇다면-어떻게-개발해야-될까" id="markdown-toc-그렇다면-어떻게-개발해야-될까">그렇다면 어떻게 개발해야 될까?</a></li>
</ul>

<p>#</p>

<h2 id="jquery의-장점">Jquery의 장점</h2>

<ul>
  <li>옛날에 다양하게 동작하던 웹 브라우저 API 간의 차이를 줄여줬다</li>
  <li>쉬운 DOM 조작이 가능하다</li>
</ul>

<h2 id="사그라든-jquery의-인기">사그라든 Jquery의 인기</h2>

<ul>
  <li>웹 브라우저가 발전하면서 브라우저 호환성 이슈가 줄어듬</li>
  <li>더 간편하고 빠른 라이브러리들이 나옴</li>
  <li>시대가 지나면서 Jquery의 기능들이 Javascript 표준 자체가 되기도 함</li>
</ul>

<h2 id="현재는-어떻게-되어가고-있나">현재는 어떻게 되어가고 있나?</h2>

<ul>
  <li>React, Angular, Vue와 같은 프레임워크에 해당 프레임워크와 관련된 라이브러리를 씀</li>
  <li>오래된 legacy 코드라면 아직 jQuery를 쓰는 곳도 있다.</li>
</ul>

<h2 id="그렇다면-어떻게-개발해야-될까">그렇다면 어떻게 개발해야 될까?</h2>

<ul>
  <li>가급적 메소드는 표준 Javascript 메소드를 사용하기</li>
  <li>legacy 코드를 만지게 된다면 jQuery의 버전을 잘 보자</li>
  <li>최근에는 최초 한 번만 정적 데이터를 로드하고 필요한 데이터만 갱신해주는 SPA로 위에 언급했던 프레임워크들이 인기를 끌고 있다.</li>
  <li>React, Vue, Angular를 배우자.</li>
</ul>


  </div><script src="https://utteranc.es/client.js"
        repo="aegis1920/aegis1920.github.io"
        issue-term="pathname"
        label="comment"
        theme="github-light"
        crossorigin="anonymous"
        async>
</script>
<a class="u-url" href="/wiki/JQuery.html" hidden></a>
</article>
</div>
            
            // # 커스텀 키워드를 만들어서 함수로 만들어줄 수 있다.
            
                
            

            <div class="comment"> 
            <h3>댓글목록</h3>
            
            // #if를 이용해서 조건문을 만들어줄 수 있다.
            
                // each를 이용해서 반복문을 만들어줄 수 있다.
                
                    // @를 붙여주면 자동으로 인덱스를 증가시켜준다.
                    <div>번째 댓글 : </div>
                
            
                <div>댓글이 아직 없군요</div>
            
            </div>
        </li>
        </script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.1.2/handlebars.min.js"></script>
        <script>
            var data = [
                { "id": 88, "name": "crong", "content": "새로운글을 올렸어요", "like": 5, "comment": ["댓글이다", "잘했어요"] },
                { "id": 28, "name": "hary", "content": "전 오늘도 노래를 불렀어요", "like": 0, "comment": ["제발고만..", "듣고싶네요 그노래"] },
                { "id": 23, "name": "pororo", "content": "크롱이 항상 말썽을 피워서 행복해~", "like": 4, "comment": [] },
                { "id": 5, "name": "pobi", "content": "물고기를 한마리도 잡지 못하다니..", "like": 5, "comment": ["댓글이다", "멋진글이네요", "잘봤습니다"] }
            ];  

            // 여기에 커스텀 helper를 등록해줄 수 있다.
            // 함수로 만들어서 넣어줄 수 있다. 리턴은 문자열로.
            // 여기서 먼저 선언하고 뒤에 호출해줘야 된다.
            Handlebars.registerHelper("likes", function(like){
                if(like > 4){
                    return "<span> 축하해요! 좋아요가 " + like + "개 이상입니다!</span>";
                }else if(like < 1){
                    return "아직 아무도 좋아하지 않아요";
                }else{
                    return like + "개의 좋아요가 있네요";
                }
            });

            // 이것을 precompile이라고 부른다. compile함수는 함수를 반환한다
            var template = document.querySelector("#listTemplate").innerText;
            var bindTemplate = Handlebars.compile(template);

            var resultHTML= "";

            data.forEach(function(item, index){
                // 중괄호를 기준으로 파싱해준다.
                resultHTML += bindTemplate(item);
            });

            var show = document.querySelector(".show");
            show.innerHTML = resultHTML;
            // 다른 방법인 reduce를 이용하는 방법. 재귀를 통해서 계속해서 합쳐준다.
            // var innerHtml = data.reduce(function(prev, next){
            //     return prev + bindTemplate(next);
            // }, "");


        </script>
    </body>
</html>