0. 강의 정보

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

1. Truthy & Falsy

let a = "";

if (a) {
	console.log('true');
} else {
	console.log('false');
}
// false

---

const getName = (person) => {
	return person.name;
}
let person = { name: 'dongwoo'};
console.log(getName(person)) // dongwoo
let person;
console.log(getName(person)) // error!

const getName = (person) => {
	if (!person) {
		return 'not object'	
	}	
	return person.name;
}
let person;
console.log(getName(person)) // not object

2. 삼항연산자

let a = -3;
a >= 0 ? console.log('양수') : console.log('음수');

let a = [];
const arrayStatus = a.length === 0 ? "empty" : "not empty";
console.log(arrayStatus); // empty

// 중첩 삼항연산자
let score = 40;
score >= 90
  ? console.log('A+')
  : score >= 50
    ? console.log('B+')
    : console.log('F')

3. 단락회로 평가

const getName = (person) => {
  const name =  person && person.name; // false 또는 person.name
	return name || 'not object'
};

let person;
console.log(getName(person)); // not object

let person = {name : 'dongwoo'}
console.log(getName(person)); // dongwoo

4. 비구조화 할당

let arr = [1, 2, 3]
let [one, two, three] = arr
console.log(one, two, three) // 1 2 3

let [one, two, three] = [1, 2, 3]
console.log(one, two, three) // 1 2 3

let [one, two, three, four="-1"] = [1, 2, 3]
console.log(one, two, three, four) // 1 2 3 -1

// 스왑
let a = 10;
let b = 20;
[a, b] = [b, a];
console.log(a, b); // 20, 10

// 객체
let object = { one:1, two:2, three:3 };
let { one, two, three } = object;
console.log(one, two, three); // 1 2 3

let object = { one:1, two:2, three:3, name:'dongwoo'};
let { name: myName, one, two, three } = object;
console.log(one, two, three, myName); // 1 2 3 dongwoo

5. Spread 연산자

const cookie = {
  base: 'cookie',
  madeIn: 'korea'
}

const chocochipCookie = {
  ...cookie,
  toping: 'chocochip'
}

console.log(chocochipCookie) 
// {base: "cookie", madeIn: "korea", toping: "chocochip"}

---

const arr1 = [1, 2, 3]
const arr2 = [5, 6]

const all_arr = [...arr1, 4, ...arr2]

console.log(all_arr) // [1, 2, 3, 4, 5, 6]

6. 동기 & 비동기

function taskA () {
  console.log('A complete')
}

taskA();
console.log('code end')

// A comlete
// code end

---

function taskA () {
  setTimeout(()=>{
    console.log('A complete')
  }, 2000);
}

taskA();
console.log('code end')

// code end
// A complete

7. Promise

function isPositive(number) {
  const excutor = (resolve, reject) => {
    setTimeout(() => {
      if (typeof number === "number") {
        resolve(number >= 0 ? "양수" : "음수");
      } else {
        reject("not number");
      }
    }, 2000);
  };

  const asyncTask = new Promise(excutor)
  return asyncTask;
}

const res = isPositive(101); // Promise 객체 생성

res.then((res) => {
  console.log('success :', res)
}).catch((err)=>{
  console.log('fail :', err)
}) // success : 양수

8. async & await

async function helloAsync() {
  return 'hello Async';
}

helloAsync().then((res)=>{
  console.log(res);
}) // hello Async

---

function delay (ms) {
  return new Promise((resolve) => {
    setTimeout(resolve, ms)
  });
}

// await 미사용
async function helloAsync() {
  return delay(3000).then(()=>{
    return 'hello Async';
  });
}

helloAsync().then((res)=>{
  console.log(res);
})

// await 사용
async function helloasync() {
	await delay(3000);
	return 'hello async';
}

async function main() {
	const res = await helloasync();
	console.log(res);
}

9. API & fetch

async function getData() {
  let rawResponse = await fetch("https://jsonplaceholder.typicode.com/posts");
  let jsonResponse = await rawResponse.json();
  console.log(jsonResponse);
}

getData(); // 100 object ...