프론트엔드 노트

프론트엔드 개발을 시작하면서, React와 TypeScript를 사용하여 나만의 스코어보드 앱을 개발한 경험담을 공유하고자 합니다. 이 프로젝트는 프론트엔드 기술을 다지는 좋은 기회가 되었고, 여러 가지 유용한 기술들을 익히는 계기가 되었습니다.

프로젝트 개요

스코어보드 앱은 간단한 점수 기록 및 관리 기능을 제공하는 웹 애플리케이션입니다. 사용자들은 팀 이름과 점수를 입력하고, 이를 기반으로 점수를 업데이트할 수 있습니다. 이 앱을 통해 React의 상태 관리와 TypeScript의 타입 안정성을 체험할 수 있었습니다.

개발 환경 설정

먼저, 프로젝트의 기본 환경을 설정합니다. Create React App을 사용하여 TypeScript 지원으로 프로젝트를 초기화했습니다.

npx create-react-app scoreboard-app --template typescript

이 명령어를 통해 TypeScript가 설정된 React 앱이 생성됩니다.

앱 구조 설계

앱의 기본 구조는 다음과 같이 설정했습니다.

App.tsx: 메인 컴포넌트
Scoreboard.tsx: 스코어보드 컴포넌트
Team.tsx: 각 팀의 점수를 표시하는 컴포넌트

App.tsx

메인 컴포넌트인 App.tsx에서 스코어보드의 상태를 관리합니다.

import React, { useState } from 'react';
import Scoreboard from './Scoreboard';

interface Team {
  name: string;
  score: number;
}

const App: React.FC = () => {
  const [teams, setTeams] = useState<Team[]>([
    { name: '팀 A', score: 0 },
    { name: '팀 B', score: 0 },
  ]);

  const updateScore = (teamIndex: number, newScore: number) => {
    const updatedTeams = [...teams];
    updatedTeams[teamIndex].score = newScore;
    setTeams(updatedTeams);
  };

  return (
    <div>
      <h1>스코어보드</h1>
      <Scoreboard teams={teams} updateScore={updateScore} />
    </div>
  );
};

export default App;

Scoreboard.tsx

Scoreboard 컴포넌트는 팀 목록을 표시하고, 점수를 업데이트하는 기능을 제공합니다.

import React from 'react';
import Team from './Team';

interface TeamProps {
  teams: { name: string; score: number }[];
  updateScore: (teamIndex: number, newScore: number) => void;
}

const Scoreboard: React.FC<TeamProps> = ({ teams, updateScore }) => {
  return (
    <div>
      {teams.map((team, index) => (
        <Team key={index} team={team} index={index} updateScore={updateScore} />
      ))}
    </div>
  );
};

export default Scoreboard;

Team.tsx

각 팀의 점수를 표시하고 업데이트할 수 있는 컴포넌트입니다.

import React, { useState } from 'react';

interface TeamProps {
  team: { name: string; score: number };
  index: number;
  updateScore: (teamIndex: number, newScore: number) => void;
}

const Team: React.FC<TeamProps> = ({ team, index, updateScore }) => {
  const [inputScore, setInputScore] = useState<number>(team.score);

  const handleScoreChange = () => {
    updateScore(index, inputScore);
  };

  return (
    <div>
      <h2>{team.name}</h2>
      <p>점수: {team.score}</p>
      <input
        type="number"
        value={inputScore}
        onChange={(e) => setInputScore(Number(e.target.value))}
      />
      <button onClick={handleScoreChange}>점수 업데이트</button>
    </div>
  );
};

export default Team;

TypeScript의 장점

TypeScript를 사용함으로써 얻은 주요 이점은 코드의 안정성과 유지보수 용이성입니다. 컴포넌트의 props에 대한 타입을 명시적으로 정의함으로써, 잘못된 데이터 처리로 인한 오류를 사전에 방지할 수 있었습니다. 예를 들어, Team.tsx에서 팀의 데이터 타입을 명확히 정의하여, 예상치 못한 데이터가 전달되는 것을 방지했습니다.

마무리

React와 TypeScript로 개발한 스코어보드 앱은 프론트엔드 기술을 배우는 데 유익한 경험이었습니다. 이 프로젝트를 통해 상태 관리, 컴포넌트 구조 설계, 그리고 타입스크립트의 이점을 실감할 수 있었습니다. 앞으로도 이러한 경험을 바탕으로 더 많은 프로젝트에 도전하고, 다양한 기술을 익혀 나가고 싶습니다.

React와 TypeScript로 구성한 나만의 스코어보드 앱 개발 경험담