React 30일 완성 로드맵의 첫 번째 단계입니다! React 개발 환경을 완벽하게 구축하여 앞으로의 학습을 위한 탄탄한 기반을 만들어보겠습니다. 단계별 실습을 통해 직접 따라하며 학습할 수 있도록 구성했습니다.

Day 1 학습 목표

완벽한 개발 환경 구축: React 개발에 필요한 모든 도구 설치 및 설정

Node.js부터 첫 React 앱 실행까지 완전한 개발 환경을 구축합니다.
각 단계마다 실습 예제와 함께 진행하여 확실하게 이해할 수 있습니다.

오늘 하루 투자하여 완벽한 React 개발 환경을 구축하면, 앞으로 29일간의 학습이 훨씬 수월해질 것입니다!

Day 1 학습 계획

  • 1단계: Node.js 및 npm 설치
  • 2단계: Create React App으로 첫 프로젝트 생성
  • 3단계: 코드 에디터 선택 및 설정 (VS Code, Cursor, Kiro)
  • 4단계: React Developer Tools 설치
  • 5단계: 프로젝트 구조 파악 및 첫 실행
  • 실습 과제: Hello React 앱 만들기

1단계: Node.js 및 npm 설치

Node.js란?

Node.js는 JavaScript를 브라우저 밖에서도 실행할 수 있게 해주는 런타임 환경입니다. React 개발에 필수적인 도구들이 Node.js 기반으로 만들어져 있어 반드시 설치해야 합니다.

설치 방법

공식 사이트에서 다운로드

  • 사이트 접속: nodejs.org
  • LTS 버전 선택: 안정적인 Long Term Support 버전 다운로드
  • 설치 실행: 다운로드한 파일을 실행하여 설치
  • 설치 확인: 터미널에서 버전 확인

설치 확인 실습

터미널에서 버전 확인

# Node.js 버전 확인
node --version
# 예상 출력: v22.17.1 (최신 LTS 버전)

# npm 버전 확인
npm --version
# 예상 출력: 10.9.0 (최신 버전)

체크포인트

  • Node.js 버전: v18.0.0 이상이면 OK (권장: v22.17.1 LTS)
  • npm 버전: 자동으로 함께 설치됨
  • 설치 위치: 시스템 PATH에 자동 등록

2단계: Create React App으로 첫 프로젝트 생성

Create React App이란?

Facebook에서 만든 React 프로젝트 생성 도구로, 복잡한 설정 없이 바로 React 개발을 시작할 수 있게 해줍니다. Webpack, Babel 등의 복잡한 설정이 모두 자동으로 처리됩니다.

첫 React 프로젝트 생성 실습

프로젝트 생성 명령어

# 새 React 프로젝트 생성 (원하는 프로젝트명으로 변경 가능)
npx create-react-app my-first-react-app

# 프로젝트 폴더로 이동
cd my-first-react-app

# 개발 서버 실행
npm start

프로젝트명 변경 예시

# 다양한 프로젝트명 예시
npx create-react-app todo-app
npx create-react-app my-blog
npx create-react-app portfolio-site
npx create-react-app react-practice

# 주의사항: 프로젝트명은 소문자, 숫자, 하이픈(-), 언더스코어(_)만 사용 가능

실행 결과 확인

성공적인 실행 화면

  • 브라우저 자동 실행: http://localhost:3000
  • React 로고: 회전하는 React 로고 표시
  • 환영 메시지: “Edit src/App.js and save to reload”
  • 개발 서버: 파일 변경 시 자동 새로고침

프로젝트 구조 이해

# 생성된 프로젝트 구조 (프로젝트명에 따라 폴더명 변경됨)
my-first-react-app/
├── public/          # 정적 파일들
│   ├── index.html     # 메인 HTML 파일
│   └── favicon.ico    # 파비콘
├── src/             # 소스 코드
│   ├── App.js         # 메인 컴포넌트
│   ├── App.css        # 스타일시트
│   ├── index.js       # 진입점
│   └── index.css      # 전역 스타일
├── package.json     # 프로젝트 설정
└── node_modules/    # 의존성 패키지들

3단계: 코드 에디터 선택 및 설정

React 개발을 위한 코드 에디터는 여러 선택지가 있습니다. 각각의 장단점을 비교해보고 자신에게 맞는 에디터를 선택하세요.

추천 에디터 비교

