react-guide는 React를 처음 배우는 개발자를 위한 가이드입니다. 이 가이드는 기본적인 React 개념부터 시작하여 점진적으로 더 복잡한 주제로 진행됩니다.
- node: v20.17.0
- npm: v10.8.2
각 예제는 React의 특정 개념을 학습할 수 있도록 설계되었습니다:
- example-01: Hello World - React 컴포넌트의 기본 구조
- example-02: Functional Component and Classical Component - 함수형과 클래스형 컴포넌트 비교
- example-03: Props and State - props와 state의 사용법
- example-04: Handling Events 1 - 이벤트 처리 기본
- example-05: Handling Events 2 (Input) - 입력 이벤트 처리
- example-06: Re-use Components - 컴포넌트 재사용
- example-07: Pages - 페이지 구조
- example-08: Simple Backend, Frontend - 백엔드와 프론트엔드 연동
- example-09: Conditional Rendering - 조건부 렌더링
- example-10: Lists and Keys - 리스트와 키 사용법
- example-11: Form - 폼 처리
- example-12: Lifting State Up - 상태 끌어올리기
- example-13: Routing - 라우팅
- example-14: Storage and Cookies - 로컬 스토리지와 쿠키
- example-15: Node.js, JWT - JWT 인증
- example-16: Node.js, Express, JWT, Cookie - Express와 JWT
- example-17: react, JWT, Cookie - React에서 JWT 사용
- example-18: Node.js, JWT, Token - 토큰 기반 인증
- example-19: react, JWT, Token - React에서 토큰 사용
- example-20: Node.js, CRUD - CRUD 작업
- example-21: Node.js, JWT, CRUD - JWT와 CRUD
- example-22: react, JWT, CRUD - React에서 CRUD
- example-23: Typescript 1 - TypeScript 기본
- example-24: Typescript 2 - TypeScript 고급 기능
- 이 저장소를 클론합니다:
git clone https://github.com/ianolpx/react-guide.git
- 프로젝트 디렉토리로 이동합니다:
cd react-guide - 필요한 패키지를 설치합니다:
yarn install
프로젝트를 실행하려면 다음 명령어를 사용하세요:
yarn start브라우저에서 http://localhost:3000으로 이동하여 애플리케이션을 확인할 수 있습니다.
- 순서대로 학습: example-01부터 시작하여 순차적으로 학습하는 것을 권장합니다.
- 코드 분석: 각 예제의 주석을 읽고 코드의 동작을 이해하세요.
- 실습: 코드를 수정해보고 결과를 확인해보세요.
- 확장: 배운 개념을 바탕으로 새로운 기능을 추가해보세요.
- 컴포넌트: React의 기본 구성 요소
- Props: 부모에서 자식으로 데이터 전달
- State: 컴포넌트 내부 상태 관리
- Hooks: 함수형 컴포넌트에서 상태 관리
- 이벤트 처리: 사용자 상호작용 처리
- 조건부 렌더링: 조건에 따른 UI 변경
- 라우팅: 페이지 간 이동
- API 연동: 백엔드와의 통신
- 인증: JWT를 사용한 사용자 인증
- TypeScript: 타입 안전성 확보
기여하고 싶으시다면 이 저장소를 포크하고 풀 리퀘스트를 제출해주세요. 버그 리포트와 기능 제안도 환영합니다!
이 프로젝트는 MIT 라이선스 하에 있습니다.