인프런 : https://www.inflearn.com/course/한입-리액트
소스 : https://github.com/braverokmc79/react-with-one-bite
들어가며
1.강의 및 강사 소개
2. React 소개
3.오픈채팅방 입장 방법 및 비밀번호
JavaScript 기본
4.Hello World
5.변수와 상수
6.자료형과 형 변환
7.연산자
8.조건문
9.함수
10.함수표현식 & 화살표 함수
11.콜백함수
12.객체
13.배열
14.반복문
15.배열 내장 함수
JavaScript 응용
16.Truthy & Falsy
17.삼항 연산자
18.단락회로 평가
19.조건문 업그레이드
20.비 구조화 할당
21.Spread 연산자
22.동기 & 비동기
23.Promise - 콜백 지옥에서 탈출하기
24.async & await - 직관적인 비 동기 처리 코드 작성하기
25.API 호출하기
Node.js 기초
26.Node.js란?
27.Node.js & VsCode 설치하기
28.Node.js Hello World & Common JS
29.Node.js 패키지 생성 및 외부 패키지 사용하기
React.js 기초
30.Why React?
31.Create React App
32.JSX
33.State
34.Props
React 기본 - 간단한 일기장 프로젝트
35.프로젝트 소개
36.React에서 사용자 입력 처리하기
37.React에서 DOM 조작하기 - useRef
38.React에서 배열 사용하기 1 - 리스트 렌더링 (조회)
39.React에서 배열 사용하기 2 - 데이터 추가하기
40.React에서 배열 사용하기 3 - 데이터 삭제하기
41.React에서 배열 사용하기 4 - 데이터 수정하기
42.React Lifecycle 제어하기 - useEffect
43.React에서 API 호출하기
44.React developer tools
45.최적화 1 - useMemo
46.최적화 2 - React.memo
47.최적화 3 - useCallback
48.최적화 4 - 최적화 완성
49.복잡한 상태 관리 로직 분리하기 - useReducer
50.컴포넌트 트리에 데이터 공급하기 - Context
React 실전 프로젝트 - 감정 일기장 만들기
51.프로젝트 완성 예시
52.페이지 라우팅 0 - React SPA & CSR
53.페이지 라우팅 1 - React Router 기본
54.페이지 라우팅 2 - React Router 응용
55.프로젝트 기초 공사 1
56.프로젝트 기초 공사 2
57.페이지 구현 - 홈 (/)
58.페이지 구현 - 일기 쓰기 (/new)
59.페이지 구현 - 일기 수정 (/edit)
60.페이지 구현 - 일기 상세 (/diary)
61.(서브 챕터) 흔히 발생하는 버그 수정 하기
62.LocalStorage를 일기 데이터베이스로 사용하기
63.프로젝트 최적화
64.배포 준비 & 프로젝트 빌드하기
65.Firebase로 프로젝트 배포하기
66.Open Graph 설정하기
JavaScript 응용
16.Truthy & Falsy
강좌:
let a = "string";
if (a) {
console.log("true");
} else {
console.log("false");
}
=>true
if (person !== undefined && person !== null)
const getName = (person) => {
if (!person) {
return "객체가 아닙니다";
}
return person.name;
};
let person = { name: "홍길동" };
const name = getName(person);
console.log(name);
=> 홍길동
17.삼항 연산자
강의 :
let a = 3;
a >= 0 ? console.log("양수") : console.log("음수");
let b = [];
const arrayStatus = b.length === 0 ? "빈배열" : "안 빈 배열";
console.log(arrayStatus);
//중첩 삼항 연산자
//ToDO :학점 계산 프로그램
//90점 이상 A+
//50점 이상 B+
//둘다 아니면 F
let score = 100;
score >= 90
? console.log("A+")
: score > 50
? console.log("B+")
: console.log("F");
=> A+
18.단락회로 평가
강의 :
const getName = (person) => {
const name = person && person.name;
return name || "객체가 아닙니다.";
};
let person = null;
const name = getName(person);
console.log(name);
=>
객체가 아닙니다.
19.조건문 업그레이드
강의 :
// function isKoreanFood(food) {
// if (food === "불고기" || food === "비빔밥" || food === "떡볶이") {
// return true;
// }
// return false;
// }
function isKoreanFood(food) {
if (["불고기", "비빔밥", "떡볶이"].includes(food)) {
return true;
}
return false;
}
const food1 = isKoreanFood("불고기");
const food2 = isKoreanFood("파스타");
console.log(food1);
console.log(food2);
const meal = {
한식: "불고기",
중식: "멘보샤",
일식: "초밥",
양식: "스테이크",
인도식: "카레"
};
const getMeal = (mealType) => {
// if (mealType === "한식") return "불고기";
// if (mealType === "양식") return "파스타";
// if (mealType === "중식") return "멘보샤";
// if (mealType === "일식") return "초밥";
// return "굶기";
//괄호 표기법으로 간단하게
return meal[mealType] || "굶기";
};
console.log(getMeal("한식"));
console.log(getMeal("중식"));
console.log(getMeal());
20.비 구조화 할당
강의 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8/unit/103475
let [one, twoo, three, four = "four1"] = ["one", "two", "three"];
console.log(one, twoo, three, four);
let a = 10;
let b = 20;
[a, b] = [b, a];
console.log(a, b);
let object = { one1: "11", two2: "22", three3: "33" };
let { one1, two2, three3, f5 = "55" } = object;
console.log(one1, two2, three3, f5);
=>
was cleared one two three four1 20 10 11 22 33 55
21.Spread 연산자
강의 : https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8/unit/103476
const cookie = {
base: "cookie",
madeIn: "korea"
};
const chocochipCookie = {
...cookie,
toping: "chochocip"
};
const blueberryCookie = {
...cookie,
toping: "blueberry"
};
const strawberryCookie = {
...cookie,
toping: "strawberry"
};
console.log(chocochipCookie);
console.log(blueberryCookie);
console.log(strawberryCookie);
const noTopingCookies = ["촉촉한쿠키", "안촉촉한쿠티"];
const topingCookies = ["바나나쿠키", "블루베리쿠키", "딸기쿠키", "초코쿠키"];
const allCookies = [...noTopingCookies, "함정쿠키", ...topingCookies];
console.log(allCookies);
=> 출력
{base: "cookie", madeIn: "korea", toping: "chochocip"}
{base: "cookie", madeIn: "korea", toping: "blueberry"}
{base: "cookie", madeIn: "korea", toping: "strawberry"}
base: "cookie"
madeIn: "korea"
toping: "strawberry"
(7) ["촉촉한쿠키", "안촉촉한쿠티", "함정쿠키", "바나나쿠키", "블루베리쿠키", "딸기쿠키", "초코쿠키"]
22.동기 & 비동기
강의 :
function taskA(a, b, callback) {
setTimeout(() => {
const res = a + b;
callback(res);
}, 2000);
}
taskA(4, 5, (res) => {
console.log("작업 A :", res);
});
function taskB(a, cb) {
setTimeout(() => {
const res = a * 2;
cb(res);
}, 3000);
}
taskB(8, (res) => {
console.log("작업 B :", res);
});
function taskC(a, cb) {
setTimeout(() => {
const res = a - 1;
cb(res);
}, 1000);
}
taskC(8, (res) => {
console.log("작업 C :", res);
});
console.log("코드끝");
출력=>
코드끝 작업 C : 7 작업 A : 9 작업 B : 16
23.Promise - 콜백 지옥에서 탈출하기
강의 :
function isPositive(number, resolve, reject) {
setTimeout(() => {
if (typeof number === "number") {
//성공 => resolve
resolve(number >= 0 ? "양수" : "음수");
} else {
//실패 reject
reject("주어진 값이 숫자형 값이 아닙니다.");
}
}, 2000);
}
isPositive(
20,
(res) => {
console.log("성공적으로 수행됨 :", res);
},
(err) => {
console.log("실패 하였음 : ", err);
}
);
function isPositiveP(number) {
const exector = (resolve, reject) => {
setTimeout(() => {
if (typeof number === "number") {
//성공 => resolve
resolve(number >= 0 ? "양수" : "음수");
} else {
//실패 reject
reject("주어진 값이 숫자형 값이 아닙니다.");
}
}, 2000);
};
const asyncTask = new Promise(exector);
return asyncTask;
}
const res = isPositiveP(1001);
const res2 = isPositiveP([]);
res
.then((res) => {
console.log(" res :", res);
})
.catch((err) => {
console.error(" 에러 :", err);
});
res2
.then((res) => {
console.log(" res :", res);
})
.catch((err) => {
console.error(" 에러 :", err);
});
function taskA(a, b) {
return new Promise((resolve, reject)=>{
setTimeout(() => {
const res = a + b;
resolve(res);
}, 2000);
})
}
function taskB(a) {
return new Promise((resolve, reject)=>{
setTimeout(() => {
const res = a * 2;
resolve(res);
}, 2000);
})
}
function taskC(a) {
return new Promise((resolve, reject)=>{
setTimeout(() => {
const res = a - 1;
resolve(res);
}, 2000);
})
}
const resultA=taskA(4, 2).then(res=>{
console.log("작업 A :", res);
return taskB(res);
})
console.log(" 중간 작업 1");
const resultB =resultA.then(res=>{
console.log("작업 B :", res);
return taskC(res)
})
console.log(" 중간 작업 2");
resultB.then(res=>{
console.log("작업 C :", res);
})
console.log("코드끝");
=>결과
중간 작업 1 중간 작업 2 코드끝 작업 A : 6 작업 B : 12 작업 C : 11
24.async & await - 직관적인 비 동기 처리 코드 작성하기
강의 :
function delay(ms){
return new Promise((resolve, reject)=>{
setTimeout(() => {
resolve("ok")
}, ms);
})
}
async function helloAsync(){
const result=await delay(2000);
return `hello Async ${result}`;
}
async function main(){
const res = await helloAsync();
console.log(res);
}
main();
hello Async ok
25.API 호출하기
강의 :
let response = fetch("https://jsonplaceholder.typicode.com/posts");
response
.then((data) => {
console.log("data : ", data);
return data.json();
})
.then((res) => {
console.log("res 1:", res);
});
async function getdata() {
let data = await fetch("https://jsonplaceholder.typicode.com/posts");
let jsonData = await data.json();
console.log(jsonData);
}
getdata();
댓글 ( 4)
댓글 남기기