handlebar를 활용한 템플릿 작업
2020-07-18
해당 Post는 handlebar를 활용한 템플릿 작업에 대해서 정리한 파일입니다.
templating작업은 ES2015에서 template literal로 좀 더 간단해지긴 했습니다.
하지만 여전히 다양한 조건 상황에서의 처리 등은 여전히 복잡합니다.
templating 작업을 돕는 라이브러리는 꽤 다양하고 막강한 방법을 제공합니다.
이를 사용해보면서 templating 처리의 세련된 방법을 알아두면 좋습니다.
기본 예제
html에 다음과 같이 template코드를 만듭니다.
<script type="myTemplate" id="listTemplate">
<li>
<div>게시자 : </div>
<div class="content"><article class="post">
<h1>JavaScript 라이브러리</h1>
<div>
<span class="date">
2020-07-16
</span>
<ul class="tag">
<li>
<a href="https://junghyun100.github.io/tags#라이브러리 활용과 클린코드">
라이브러리 활용과 클린코드
</a>
</li>
</ul>
</div>
<div class="entry">
<p>해당 Post는 JavaScript 라이브러리에 대해서 정리한 파일입니다.</p>
<p>자바스크립트 라이브러리들을 이해하고, 어떤 것을 앞으로 활용하면 좋을지 판단할 수 있습니다.</p>
<hr />
<h2 id="jquery-의-10년">jQuery 의 10년</h2>
<p>지난 10년간, JS라이브러리는 jQuery가 그 인기를 독차지했었습니다.</p>
<p>jQuery가 인기 있던 이유는 꽤 많은데요, 몇 가지 꼽으면 다음과 같습니다.</p>
<ul>
<li>IE6,7,8를 포함해서 다양하게 동작하는 웹브라우저의 API 간의 차이를 줄여주었습니다.</li>
<li>복잡하고 어려운 DOM APIs를 추상화해서 제공해서 쉽게 DOM 조작이 가능합니다.</li>
<li>사고의 흐름에 맞춰 프로그래밍할 수 있습니다.</li>
</ul>
<p>아래 코드는 ‘사고의 흐름’이라는 관점에서 이해할 수 있는 jQuery코드 입니다.
이 코드는 비동기 상황에서 일어나는 것으로, 이와 유사하게 비동기로 동작하는 이벤트 콜백에서 이런 일은 발생합니다.</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//p1아이디를 가진 엘리먼트를 찾아서, color를 red 로 하고, slideup을 2초간, slideDown을 2초간 한다.</span>
<span class="nx">$</span><span class="p">(</span><span class="dl">"</span><span class="s2">#p1</span><span class="dl">"</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="dl">"</span><span class="s2">color</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">red</span><span class="dl">"</span><span class="p">).</span><span class="nx">slideUp</span><span class="p">(</span><span class="mi">2000</span><span class="p">).</span><span class="nx">slideDown</span><span class="p">(</span><span class="mi">2000</span><span class="p">);</span>
</code></pre></div></div>
<p>주석에 적힌 내용대로 코드를 그대로 구현할 수 있습니다.</p>
<p>메서드를 연속적으로 부르는 방식을 method chaining이라고 합니다.</p>
<p>이러한 방식은 jQuery뿐만 아니라 많은 라이브러리에서 제공하고 있습니다.</p>
<h2 id="그러나-점점-줄어드는-인기의-이유는">그러나 점점 줄어드는 인기의 이유는?</h2>
<p>인기 있던 이유를 하나씩 현재 다시 보면 이렇습니다.</p>
<ul>
<li>점차 브라우저 호환성 이슈가 줄었습니다.</li>
<li>DOM APIs는 그대로지만, 7~8년 전부터 등장한 JS Frameworks 들이 좀 더 추상화된 방식으로 DOM 접근을 도와주고 있습니다.</li>
<li>다른 라이브러리들도 이런 방식을 지원도 합니다.
그 외에도 ECMAScript 2015부터 편리한 함수들이 많이 제공되고 있습니다.</li>
</ul>
<p>jQuery가 제공했던 유용한 기능들이 JavaScript표준방법으로 사용할 수 있게 된 것입니다.</p>
<h2 id="framework">Framework</h2>
<p>짧게 요약하면 웹에서 할 수 있는 것들이 많아지면서, Single Page Application이라는 서비스개념이 등장했습니다.</p>
<p>즉 웹에서 데이터처리나 복잡한 Ajax처리, routing처리 등이 많아지면서, 이를 편리하게 해주는 Framework가 나왔습니다.</p>
<p>React, Angular, Vue, Ember와 같은 것들이 그런 것입니다.</p>
<p>이를 사용하면 좀 더 쉽게 DOM제어를 할 수 있고, Data조작을 View에서 분리해서 관리할 수 있습니다.</p>
<p>그리고 component방식으로 개발할 수 있어 재사용가 능한 코드를 만들 수도 있습니다.</p>
<p>라이브러리가 유용한 함수들을 제공한다고 할 수 있다면, Framework는 큰 애플리케이션의 구조를 잡는 것을 도와주는 역할을 하죠.</p>
<p>특히 데스크탑 웹 개발에서 더 유용하게 사용할 수 있습니다.</p>
<h2 id="그-밖에">그 밖에</h2>
<p>라이브러리 수준에서 유용한 것들은 이제는 Framework에서 이를 얼마나 사용하는가에 의해서 인기가 달라집니다.</p>
<p>다시 말해서, ‘어떤 Framework가 인기가 있는가?’에 의해서 그 Framework이 가진 철학에 따라서 필요한 라이브러리가 의존적으로 많이 쓰이고 인기를 얻고 있습니다.</p>
<p>그렇다보니, Framework과 관련 없이 많이 쓰일만한 라이브러리는 이제 별로 없습니다.</p>
<p>Observables을 처리해주는 RxJS나, Lodash와 같은 데이터를 쉽게 처리해주는 유틸리티 등이 인기를 얻는 정도입니다.</p>
<p>나머지 라이브러리는 해당 Framework가 사용하는 것이 무엇인가에 따라 달라집니다.</p>
<h2 id="결론">결론</h2>
<p>라이브러리나 프레임워크는 필요한 시점에 적절한 것을 골라서 사용하면 됩니다.</p>
<p>그리기 위해서는 라이브러리나 프레임워크가 어떤 목적을 가지고 있는 것인지 관심을 두는 게 좋습니다.</p>
<p>그래야 우리에게 필요한 것을 잘 선택할 수 있습니다.</p>
<p>어쩌면 라이브러리가 필요하지 않은 경우도 상당히 많습니다.</p>
<h2 id="생각해보기">생각해보기</h2>
<ul>
<li>SPAs가 무엇인가요?</li>
<li>왜 필요한 걸까요?</li>
</ul>
<blockquote>
<p>SPA(Single Page Application)은 페이지 갱신 요청시에 갱신에 필요한 데이터만을 전달받아 페이지를 갱신하여 주고 전체 페이지를 새로고침하지 않아서<br />
link tag를 사용하는 기존방식보다 효율적이고 트래픽을 감소시킬수 있습니다.<br />
SPA는 웹보다는 앱어플리케이션에 적합합니다.</p>
</blockquote>
<hr />
</div>
<div class="pagination">
<span class="prev" >
<a href="https://junghyun100.github.io/BOJ-1072-Solution/">
« BOJ 1072
</a>
</span>
<span class="next" >
<a href="https://junghyun100.github.io/handlebar%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%9C-%ED%85%9C%ED%94%8C%EB%A6%BF-%EC%9E%91%EC%97%85/">
handlebar를 활용한 템플릿 작업 »
</a>
</span>
</div>
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://junghyun100.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</article>
</div>
<div>좋아요 갯수 <span> </span></div>
<div class="comment">
<div></div>
</div>
</li>
</script>
javascript에서는 replace로 치환하는 방법 말고, 라이브러리를 사용해서 결과를 얻을 수 있습니다.
var template = document.querySelector("#listTemplate").innerText;
var bindTemplate = Handlebars.compile(template); //bindTemplate은 메서드입니다.
이제 데이터를 추가합니다.
var data = {
"id" : 104,
"name" : "junghyun",
"content" : "새로운글을 올렸어요",
"like" : 5,
"comment" : "댓글이다"
};
bindTemplate(data);
배열이 포함된 데이터의 처리
예를 들어 comment 1개 이상일 수 있습니다.
var data = {
"id" : 104,
"name" : "junghyun",
"content" : "새로운글을 올렸어요",
"like" : 5,
"comment" : ["댓글이다", "멋진글이네요", "잘봤습니다"]
};
bindTemplate(data);
이런 경우는 이렇게 반복문을 넣을 수도 있습니다.
each 부분을 눈여겨봅니다.
<script type="myTemplate" id="listTemplate">
<li>
<div>게시자 : </div>
<div class="content"><article class="post">
<h1>JavaScript 라이브러리</h1>
<div>
<span class="date">
2020-07-16
</span>
<ul class="tag">
<li>
<a href="https://junghyun100.github.io/tags#라이브러리 활용과 클린코드">
라이브러리 활용과 클린코드
</a>
</li>
</ul>
</div>
<div class="entry">
<p>해당 Post는 JavaScript 라이브러리에 대해서 정리한 파일입니다.</p>
<p>자바스크립트 라이브러리들을 이해하고, 어떤 것을 앞으로 활용하면 좋을지 판단할 수 있습니다.</p>
<hr />
<h2 id="jquery-의-10년">jQuery 의 10년</h2>
<p>지난 10년간, JS라이브러리는 jQuery가 그 인기를 독차지했었습니다.</p>
<p>jQuery가 인기 있던 이유는 꽤 많은데요, 몇 가지 꼽으면 다음과 같습니다.</p>
<ul>
<li>IE6,7,8를 포함해서 다양하게 동작하는 웹브라우저의 API 간의 차이를 줄여주었습니다.</li>
<li>복잡하고 어려운 DOM APIs를 추상화해서 제공해서 쉽게 DOM 조작이 가능합니다.</li>
<li>사고의 흐름에 맞춰 프로그래밍할 수 있습니다.</li>
</ul>
<p>아래 코드는 ‘사고의 흐름’이라는 관점에서 이해할 수 있는 jQuery코드 입니다.
이 코드는 비동기 상황에서 일어나는 것으로, 이와 유사하게 비동기로 동작하는 이벤트 콜백에서 이런 일은 발생합니다.</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//p1아이디를 가진 엘리먼트를 찾아서, color를 red 로 하고, slideup을 2초간, slideDown을 2초간 한다.</span>
<span class="nx">$</span><span class="p">(</span><span class="dl">"</span><span class="s2">#p1</span><span class="dl">"</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="dl">"</span><span class="s2">color</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">red</span><span class="dl">"</span><span class="p">).</span><span class="nx">slideUp</span><span class="p">(</span><span class="mi">2000</span><span class="p">).</span><span class="nx">slideDown</span><span class="p">(</span><span class="mi">2000</span><span class="p">);</span>
</code></pre></div></div>
<p>주석에 적힌 내용대로 코드를 그대로 구현할 수 있습니다.</p>
<p>메서드를 연속적으로 부르는 방식을 method chaining이라고 합니다.</p>
<p>이러한 방식은 jQuery뿐만 아니라 많은 라이브러리에서 제공하고 있습니다.</p>
<h2 id="그러나-점점-줄어드는-인기의-이유는">그러나 점점 줄어드는 인기의 이유는?</h2>
<p>인기 있던 이유를 하나씩 현재 다시 보면 이렇습니다.</p>
<ul>
<li>점차 브라우저 호환성 이슈가 줄었습니다.</li>
<li>DOM APIs는 그대로지만, 7~8년 전부터 등장한 JS Frameworks 들이 좀 더 추상화된 방식으로 DOM 접근을 도와주고 있습니다.</li>
<li>다른 라이브러리들도 이런 방식을 지원도 합니다.
그 외에도 ECMAScript 2015부터 편리한 함수들이 많이 제공되고 있습니다.</li>
</ul>
<p>jQuery가 제공했던 유용한 기능들이 JavaScript표준방법으로 사용할 수 있게 된 것입니다.</p>
<h2 id="framework">Framework</h2>
<p>짧게 요약하면 웹에서 할 수 있는 것들이 많아지면서, Single Page Application이라는 서비스개념이 등장했습니다.</p>
<p>즉 웹에서 데이터처리나 복잡한 Ajax처리, routing처리 등이 많아지면서, 이를 편리하게 해주는 Framework가 나왔습니다.</p>
<p>React, Angular, Vue, Ember와 같은 것들이 그런 것입니다.</p>
<p>이를 사용하면 좀 더 쉽게 DOM제어를 할 수 있고, Data조작을 View에서 분리해서 관리할 수 있습니다.</p>
<p>그리고 component방식으로 개발할 수 있어 재사용가 능한 코드를 만들 수도 있습니다.</p>
<p>라이브러리가 유용한 함수들을 제공한다고 할 수 있다면, Framework는 큰 애플리케이션의 구조를 잡는 것을 도와주는 역할을 하죠.</p>
<p>특히 데스크탑 웹 개발에서 더 유용하게 사용할 수 있습니다.</p>
<h2 id="그-밖에">그 밖에</h2>
<p>라이브러리 수준에서 유용한 것들은 이제는 Framework에서 이를 얼마나 사용하는가에 의해서 인기가 달라집니다.</p>
<p>다시 말해서, ‘어떤 Framework가 인기가 있는가?’에 의해서 그 Framework이 가진 철학에 따라서 필요한 라이브러리가 의존적으로 많이 쓰이고 인기를 얻고 있습니다.</p>
<p>그렇다보니, Framework과 관련 없이 많이 쓰일만한 라이브러리는 이제 별로 없습니다.</p>
<p>Observables을 처리해주는 RxJS나, Lodash와 같은 데이터를 쉽게 처리해주는 유틸리티 등이 인기를 얻는 정도입니다.</p>
<p>나머지 라이브러리는 해당 Framework가 사용하는 것이 무엇인가에 따라 달라집니다.</p>
<h2 id="결론">결론</h2>
<p>라이브러리나 프레임워크는 필요한 시점에 적절한 것을 골라서 사용하면 됩니다.</p>
<p>그리기 위해서는 라이브러리나 프레임워크가 어떤 목적을 가지고 있는 것인지 관심을 두는 게 좋습니다.</p>
<p>그래야 우리에게 필요한 것을 잘 선택할 수 있습니다.</p>
<p>어쩌면 라이브러리가 필요하지 않은 경우도 상당히 많습니다.</p>
<h2 id="생각해보기">생각해보기</h2>
<ul>
<li>SPAs가 무엇인가요?</li>
<li>왜 필요한 걸까요?</li>
</ul>
<blockquote>
<p>SPA(Single Page Application)은 페이지 갱신 요청시에 갱신에 필요한 데이터만을 전달받아 페이지를 갱신하여 주고 전체 페이지를 새로고침하지 않아서<br />
link tag를 사용하는 기존방식보다 효율적이고 트래픽을 감소시킬수 있습니다.<br />
SPA는 웹보다는 앱어플리케이션에 적합합니다.</p>
</blockquote>
<hr />
</div>
<div class="pagination">
<span class="prev" >
<a href="https://junghyun100.github.io/BOJ-1072-Solution/">
« BOJ 1072
</a>
</span>
<span class="next" >
<a href="https://junghyun100.github.io/handlebar%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%9C-%ED%85%9C%ED%94%8C%EB%A6%BF-%EC%9E%91%EC%97%85/">
handlebar를 활용한 템플릿 작업 »
</a>
</span>
</div>
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://junghyun100.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</article>
</div>
<div>좋아요 갯수 <span> </span></div>
<div class="comment">
<h3>댓글목록</h3>
<div>번째 댓글 : </div>
</div>
</li>
</script>
compile 부분은 동일하므로 결과를 화면에서 확인합니다.
data자체가 많아진 경우의 처리
그런데, 실제 데이터는 좀 더 많을 것입니다.
var data = [
{"id" : 104, "name" : "junghyun", "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" : ["댓글이다", "멋진글이네요", "잘봤습니다"]}
];
반복적으로 결과를 forEach 또는 reduce를 사용해서 합칠 수 있습니다.
forEach
var innerHtml = "";
data.forEach(function (item, index) {
innerHtml += bindTemplate(item);
});
reduce
var innerHtml = data.reduce(function(prve, next) {
return prve + bindTemplate(next);
}, "");
조건 상황에 따른 처리
지금 예제에서 댓글이 없는 경우에는 다른 메시지를 처리해야 한다면?
template은 말 그대로 고정되어 있는 것이죠.
하지만 handlebar에서는 이를 지원합니다.
<script type="myTemplate" id="listTemplate">
<li>
<div>게시자 : </div>
<div class="content"><article class="post">
<h1>JavaScript 라이브러리</h1>
<div>
<span class="date">
2020-07-16
</span>
<ul class="tag">
<li>
<a href="https://junghyun100.github.io/tags#라이브러리 활용과 클린코드">
라이브러리 활용과 클린코드
</a>
</li>
</ul>
</div>
<div class="entry">
<p>해당 Post는 JavaScript 라이브러리에 대해서 정리한 파일입니다.</p>
<p>자바스크립트 라이브러리들을 이해하고, 어떤 것을 앞으로 활용하면 좋을지 판단할 수 있습니다.</p>
<hr />
<h2 id="jquery-의-10년">jQuery 의 10년</h2>
<p>지난 10년간, JS라이브러리는 jQuery가 그 인기를 독차지했었습니다.</p>
<p>jQuery가 인기 있던 이유는 꽤 많은데요, 몇 가지 꼽으면 다음과 같습니다.</p>
<ul>
<li>IE6,7,8를 포함해서 다양하게 동작하는 웹브라우저의 API 간의 차이를 줄여주었습니다.</li>
<li>복잡하고 어려운 DOM APIs를 추상화해서 제공해서 쉽게 DOM 조작이 가능합니다.</li>
<li>사고의 흐름에 맞춰 프로그래밍할 수 있습니다.</li>
</ul>
<p>아래 코드는 ‘사고의 흐름’이라는 관점에서 이해할 수 있는 jQuery코드 입니다.
이 코드는 비동기 상황에서 일어나는 것으로, 이와 유사하게 비동기로 동작하는 이벤트 콜백에서 이런 일은 발생합니다.</p>
<div class="language-js highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="c1">//p1아이디를 가진 엘리먼트를 찾아서, color를 red 로 하고, slideup을 2초간, slideDown을 2초간 한다.</span>
<span class="nx">$</span><span class="p">(</span><span class="dl">"</span><span class="s2">#p1</span><span class="dl">"</span><span class="p">).</span><span class="nx">css</span><span class="p">(</span><span class="dl">"</span><span class="s2">color</span><span class="dl">"</span><span class="p">,</span> <span class="dl">"</span><span class="s2">red</span><span class="dl">"</span><span class="p">).</span><span class="nx">slideUp</span><span class="p">(</span><span class="mi">2000</span><span class="p">).</span><span class="nx">slideDown</span><span class="p">(</span><span class="mi">2000</span><span class="p">);</span>
</code></pre></div></div>
<p>주석에 적힌 내용대로 코드를 그대로 구현할 수 있습니다.</p>
<p>메서드를 연속적으로 부르는 방식을 method chaining이라고 합니다.</p>
<p>이러한 방식은 jQuery뿐만 아니라 많은 라이브러리에서 제공하고 있습니다.</p>
<h2 id="그러나-점점-줄어드는-인기의-이유는">그러나 점점 줄어드는 인기의 이유는?</h2>
<p>인기 있던 이유를 하나씩 현재 다시 보면 이렇습니다.</p>
<ul>
<li>점차 브라우저 호환성 이슈가 줄었습니다.</li>
<li>DOM APIs는 그대로지만, 7~8년 전부터 등장한 JS Frameworks 들이 좀 더 추상화된 방식으로 DOM 접근을 도와주고 있습니다.</li>
<li>다른 라이브러리들도 이런 방식을 지원도 합니다.
그 외에도 ECMAScript 2015부터 편리한 함수들이 많이 제공되고 있습니다.</li>
</ul>
<p>jQuery가 제공했던 유용한 기능들이 JavaScript표준방법으로 사용할 수 있게 된 것입니다.</p>
<h2 id="framework">Framework</h2>
<p>짧게 요약하면 웹에서 할 수 있는 것들이 많아지면서, Single Page Application이라는 서비스개념이 등장했습니다.</p>
<p>즉 웹에서 데이터처리나 복잡한 Ajax처리, routing처리 등이 많아지면서, 이를 편리하게 해주는 Framework가 나왔습니다.</p>
<p>React, Angular, Vue, Ember와 같은 것들이 그런 것입니다.</p>
<p>이를 사용하면 좀 더 쉽게 DOM제어를 할 수 있고, Data조작을 View에서 분리해서 관리할 수 있습니다.</p>
<p>그리고 component방식으로 개발할 수 있어 재사용가 능한 코드를 만들 수도 있습니다.</p>
<p>라이브러리가 유용한 함수들을 제공한다고 할 수 있다면, Framework는 큰 애플리케이션의 구조를 잡는 것을 도와주는 역할을 하죠.</p>
<p>특히 데스크탑 웹 개발에서 더 유용하게 사용할 수 있습니다.</p>
<h2 id="그-밖에">그 밖에</h2>
<p>라이브러리 수준에서 유용한 것들은 이제는 Framework에서 이를 얼마나 사용하는가에 의해서 인기가 달라집니다.</p>
<p>다시 말해서, ‘어떤 Framework가 인기가 있는가?’에 의해서 그 Framework이 가진 철학에 따라서 필요한 라이브러리가 의존적으로 많이 쓰이고 인기를 얻고 있습니다.</p>
<p>그렇다보니, Framework과 관련 없이 많이 쓰일만한 라이브러리는 이제 별로 없습니다.</p>
<p>Observables을 처리해주는 RxJS나, Lodash와 같은 데이터를 쉽게 처리해주는 유틸리티 등이 인기를 얻는 정도입니다.</p>
<p>나머지 라이브러리는 해당 Framework가 사용하는 것이 무엇인가에 따라 달라집니다.</p>
<h2 id="결론">결론</h2>
<p>라이브러리나 프레임워크는 필요한 시점에 적절한 것을 골라서 사용하면 됩니다.</p>
<p>그리기 위해서는 라이브러리나 프레임워크가 어떤 목적을 가지고 있는 것인지 관심을 두는 게 좋습니다.</p>
<p>그래야 우리에게 필요한 것을 잘 선택할 수 있습니다.</p>
<p>어쩌면 라이브러리가 필요하지 않은 경우도 상당히 많습니다.</p>
<h2 id="생각해보기">생각해보기</h2>
<ul>
<li>SPAs가 무엇인가요?</li>
<li>왜 필요한 걸까요?</li>
</ul>
<blockquote>
<p>SPA(Single Page Application)은 페이지 갱신 요청시에 갱신에 필요한 데이터만을 전달받아 페이지를 갱신하여 주고 전체 페이지를 새로고침하지 않아서<br />
link tag를 사용하는 기존방식보다 효율적이고 트래픽을 감소시킬수 있습니다.<br />
SPA는 웹보다는 앱어플리케이션에 적합합니다.</p>
</blockquote>
<hr />
</div>
<div class="pagination">
<span class="prev" >
<a href="https://junghyun100.github.io/BOJ-1072-Solution/">
« BOJ 1072
</a>
</span>
<span class="next" >
<a href="https://junghyun100.github.io/handlebar%EB%A5%BC-%ED%99%9C%EC%9A%A9%ED%95%9C-%ED%85%9C%ED%94%8C%EB%A6%BF-%EC%9E%91%EC%97%85/">
handlebar를 활용한 템플릿 작업 »
</a>
</span>
</div>
<div id="disqus_thread"></div>
<script>
/**
* RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
* LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
/*
var disqus_config = function () {
this.page.url = PAGE_URL; // Replace PAGE_URL with your page's canonical URL variable
this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
};
*/
(function() { // DON'T EDIT BELOW THIS LINE
var d = document, s = d.createElement('script');
s.src = 'https://junghyun100.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</article>
</div>
<div>좋아요 갯수 <span> </span></div>
<div class="comment">
<h3>댓글목록</h3>
<div>번째 댓글 : </div>
<div>댓글이 아직 없군요</div>
</div>
</li>
</script>