/onebite-react-v2

onebite-react-v2

Primary LanguageJavaScript

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
폰트		 image 다운로드
emotion.zip
감정 이미지		 image 다운로드
favicon.ico
감정 일기장 아이콘		 image 다운로드
thumbnail.png
감정 일기장 썸네일		 image 다운로드