강의일지 - 리액트 기초 - (2) js 응용

강의 정보

1. 강의명

인프런 - winterlood - 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
https://www.inflearn.com/course/한입-리액트/dashboard

2. 수강목적

1) Tripin 프로젝트에서의 사용을 위해

• Tripin : 여행일정 추천 웹서비스
• 프로젝트에서 지도api 및 일정 조율 기능 및 다양한 UI 기능을 구현하게위한 도구로 react를 사용하기로 함

2) 프론트엔드에서 프레임워크를 어떤 방식으로 사용하여 개발하는지 경험

• 이전 까지는 html, css, js로만 웹페이지 구성
• 프레임워크를 처음으로 배워봄으로써 웹 UI 구성 경험치 축적

3. 수강기간

2022.04.30. ~

강의 일지

16-24강

• js 응용
  • 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

  • 삼항 연산자

    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')

  • 단락회로 평가

    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

  • 비구조화 할당

    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
    

  • 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]

  • 동기 & 비동기

    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

  • 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 : 양수

  • 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);
    }

  • 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 ...