onebite-react-v2
onebite-react-v2 copied to clipboard
winterlood
onebite-react-v2
onebite-react-v2
섹션별 코드
1섹션 "JavaScript 기초"
| 챕터번호 | 챕터이름 | 코드 |
|---|---|---|
| 1.1 | 안녕, 자바스크립트 | |
| 1.2 | VsCode 설치하기 | |
| 1.3 | 자바스크립트 실습 환경 설정하기 | https://github.com/winterlood/onebite-react-v2/blob/main/section01/chapter03.js |
| 1.4 | 변수와 상수 | https://github.com/winterlood/onebite-react-v2/blob/main/section01/chapter04.js |
| 1.5 | 자료형(타입) | https://github.com/winterlood/onebite-react-v2/blob/main/section01/chapter05.js |
| 1.6 | 형 변환 | https://github.com/winterlood/onebite-react-v2/blob/main/section01/chapter06.js |
| 1.7 | 연산자 1 | https://github.com/winterlood/onebite-react-v2/blob/main/section01/chapter07.js |
| 1.8 | 연산자 2 | https://github.com/winterlood/onebite-react-v2/blob/main/section01/chapter08.js |
| 1.9 | 조건문 | https://github.com/winterlood/onebite-react-v2/blob/main/section01/chapter09.js |
| 1.10 | 반복문 | https://github.com/winterlood/onebite-react-v2/blob/main/section01/chapter10.js |
| 1.11 | 함수 | https://github.com/winterlood/onebite-react-v2/blob/main/section01/chapter11.js |
| 1.12 | 함수 표현식과 화살표 함수 | https://github.com/winterlood/onebite-react-v2/blob/main/section01/chapter12.js |
| 1.13 | 콜백함수 | https://github.com/winterlood/onebite-react-v2/blob/main/section01/chapter13.js |
| 1.14 | 스코프 | https://github.com/winterlood/onebite-react-v2/blob/main/section01/chapter14.js |
| 1.15 | 객체 1 | https://github.com/winterlood/onebite-react-v2/blob/main/section01/chapter15.js |
| 1.16 | 객체 2 | https://github.com/winterlood/onebite-react-v2/blob/main/section01/chapter16.js |
| 1.17 | 배열 | https://github.com/winterlood/onebite-react-v2/blob/main/section01/chapter17.js |
2섹션 "JavaScript심화"
| 챕터번호 | 챕터이름 | 코드 |
|---|---|---|
| 2.1 | truthy & falsy | https://github.com/winterlood/onebite-react-v2/blob/main/section02/chapter01.js |
| 2.2 | 단락 평가 | https://github.com/winterlood/onebite-react-v2/blob/main/section02/chapter02.js |
| 2.3 | 구조 분해 할당 | https://github.com/winterlood/onebite-react-v2/blob/main/section02/chapter03.js |
| 2.4 | Spread 연산자와 Rest 매개변수 | https://github.com/winterlood/onebite-react-v2/blob/main/section02/chapter04.js |
| 2.5 | 원시 타입과 객체 타입 차이 | https://github.com/winterlood/onebite-react-v2/blob/main/section02/chapter05.js |
| 2.6 | 반복문으로 배열과 객체 순회하기 | https://github.com/winterlood/onebite-react-v2/blob/main/section02/chapter06.js |
| 2.7 | 배열 메서드 1 - 요소 조작 | https://github.com/winterlood/onebite-react-v2/blob/main/section02/chapter07.js |
| 2.8 | 배열 메서드 2 - 순회와 탐색 | https://github.com/winterlood/onebite-react-v2/blob/main/section02/chapter08.js |
| 2.9 | 배열 메서드 3 - 배열 변형 | https://github.com/winterlood/onebite-react-v2/blob/main/section02/chapter09.js |
| 2.10 | Date 객체와 날짜 | https://github.com/winterlood/onebite-react-v2/blob/main/section02/chapter10.js |
| 2.11 | 동기와 비동기 | https://github.com/winterlood/onebite-react-v2/blob/main/section02/chapter11.js |
| 2.12 | 비동기 작업 처리하기 1 - 콜백함수 | https://github.com/winterlood/onebite-react-v2/blob/main/section02/chapter12.js |
| 2.13 | 비동기 작업 처리하기 2 - Promise | https://github.com/winterlood/onebite-react-v2/blob/main/section02/chapter13.js |
| 2.14 | 비동기 작업 처리하기 3 - Async/Await | https://github.com/winterlood/onebite-react-v2/blob/main/section02/chapter14.js |
3섹션 "Node.js 기초"
| 챕터번호 | 챕터이름 | 코드 |
|---|---|---|
| 3.1 | Node.js를 소개합니다. | |
| 3.2 | Node.js 설치하기 | |
| 3.3 | Node.js 사용하기(with 패키지) | https://github.com/winterlood/onebite-react-v2/tree/main/section03/chapter3 |
| 3.4 | Node.js 모듈 시스템 이해하기 | https://github.com/winterlood/onebite-react-v2/tree/main/section03/chapter4 |
| 3.5 | Node.js 라이브러리 사용하기 | https://github.com/winterlood/onebite-react-v2/tree/main/section03/chapter5 |
4섹션 "React.js 개론"
| 챕터번호 | 챕터이름 | 코드 |
|---|---|---|
| 4.1 | React.js를 소개합니다 | |
| 4.2 | 첫 React App 생성하기 | https://github.com/winterlood/onebite-react-v2/tree/main/section04 |
| 4.3 | React App 구동 원리 살펴보기 | https://github.com/winterlood/onebite-react-v2/tree/main/section04 |
5섹션 "React.js 입문"
| 챕터번호 | 챕터이름 | 코드 |
|---|---|---|
| 5.1 | 실습 준비하기 | https://github.com/winterlood/onebite-react-v2/tree/main/section05/chapter1 |
| 5.2 | React 컴포넌트 | https://github.com/winterlood/onebite-react-v2/tree/main/section05/chapter2 |
| 5.3 | JSX - UI 표현하기 | https://github.com/winterlood/onebite-react-v2/tree/main/section05/chapter3 |
| 5.4 | Props : 컴포넌트에 값 전달하기 | https://github.com/winterlood/onebite-react-v2/tree/main/section05/chapter4 |
| 5.5 | 이벤트 처리하기 | https://github.com/winterlood/onebite-react-v2/tree/main/section05/chapter5 |
| 5.6 | State - 상태 관리하기 | https://github.com/winterlood/onebite-react-v2/tree/main/section05/chapter6 |
| 5.7 | State와 Props | https://github.com/winterlood/onebite-react-v2/tree/main/section05/chapter7 |
| 5.8 | State로 사용자 입력 관리하기 1 | https://github.com/winterlood/onebite-react-v2/tree/main/section05/chapter8 |
| 5.9 | State로 사용자 입력 관리하기 2 | https://github.com/winterlood/onebite-react-v2/tree/main/section05/chapter9 |
| 5.10 | useRef - 컴포넌트의 변수 생성하기 | https://github.com/winterlood/onebite-react-v2/tree/main/section05/chapter10 |
| 5.11 | React Hooks | https://github.com/winterlood/onebite-react-v2/tree/main/section05/chapter11 |
6섹션 "프로젝트1. 카운터 앱"
| 챕터번호 | 챕터이름 | 코드 |
|---|---|---|
| 6.1 | 프로젝트 소개 및 준비 | https://github.com/winterlood/onebite-react-v2/tree/main/section06/chapter01 |
| 6.2 | UI 구현하기 | https://github.com/winterlood/onebite-react-v2/tree/main/section06/chapter02 |
| 6.3 | 기능 구현하기 | https://github.com/winterlood/onebite-react-v2/tree/main/section06/chapter03 |
7섹션 "라이프사이클"
| 챕터번호 | 챕터이름 | 코드 |
|---|---|---|
| 7.1 | 라이프사이클(LifeCycle)이란? | |
| 7.2 | useEffect 사용하기 | https://github.com/winterlood/onebite-react-v2/tree/main/section07/chapter02 |
| 7.3 | useEffect로 라이프사이클 제어하기 | https://github.com/winterlood/onebite-react-v2/tree/main/section07/chapter03 |
| 7.4 | React 개발자도구 사용하기 |
8섹션 "프로젝트2. 투두리스트"
| 챕터번호 | 챕터이름 | 코드 |
|---|---|---|
| 8.1 | 프로젝트 소개 및 준비 | https://github.com/winterlood/onebite-react-v2/tree/main/section08/chapter1 |
| 8.2 | UI 구현하기 | https://github.com/winterlood/onebite-react-v2/tree/main/section08/chapter2 |
| 8.3 | 기능 구현 준비하기 | https://github.com/winterlood/onebite-react-v2/tree/main/section08/chapter3 |
| 8.4 | Create - 투두 추가하기 | https://github.com/winterlood/onebite-react-v2/tree/main/section08/chapter4 |
| 8.5 | Read - 투두 리스트 렌더링 하기 | https://github.com/winterlood/onebite-react-v2/tree/main/section08/chapter5 |
| 8.6 | Update - 투두 수정하기 | https://github.com/winterlood/onebite-react-v2/tree/main/section08/chapter6 |
| 8.7 | Delete - 투두 삭제하기 | https://github.com/winterlood/onebite-react-v2/tree/main/section08/chapter7 |
9섹션 "useReducer"
| 챕터번호 | 챕터이름 | 코드 |
|---|---|---|
| 9.1 | useReducer를 소개합니다 | https://github.com/winterlood/onebite-react-v2/tree/main/section09/chapter01 |
| 9.2 | 투두리스트 업그레이드 | https://github.com/winterlood/onebite-react-v2/tree/main/section09/chapter02 |
10섹션 "최적화"
| 챕터번호 | 챕터이름 | 코드 |
|---|---|---|
| 10.1 | 최적화란? | |
| 10.2 | useMemo - 연산 최적화 | https://github.com/winterlood/onebite-react-v2/tree/main/section10/chapter02 |
| 10.3 | React.memo - 컴포넌트 렌더링 최적화 | https://github.com/winterlood/onebite-react-v2/tree/main/section10/chapter03 |
| 10.4 | useCallback - 함수 최적화 | https://github.com/winterlood/onebite-react-v2/tree/main/section10/chapter04 |
11섹션 "Context"
| 챕터번호 | 챕터이름 | 코드 |
|---|---|---|
| 11.1 | Context란 | |
| 11.2 | Context 사용하기 | https://github.com/winterlood/onebite-react-v2/tree/main/section11/chapter02 |
| 11.3 | Context 분리하기 | https://github.com/winterlood/onebite-react-v2/tree/main/section11/chapter03 |
12섹션 "프로젝트3. 감정 일기장"
| 챕터번호 | 챕터이름 | 코드 |
|---|---|---|
| 12.1 | 프로젝트 소개 및 준비 | https://github.com/winterlood/onebite-react-v2/tree/main/section12/chapter01 |
| 12.2 | 페이지 라우팅 1. 소개 | |
| 12.3 | 페이지 라우팅 2. 라우팅 설정하기 | https://github.com/winterlood/onebite-react-v2/tree/main/section12/chapter03 |
| 12.4 | 페이지 라우팅 3. 페이지 이동 | https://github.com/winterlood/onebite-react-v2/tree/main/section12/chapter04 |
| 12.5 | 페이지 라우팅 4. 동적 경로 | https://github.com/winterlood/onebite-react-v2/tree/main/section12/chapter05 |
| 12.6 | 폰트, 이미지, 레이아웃 설정하기 | https://github.com/winterlood/onebite-react-v2/tree/main/section12/chapter06 |
| 12.7 | 공통 컴포넌트 구현하기 | https://github.com/winterlood/onebite-react-v2/tree/main/section12/chapter07 |
| 12.8 | 일기 관리 기능 구현하기 1. | https://github.com/winterlood/onebite-react-v2/tree/main/section12/chapter08 |
| 12.9 | 일기 관리 기능 구현하기 2. | https://github.com/winterlood/onebite-react-v2/tree/main/section12/chapter09 |
| 12.10 | Home 페이지 구현하기 1. UI | https://github.com/winterlood/onebite-react-v2/tree/main/section12/chapter10 |
| 12.11 | Home 페이지 구현하기 2. 기능 | https://github.com/winterlood/onebite-react-v2/tree/main/section12/chapter11 |
| 12.12 | Home 페이지 구현하기 3. 회고 | https://github.com/winterlood/onebite-react-v2/tree/main/section12/chapter12 |
| 12.13 | New 페이지 구현하기 1. UI | https://github.com/winterlood/onebite-react-v2/tree/main/section12/chapter13 |
| 12.14 | New 페이지 구현하기 2. 기능 | https://github.com/winterlood/onebite-react-v2/tree/main/section12/chapter14 |
| 12.15 | Edit 페이지 구현하기 | https://github.com/winterlood/onebite-react-v2/tree/main/section12/chapter15 |
| 12.16 | Diary 페이지 구현하기 | https://github.com/winterlood/onebite-react-v2/tree/main/section12/chapter16 |
| 12.17 | 웹 스토리지 이용하기 | https://github.com/winterlood/onebite-react-v2/tree/main/section12/chapter17 |
| 12.18 | 배포 준비하기 | https://github.com/winterlood/onebite-react-v2/tree/main/section12/chapter18 |
| 12.19 | 배포하기 (with Vercel) |
프로젝트 에셋
| 장 | 파일 이름 | 파일 미리보기 | 다운로드 링크 |
|---|---|---|---|
| NanumPenScript-TTF 폰트 |
다운로드 | ||
| emotion.zip 감정 이미지 |
 |
다운로드 | |
| favicon.ico 감정 일기장 아이콘 |
다운로드 | ||
| thumbnail.png 감정 일기장 썸네일 |
 |
다운로드 |
winterlood