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

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

 

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

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

 

https://fastcampus.info/4n8ztzq

 

 

아직 임파선염으로 턱이 붓고 열이나지만 재미있게 강의를 들을 수 있게 해주는 환급챌린지 최공!

 

14일차 공부 시작!

오늘 공부 시작 시간 (07.14 21:19)

 

오늘의 강의 주제는 '페이징 구현하기'이다.

 

학습 인증샷 - 1

 

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

 

오늘의 학습 내용

 

페이징 구현의 이해

* 페이징(Paging)

웹 애플리케이션에서 데이터가 많을 때 한 번에 모든 데이터를 보여주는 것은 비효율적이다. 사용자는 원하는 정보를 빠르게 찾기 어렵고, 서버와 클라이언트 모두에 부담이 된다. 이 문제를 해결하기 위해 데이터를 여러 페이지로 나누어 보여주는 방식을 페이징이라고 한다. 페이징을 통해 사용자는 필요한 정보에 더 쉽게 접근할 수 있고 시스템 자원도 효율적으로 사용할 수 있다.

* 페이징의 기본 동작 원리

페이징은 보통 다음과 같은 흐름으로 동작한다.

- 전체 데이터 중 일부만 화면에 보여준다.
- 사용자가 페이지 이동 버튼(이전, 다음 등)을 클릭하면, 해당 페이지에 맞는 데이터만 다시 불러와서 표시한다.
- 현재 사용자가 보고 있는 페이지 정보를 저장하고, 상세 페이지를 본 뒤에도 원래 페이지로 돌아올 수 있도록 한다.

이러한 구조는 사용자의 경험을 개선하고 데이터 처리 효율성을 높인다.

* 주요 코드

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

const store = {
  currentPage: 1,
};

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 = (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>
`);
container.innerHTML = newsList.join('')
}

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

function router() {
  const routePath = location.hash;

  if (routePath === '') {
    newsFeed();
  } else if (routePath.indexOf('#/page/') >= 0) {
    store.currentPage = Number(routePath.substr(7));
    newsFeed();
  } else {
    newsDetail();
  }
}

window.addEventListener('hashchange', router);

router();

 

 

* 코드에서의 페이징 구현 방식

이번 실습에서는 뉴스 목록을 10개씩 나누어 한 페이지에 보여주고, 페이지 이동 시 URL 해시를 활용하여 현재 페이지 상태를 유지한다. 주요 구현 요소는 다음과 같다.

- store 객체: 현재 페이지 번호를 저장한다. 이 값이 바뀌면 해당 페이지에 맞는 데이터를 보여준다.
- newsFeed 함수: 현재 페이지에 해당하는 뉴스 목록 10개만 화면에 렌더링한다. 페이지 이동 버튼을 통해 store.currentPage 값을 변경할 수 있다.
- router 함수: URL 해시(#/page/2 등)를 감지하여 현재 페이지를 결정하고 알맞은 함수를 호출한다. 이로써 사용자가 상세 페이지를 본 뒤에도 원래 보던 페이지로 돌아갈 수 있다.
- newsDetail 함수: 뉴스 상세 정보 페이지를 보여주며, '목록으로' 버튼을 통해 현재 페이지로 복귀할 수 있게 한다.

 

14강 수강 완료

 

오늘 공부 종료 시간 (07.14 23:00)

 

14강 강의 내용 정리 필기

 

학습 인증샷 - 2

마치며

 

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

 

이번 강의는 페이징 처리의 동작 원리를 구현을 통해 알아보는 내용이었다. 기초적으로 페이징이 어떤건지에 대해서 알 수 있는 챕터라서 처음 접하는 사람에게는 좋을 것 같다.

 

이 턱은 언제 나을지....