1. Visual Studio Code (VS Code)

  • 장점: 무료, 가장 인기 있는 에디터, 풍부한 확장 프로그램
  • 특징: Microsoft에서 개발, 오픈소스
  • 다운로드: code.visualstudio.com

2. Cursor (AI 기반 에디터) ⭐ 추천

  • 장점: AI 코드 자동완성, VS Code 기반으로 호환성 우수
  • 특징: ChatGPT 같은 AI가 내장되어 코딩 도움
  • 다운로드: cursor.sh
  • 추천 이유: React 학습 시 AI의 도움을 받을 수 있어 초보자에게 특히 유용

3. Kiro (통합 개발 환경) 🚀 최신

  • 장점: AI 어시스턴트 내장, 자동화된 개발 워크플로우
  • 특징: 개발부터 배포까지 통합 관리
  • 추천 이유: 프로젝트 전체 관리와 AI 도움을 동시에 받을 수 있음

VS Code 설정 (가장 일반적인 선택)

필수 확장 프로그램 설치

  • ES7+ React/Redux/React-Native snippets: React 코드 자동완성
  • Prettier – Code formatter: 코드 자동 정렬
  • Auto Rename Tag: HTML/JSX 태그 자동 수정
  • Bracket Pair Colorizer: 괄호 색상 구분
  • GitLens: Git 기능 강화

Cursor 설정 (AI 도움 받기)

Cursor 사용법

# Cursor에서 AI 도움 받기
1. Ctrl+K (AI 채팅 열기)
2. "React 컴포넌트 만들어줘" 라고 요청
3. Tab 키로 AI 제안 수락
4. Ctrl+L (코드 설명 요청)

확장 프로그램 설치 실습

VS Code/Cursor에서 설치 방법

# 확장 프로그램 설치
1. Ctrl+Shift+X (Extensions 패널 열기)
2. "ES7+ React" 검색
3. Install 버튼 클릭
4. 나머지 확장들도 동일하게 설치

4단계: React Developer Tools 설치

React Developer Tools란?

브라우저에서 React 컴포넌트를 디버깅할 수 있게 해주는 강력한 도구입니다. 컴포넌트 구조, props, state 등을 실시간으로 확인할 수 있습니다.

브라우저별 설치 방법

Chrome 브라우저

  • Chrome 웹 스토어: “React Developer Tools” 검색
  • 확장 프로그램 추가: “Chrome에 추가” 클릭
  • 설치 확인: 개발자 도구에 “Components”, “Profiler” 탭 생성

Firefox 브라우저

  • Firefox Add-ons: “React Developer Tools” 검색
  • 확장 기능 추가: “Firefox에 추가” 클릭
  • 설치 확인: F12 개발자 도구에서 React 탭 확인

사용법 실습

React DevTools 사용하기

# React 앱이 실행된 상태에서
1. F12 (개발자 도구 열기)
2. "Components" 탭 클릭
3. 컴포넌트 트리 확인
4. props와 state 실시간 확인

5단계: 프로젝트 구조 파악 및 첫 실행

핵심 파일들 이해하기

public/index.html

<!-- React 앱이 렌더링될 기본 HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>React App</title>
</head>
<body>
  <!-- React 앱이 여기에 렌더링됩니다 -->
  <div id="root"></div>
</body>
</html>

src/index.js

// React 앱의 진입점
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

// root 요소를 찾아서 React 앱을 렌더링
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

src/App.js

// 메인 컴포넌트
import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h1>Hello React!</h1>
        <p>React 개발 환경 설정 완료!</p>
      </header>
    </div>
  );
}

export default App;

실습 과제: Hello React 앱 만들기

과제 목표

기본 React 앱을 수정하여 나만의 첫 번째 React 앱을 만들어보겠습니다.

단계별 실습

1단계: App.js 수정

// src/App.js 파일을 다음과 같이 수정
import React from 'react';
import './App.css';

function App() {
  // 현재 날짜와 시간 가져오기
  const currentDate = new Date().toLocaleDateString();
  const currentTime = new Date().toLocaleTimeString();

  return (
    <div className="App">
      <header className="App-header">
        <h1>나의 첫 번째 React 앱</h1>
        <p>React 개발 환경 설정을 완료했습니다!</p>
        <div>
          <p>오늘 날짜: {currentDate}</p>
          <p>현재 시간: {currentTime}</p>
        </div>
        <p>
          React 30일 완성 로드맵 Day 1 - 개발 환경 설정
        </p>
      </header>
    </div>
  );
}

