디자인을 입힌다는건 마크업구조가 복잡해진다는 점을 말한다.
마크업이 복잡해지면 코드도 복잡해질 수 밖에 없다.

그렇다고 코드의 양이 늘어난다고해서 복잡도가 늘어나면 안된다.
양이 늘어나더라도 복잡도가 늘어나지 않는 방식의 코드가 좋은 코드다.

복잡도를 줄이기위한 대표적인 방법으로 "템플릿"이 있다.

템플릿 만들기

코드의 복잡도를 줄이기위해 템플릿을 만들고 기존코드를 대체한다.

템플릿 이란?

"틀"을 의미한다.
금속제품을 만들때 금형이라는 틀을 만들고 그 위에 쇳물을 부어 만들듯이, 우리도 틀을 만들고 그 안에 데이터를 부어 비슷한형태의 화면구성품을 만든다.

AS-IS

function newsFeed() {
  const newsFeed = getData(NEWS_URL);
  const newsList = [];

  newsList.push("<ul>");

  for (let i = (store.currentPage - 1) * 10; i < store.currentPage * 10; i++) {
    newsList.push(`
      <li>
        <a href="#/show/${newsFeed[i].id}">
          ${newsFeed[i].title}(${newsFeed[i].comments_count})
        </a>
      </li>
    `);
  }

  newsList.push("</ul>");
  newsList.push(`
    <div>
      <a href="#/page/${
        store.currentPage > 1 ? store.currentPage - 1 : 1
      }">이전 페이지</a>
      <a href="#/page/${store.currentPage + 1}">다음 페이지</a>
    </div>
  `);
  containerEl.innerHTML = newsList.join("");
}

TO-BE

여러 문자열로 나뉘어져있던, 다시말해 한눈에 파악하기 힘들었던 UI의 구조가 쉽게 파악된다.
마치 이전 DOM API를 문자열로 바꿨던 리펙토링효과와 비슷하다.

또한 데이터가 들어갈 위치까지 마킹을 통해 명확히 알 수 있다.

로직코드와 UI의 성격이 다르기때문에 관심사를 분리해두는게 복잡도를 줄일 수 있다.

function newsFeed() {
  const newsFeed = getData(NEWS_URL);
  const newsList = [];

  let template = `
    <div>
      <h1>Hacker News</h1>
      <ul>
        {{__news_feed__}}
      </ul>
      <div>
        <a href="#/page/{{__prev_page__}}">이전 페이지</a>
        <a href="#/page/{{__next_page__}}">다음 페이지</a>
      </div>
    </div>
  `;

  for (let i = (store.currentPage - 1) * 10; i < store.currentPage * 10; i++) {
    newsList.push(`
      <li>
        <a href="#/show/${newsFeed[i].id}">
          ${newsFeed[i].title}(${newsFeed[i].comments_count})
        </a>
      </li>
    `);
  }

  template.replace("{{__news_feed__}}", newsList.join(""));
  template.replace(
    "{{__prev_page__}}}",
    store.currentPage > 1 ? store.currentPage - 1 : 1
  );
  template.replace("{{__next_page__}}}", store.currentPage + 1);

  container.innerHTML = template;
}

tailwindcss 적용

1. tailwindcss를 import
   가장 간단한 CDN 방식으로 가져온다.

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

2. 간단한 스타일 적용해보기
   tailwind는 class 이름을 주는 방식으로 UI를 만들어간다.
   class 이름마다 스타일을 정의해놓고, 클래스명을통해 일관되게 스타일을 적용하는 방식을 취한다.

ex)

• padding: 4px -> class="p-4"
• margin: 0 auto -> class="mx-auto"

//...
let template = `
    <div class="container mx-auto my-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>
  `;
//...