3-7 템플릿 사용하기

우리는 지금 마크업을 코드로 진행하고있다.
그러므로 마크업 구조가 불편해지는 템플릿의 특성상 코드가 복잡해지는데
복잡도는 늘어나지 않고 양만 늘어날 수 있게 코드를 수정해야한다.

템플릿이란?

문자열 안에 마킹해놓고 마킹해놓은 정보를 가지고 필요한 순간에 코드로 바꿔치기 하는 방식을 우리가 진행했었는데, 예를 들어 @id 같은 영역을 바꿔치기하는것이다.
우리는 지금 배열을 만들고 배열에 코드들을 집어넣어 놓은 상태로 만들어놨다.
그리고 이것을 마지막에 합쳐서 html에 적용하는 방식인데, 이 방법의 경우 DOM api보다는 마크업의 구조를 파악하기는 쉽지만 결국 내용이 분산되어있어서 복잡해지면 마크업(UI)의 구조가 이해하기 어려워진다.

그래서 배열을 안쓰거나 최소한으로 사용해서 해결할 수 있는 방법을 고려해야한다.

문자열로 하나의 형식을 만들어놓고 내용물만 조금씩 바꿔주는 방법이 좋은데, 이것이 템플릿 방식이다.

<div>
      <h1>Hacker News</h1>
      <ul>
          {{__news_feed__}}
      </ul>
    </div>
    <div>
    <a href="#/page/{{__prev_page__}}">.....

중요한건 다른 페이지에서 쓸것같지 않은 형태의 텍스트여야한다는것이다.
다만 일관성 있게만 이름을 지어준다면 괜찮다.

이제, 탬플릿의 기초 작업을 시작할것이다.

tailwindcss 페이지

npm을 사용해서 install 하는 방식이 있고, cdn을 사용해link 태그를 사용하는 방식이 있는데 어떤 방식으로든 가져올 수 있다.

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

그리고 연관되는 클래스 이름들을 잘 지어주면 정상적으로 스타일이 적용된다.
우리는 지금 JS를 공부하기 위해서 개발중이므로 설명은 넘어간다.