마카로닉스

1971 No

React 한입 크기로 잘라 먹는 리액트 [이정한] - 2 JavaScript 응용 : 비 구조화 할당 , Spread 연산자, 동기 & 비동기 , Promise - 콜백 지옥, async & await ,API 호출

2022-11-02 21:28:04 By 라이트 0 242 댓글수 4 포스트 하기

4월 2024
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

인프런 : 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

강좌:

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8/unit/103471?tab=curriculum

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.삼항 연산자

강의 :

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8/unit/103472?tab=curriculum

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.단락회로 평가

강의 :

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8/unit/103473?tab=curriculum

const getName = (person) => {
  const name = person && person.name;
  return name || "객체가 아닙니다.";
};

let person = null;
const name = getName(person);
console.log(name);

객체가 아닙니다.

19.조건문 업그레이드

강의 :

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8/unit/103474?tab=curriculum

// 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.동기 & 비동기

강의 :

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8/unit/103477?tab=curriculum

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 - 콜백 지옥에서 탈출하기

강의 :

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8/unit/103478?tab=curriculum

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 - 직관적인 비 동기 처리 코드 작성하기

강의 :

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8/unit/103479?tab=curriculum

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 호출하기

강의 :

https://www.inflearn.com/course/%ED%95%9C%EC%9E%85-%EB%A6%AC%EC%95%A1%ED%8A%B8/unit/103480?tab=curriculum

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();