export default App;

2단계: 스타일 수정

/* src/App.css 파일에 추가 */
.App-header {
  background-color: #282c34;
  padding: 20px;
  color: white;
  text-align: center;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
}

.App-header h1 {
  color: #61dafb;
  margin-bottom: 20px;
}

.App-header p {
  margin: 10px 0;
  font-size: 18px;
}

3단계: 결과 확인

실행 및 확인

# 개발 서버가 실행 중이라면 자동으로 새로고침됩니다
# 실행 중이 아니라면:
npm start

# 브라우저에서 http://localhost:3000 확인

Day 1 학습 완료 체크리스트

완료해야 할 항목들

  • □ Node.js 설치: 버전 확인 완료
  • □ npm 설치: 버전 확인 완료
  • □ Create React App: 첫 프로젝트 생성 성공
  • □ 코드 에디터 선택: VS Code, Cursor, 또는 Kiro 중 선택
  • □ 에디터 확장: React 개발 확장들 설치
  • □ React DevTools: 브라우저 확장 설치
  • □ 프로젝트 구조: 파일들의 역할 이해
  • □ 실습 과제: Hello React 앱 완성

문제 해결

자주 발생하는 문제들

  • Node.js 설치 오류: 관리자 권한으로 실행
  • npm 명령어 인식 안됨: 시스템 재시작 후 재시도
  • 포트 3000 사용 중: 다른 포트 사용 (npm start 시 Y 입력)
  • 브라우저 자동 실행 안됨: 수동으로 localhost:3000 접속
  • create-react-app 실행 중 멈춤: npm cache clean –force 후 재시도
  • npm ERR! code EACCES: 권한 문제, sudo 사용 또는 npm 재설치
  • npm ERR! code ELIFECYCLE: node_modules 삭제 후 npm install 재실행

문제 해결 가이드

# 포트 3000이 이미 사용 중일 때
1. 다른 터미널/프로세스 확인
2. npm start 실행 시 다른 포트 제안에 Y 입력
3. 또는 PORT 환경변수 설정:

# Windows
set PORT=3001 && npm start

# macOS/Linux
PORT=3001 npm start

추가 팁과 트릭

개발 생산성 향상을 위한 팁

유용한 npm 명령어

# 개발 서버 실행
npm start

# 테스트 실행
npm test

# 프로덕션 빌드
npm run build

# 프로젝트 구성 설정 확인
npm run eject # 주의: 되돌릴 수 없음!

VS Code/Cursor/Kiro 단축키

React 개발 시 유용한 단축키

  • Ctrl+Space: 코드 자동 완성
  • Alt+Shift+F: 코드 자동 정렬
  • Ctrl+/: 주석 토글
  • Ctrl+D: 같은 단어 선택
  • F12: 정의로 이동
  • Alt+Z: 자동 줄바꿈

React 개발자 도구 활용법

React DevTools 고급 기능

  • 컴포넌트 검사: 요소 선택 후 Components 탭에서 확인
  • props 변경: 컴포넌트 선택 후 우측 패널에서 props 수정
  • state 모니터링: 컴포넌트의 state 변화 실시간 확인
  • 성능 프로파일링: Profiler 탭에서 렌더링 성능 분석

Pro Tip: Create React App으로 생성한 프로젝트는 Hot Module Replacement(HMR)가 기본 설정되어 있어, 코드 변경 시 전체 페이지를 새로고침하지 않고 변경된 부분만 업데이트됩니다. 이를 통해 개발 중 상태를 유지하며 빠르게 변경사항을 확인할 수 있습니다.

다음 단계 미리보기

Day 2 예고: JSX와 컴포넌트 기초

내일은 React의 핵심인 JSX 문법과 컴포넌트에 대해 학습합니다:

  • JSX 문법: JavaScript와 HTML의 결합
  • 함수형 컴포넌트: 모던 React의 기본
  • Props 전달: 컴포넌트 간 데이터 통신
  • 실습 프로젝트: 자기소개 카드 컴포넌트 제작

축하합니다!

React 개발 환경 설정을 완료했습니다. 이제 본격적인 React 학습을 시작할 준비가 되었습니다. 내일부터는 실제 React 코드를 작성하며 더욱 흥미진진한 학습이 시작됩니다!

추가 학습 자료

공식 문서

추천 개발 도구