첫번째 프로젝트:hacker news(7) 템플릿

하초 2021. 9. 15. 21:59

템플릿

코드의 양이 늘어난다고해서 복잡도가 증가하면 안된다.

기존 코드를 확인하면, 마크업을 배열과 문자열을 이용했다.

문자열이 생성되는 시점이 다 다르기 때문에 문자열을 저장해놓을 수 있는 배열을 만들고, 생성되는 시점에 맞춰 배열에 문자열을 넣어두고 마지막에 배열을 합치는 식이다. 이 코드의 문제점은 DOM API보다는 마크업 구조를 확인하기가 쉽지만, 이 또한 마크업 자체가 분산이 되어있기 때문에 내용이 복잡해지면 UI의 구조를 파악하기가 힘들어진다는 것이다.

이를 해결하기 위해 템플릿을 사용한다.

템플릿의 방법은 문자열 안에다 마킹을 해놓고, 마킹한 부분을 다른 데이터로 바꿔치기하는 것과 유사하다.

// 템플릿(틀)
let template = `
    <div class="container m-auto p-4">
        <h1>Hacker News</h1>
        <ul>
            {{__news_feed__}}
        </ul>
        <div>
            <a href="#/page/{{__prev_page__}}">이전 페이지</a>
            <a href="#/page/{{__next_page__}}">다음 페이지</a>
        </div>
    </div>
`

// {{__abc__ }} 영역에 데이터 교체
template = template.replace('{{__news_feed__}}', newsList.join(''));
template = template.replace('{{__prev_page__}}', store.currentPage >1? store.currentPage - 1 : 1);
template = template.replace('{{__next_page__}}', store.currentPage < store.endPage ? store.currentPage + 1 : store.currentPage);

위의 코드와 같이 템플릿을 작성해서 사용하게 되면, 장점과 단점이 존재한다.

템플릿을 사용할 시 UI 구조를 한 눈에 파악하기 쉽지만, 리스트 같은 경우 여전히 반복문을 통해서 따로 만들고 있고, 또한 {{__ABC__}} 처럼 마킹해서 replace를 사용하는 부분이 많아질 경우 마킹된 갯수만큼 해당 코드가 반복적으로 사용되어야한다.

제대로 된 템플릿을 만들기 위해서는 더욱 다양하고 정교한 기능들이 추가되어야 한다.

이미 시중에는 잘 만들어진 템플릿 라이브러리들이 존재하기 때문에 선정해서 사용해보고 공부하는 것을 추천한다.

해당 강좌에서는 handlebars라고 하는 템플릿 라이브러리를 주로 사용한다.

tailwind cdn

<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

font-awsome cdn

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R+E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />