1강. 프론트엔드와 React의 역할

?1. 이번 강의에서 해결할 문제

게임 출시 정보를 보여 주는 화면을 순수 DOM 조작으로 계속 확장하면 데이터와 화면 코드가 빠르게 얽힙니다. 이번 강의에서는 우리가 만들 대시보드의 범위를 정하고 React가 어떤 문제를 맡는지 확인합니다.

✓2. 학습 목표

• 프론트엔드, 백엔드, API의 경계를 설명한다.
• React의 선언형 UI와 컴포넌트 개념을 설명한다.
• 24강 동안 확장할 프로젝트의 완성 모습을 그린다.

◇3. 핵심 개념

프론트엔드는 브라우저에서 사용자가 보고 조작하는 영역입니다. 서버가 제공한 데이터를 가져오고, 현재 상태에 맞는 HTML을 만들며, 입력에 반응합니다. API는 프론트엔드와 서버가 데이터를 주고받는 약속입니다.

React에서는 “요소를 어떻게 하나씩 바꿀까?”보다 “현재 데이터라면 화면은 무엇이어야 할까?”를 코드로 표현합니다. UI를 작은 컴포넌트로 나누면 카드, 검색창, 상태 메시지를 독립적으로 수정하고 재사용할 수 있습니다.

이번 과정의 연속 실습 프로젝트 이름은 game-release-dashboard입니다. 출시 예정 게임을 검색하고 플랫폼별로 걸러 보며, 랭킹과 상세 페이지까지 제공하는 반응형 앱으로 확장합니다.

</>4. 단계별 코드 예시

아직 프로젝트를 만들기 전이므로 React가 만들 화면을 함수로 미리 표현해 봅니다.

파일 경로: 설계 메모(아직 생성하지 않음)/GameCard.tsx

function GameCard() {
  return (
    <article>
      <p>2026년 9월 18일</p>
      <h2>Star Harbor</h2>
      <p>PC · 탐험</p>
    </article>
  );
}

화면을 세 부분으로 나눌 수 있습니다.

App
├─ Header
├─ FilterBar
└─ GameList
   └─ GameCard

→5. 코드가 동작하는 이유

React 컴포넌트는 JSX를 반환하는 함수입니다. JSX는 HTML과 비슷하지만 JavaScript 안에서 UI 구조를 표현하는 문법입니다. 나중에 데이터가 바뀌면 React가 컴포넌트를 다시 계산하고 실제 DOM에 필요한 변경만 반영합니다.

!6. 자주 하는 실수와 해결법

• React가 HTML을 대체한다고 생각함: 최종 결과는 여전히 HTML, CSS, JavaScript입니다. 기존 웹 기초가 그대로 사용됩니다.
• 모든 것을 컴포넌트로 쪼갬: 이름 붙일 책임이 있거나 재사용·독립 수정할 가치가 있을 때 분리합니다.
• React가 API나 데이터베이스라고 생각함: React는 UI 라이브러리입니다. 서버 통신은 fetch 같은 Web API가 담당합니다.

✎7. 직접 실습

종이에 최종 대시보드 화면을 그리고 Header, FilterBar, GameList, GameCard 영역을 표시하세요. 각 영역이 받을 데이터와 사용자가 할 행동을 한 줄씩 적으세요.

?8. 이해 점검 질문 3개

1. 프론트엔드와 API는 각각 어떤 책임을 가지나요?
2. 명령형 DOM 조작과 React의 선언형 UI는 질문의 출발점이 어떻게 다른가요?
3. GameCard를 컴포넌트로 분리하면 어떤 변경이 쉬워지나요?

■9. 핵심 요약

React는 상태를 UI로 표현하고 화면을 컴포넌트 단위로 관리하게 돕습니다. 앞으로 하나의 게임 출시 정보·랭킹 대시보드를 강의마다 확장합니다.