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

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

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

✓2. 학습 목표

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

◇3. 핵심 개념

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

먼저 구분할 용어

용어	맡는 일	게임 출시 대시보드 예
프론트엔드	사용자가 보는 화면과 입력 처리	검색창, 게임 카드, 로딩 메시지
백엔드	신뢰해야 할 규칙과 데이터 처리	출시작 조회, 사용자 권한 확인
API	두 프로그램이 요청·응답을 주고받는 약속	GET /games가 JSON 목록을 반환
DOM	브라우저가 HTML을 객체 구조로 표현한 것	카드의 article, 제목의 h2
컴포넌트	한 가지 UI 책임을 맡는 재사용 가능한 단위	GameCard, FilterBar
상태(state)	현재 화면을 결정하는 바뀔 수 있는 데이터	선택한 플랫폼, 검색어

프론트엔드는 서버가 보낸 값을 그대로 믿고 저장 규칙을 결정하는 계층이 아닙니다. 입력을 빠르게 확인해 사용자에게 알려 줄 수는 있지만 점수·권한처럼 신뢰가 필요한 판정은 백엔드가 다시 검사해야 합니다.

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

예를 들어 검색 결과가 0개라면 명령형 코드는 기존 목록을 비우고 메시지 요소를 만든 뒤 어느 위치에 붙일지 차례로 지시합니다. React에서는 games.length === 0일 때 빈 결과 UI를 반환한다고 선언합니다. 데이터가 달라지면 React가 실제 DOM에 필요한 변경을 계산합니다.

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

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

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

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

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

가장 작은 컴포넌트 읽기

1. function GameCard()는 GameCard라는 UI 단위를 선언합니다. 대문자로 시작해 일반 HTML 태그와 구분합니다.
2. return (...) 안의 JSX가 이 컴포넌트가 보여 줄 구조입니다.
3. article은 독립된 게임 정보 카드이고 h2는 그 카드의 제목입니다.
4. 현재 값은 코드에 고정되어 있으므로 같은 컴포넌트를 여러 번 사용해도 모두 Star Harbor를 표시합니다. 이후 props로 서로 다른 데이터를 전달합니다.

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

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

예상 화면과 데이터 흐름

현재 GameCard 하나를 화면에 배치하면 다음 정보가 위에서 아래로 보입니다.

2026년 9월 18일
Star Harbor
PC · 탐험

완성 과정의 흐름은 API의 게임 데이터 → App의 상태 → GameList의 목록 → 각 GameCard의 화면 순서입니다. 사용자가 플랫폼 필터를 바꾸면 원본 DOM을 직접 찾아 지우는 대신 상태가 바뀌고, 그 상태에 맞는 목록이 다시 계산됩니다.

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

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

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

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

✎7. 직접 실습

실습 목표

최종 대시보드 화면을 컴포넌트 책임과 데이터 흐름으로 나눕니다.

시작 전 상태

아직 React 프로젝트를 만들지 않습니다. 종이 또는 game-release-dashboard-plan.md 파일을 준비하고, 게임 제목·출시일·플랫폼이 있는 카드 두 개를 그립니다.

1단계: 따라 하기

화면을 Header, FilterBar, GameList, GameCard 영역으로 나눕니다. 각 영역 옆에 표시할 데이터와 사용자가 할 행동을 한 줄씩 적습니다.

2단계: 바꿔 보기

검색 결과가 없거나 API가 로딩 중인 상황을 추가합니다. 카드만으로 표현할 수 없는 상태를 어느 컴포넌트가 맡을지 비교합니다.

3단계: 직접 적용

게임 즐겨찾기 기능을 추가한다고 가정하고 상태를 둘 위치를 정합니다. 여러 카드가 함께 사용하는 정보인지 한 카드만 사용하는 정보인지 근거를 적습니다.

4단계: 스스로 확인

• 컴포넌트마다 한 문장으로 책임을 설명할 수 있나요?
• 데이터가 API에서 카드까지 어느 방향으로 흐르는지 화살표로 그렸나요?
• 클릭 결과처럼 바뀌는 값과 게임 제목처럼 전달받는 값을 구분했나요?

막혔을 때

• 영역을 너무 잘게 나눔: 이름 붙일 독립 책임이나 재사용 이유가 없는 div는 그대로 둡니다.
• React가 저장소처럼 보임: 새로고침 뒤에도 유지해야 하는 데이터는 서버나 브라우저 저장소가 필요하다고 표시합니다.
• 화면과 데이터가 연결되지 않음: 각 텍스트 옆에 그 값을 제공할 컴포넌트나 API 응답 필드를 적습니다.

?8. 이해 점검 질문 3개

1. 프론트엔드와 API는 각각 어떤 책임을 가지나요?
2. 게임 필터 결과가 0개가 되었을 때 명령형 DOM 조작과 React의 선언형 UI는 각각 어떤 질문에서 시작하나요?
3. GameCard를 컴포넌트로 분리하면 어떤 변경이 쉬워지나요?

■9. 핵심 요약

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

§다음 강의 연결

다음 강의에서는 설계한 컴포넌트를 실제로 실행할 Vite 프로젝트를 만듭니다. 2강. Vite 개발 환경에서 Node.js, 개발 서버, 빌드 도구의 역할을 확인합니다.