1장. React 개요와 개발 환경 구축 | Notion

1. React 개요

React는 웹 애플리케이션 개발을 위한 프런트엔드 프레임워크
SPA(Single Page Application) 개발을 위한 프레임워크 중 가장 인기 있음
최신 ECMAScript 기반으로 React Native를 이용해 모바일 앱, Next.js 개발 가능

2. React 주요 특징

컴포넌트(Component) 단위의 독립적 코드 구성 → 빠르고 효율적인 화면 구성 가능
Virtual DOM 사용 → 최소한의 렌더링으로 성능 최적화
JSX(JavaScript XML) 템플릿 언어 사용

3. 웹팩과 번들러

Webpack: 대표적인 프런트엔드 모듈 번들러
번들러는 웹 애플리케이션 자원을 브라우저가 해석 가능한 정적 파일로 변환
React에서 사용하는 주요 번들러: Webpack, Rollup, Vite

4. React 개발 환경 구축

필수 도구 및 설명

도구명	설명
Node.js	Chrome V8 JavaScript 엔진 기반 런타임 환경, 프론트엔드와 백엔드 모두 개발 가능
NPM	Node Package Manager, React 및 관련 라이브러리 설치에 사용
Babel	최신 JS 문법을 하위 버전으로 변환하는 트랜스컴파일러
VSCode	Microsoft의 무료 코드 편집기, 다양한 개발 플러그인 제공
React Snippet	VSCode 플러그인, React 코드 자동완성
ESLint	JS 및 JSX 문법의 정적 분석 도구
Prettier	코드 스타일을 일관되게 유지하는 포매터
React Developer Tools	크롬 확장 플러그인, React 디버깅 도구

Vite + React 프로젝트 생성 과정