패스트캠퍼스 환급챌린지 13일차: '김민태의 프론트엔드 아카데미 - 제 1강 JavaScript & TypeScript Essential' 강의 후기

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다

 

패스트캠퍼스 환급챌린지란?

(~6/20) 50일의 기적 AI 환급반💫 | 패스트캠퍼스

https://fastcampus.info/4n8ztzq

 

 

 

여전히 임파선염으로 턱이 부어서 힘들지만 재미있게 강의를 들을 수 있게 해주는 환급챌린지 최공!

 

13일차 공부 시작!

오늘 공부 시작 시간 (07.13 15:20)

 

오늘의 강의 주제는 '라우터? 화면 처리기 만들기'이다.

학습 인증샷 - 1

 

(오늘도 마찬가지로 모자이크 처리..)

 

오늘의 학습 내용

 

단일 화면 전환 구조 설계와 라우터 구현

 

* 단일 화면 전환 구조의 필요성

웹 애플리케이션을 개발할 때, 한 번에 하나의 화면만 보여주는 구조를 만드는 것은 사용자 경험을 간결하게 만들고 코드의 복잡도를 낮추는 데 효과적이다. 실습 프로젝트에서는 목록 화면과 글 내용 화면 두 가지로만 구성하여 사용자가 한 번에 하나의 화면만 볼 수 있도록 설계했다. 이 구조는 SPA(Single Page Application)의 기본적인 개념과 일맥상통한다.

* DOM API 최소화 및 문자열 조합

기존에는 DOM API를 직접 사용하고 리팩토링하여 DOM API 요소를 줄이긴 했으나, 이번에는 DOM API 조작을 없애버리고 HTML 문자열을 조합하여 한 번에 화면을 그리는 방식을 채택했다. 이를 위해 배열의 각 요소(HTML 조각)를 하나의 문자열로 합치는 join 메서드를 활용했다.

- join() 메서드는 배열의 모든 요소를 하나의 문자열로 합쳐 반환한다.
- 기본적으로 쉼표(,)가 구분자로 들어가지만, join('')처럼 빈 문자열을 인자로 주면 구분자 없이 합쳐진다.
- 이 방식은 반복문을 통해 HTML 조각을 배열에 넣고, 마지막에 한 번만 DOM에 삽입하므로 성능상 이점이 있다.

* 해시 기반 라우터 구현

화면 전환 기능을 구현하기 위해 라우터(router)를 직접 작성했다. 라우터는 사용자의 동작(해시 변경)에 따라 현재 보여줄 화면을 결정하고, 그에 맞는 함수를 호출한다.

- location.hash를 이용해 해시 값이 바뀔 때마다 라우터가 동작한다.
- 해시가 비어 있으면 목록 화면(newsFeed), 값이 있으면 글 내용 화면(newsDetail)을 보여준다.
- 해시 변경 이벤트(hashchange)를 감지하여 라우터를 호출한다.
- 라우터는 일종의 중계기 역할을 하며 여러 화면이 있을 때 각 화면으로의 전환을 담당한다.

* 주요 코드 설명

const container = document.getElementById('root');
const ajax = new XMLHttpRequest();
const NEWS_URL = 'https://api.hnpwa.com/v0/news/1.json';
const CONTENT_URL = 'https://api.hnpwa.com/v0/item/@id.json';

function getData(url) {
  ajax.open('GET', url, false);
  ajax.send();
  return JSON.parse(ajax.response);
};

function newsFeed() {
  const newsFeed = getData(NEWS_URL);
  const newsList = [];
  newsList.push('<ul>');
  for (let i = 0; i < 10; i++) {
    newsList.push(`
      <li>
        <a href="#${newsFeed[i].id}">
          ${newsFeed[i].title} (${newsFeed[i].comments_count})
        </a>
      </li>
    `);
  } 
  newsList.push('</ul>');
  container.innerHTML = newsList.join('');
}

function newsDetail() {
  const id = location.hash.substr(1);
  const newsContent = getData(CONTENT_URL.replace('@id', id));
  container.innerHTML = `
    <h1>${newsContent.title}</h1>
    <div>
      <a href="#">목록으로</a>
    </div>
  `;
}

function router() {
  const routePath = location.hash;
  if (routePath === '') {
    newsFeed();
  } else {
    newsDetail();
  }
}

window.addEventListener('hashchange', router);
router();

 

 

13강 수강 완료

 

오늘 공부 종료 시간 (07.13 15:48)

 

13강 강의 내용 정리 필기

 

 

학습 인증샷 - 2

마치며

 

오늘도 환급 챌린지 13강 공부 완료!!

 

이번 강의에서는 단일 화면 전환 구조와 해시 기반 라우터를 직접 구현하며 DOM 조작을 최소화하고 문자열 조합을 활용하는 방법에 대한 것이 주된 내용이었다. 해시 기반으로 전환하는 것과 라우터에 대한 내용을 오랜만에 들을 수 있어서 좋았다.