[React] Udemy기술 블로그 챌린지 - 한입 크기로 잘라 먹는 리액트(React.js) - 자바스크립트 기본 & 응용(2)

 

(백엔드개발자가 도전하는)한입 크기로 잘라 먹는 리액트(React.js) - 자바스크립트 응용

 

지난번 수업에 이어 작성하는 두번째 글이다. 다시 한번 소개를 하고자 한다.

인프런에서 접하게 된 강의 한입 크기로 잘라 먹는 리액트.
리액트를 시작해보고 싶었고 자바스크립트 기본기도 빠르게 다지고 가면 좋겠다는 생각을 늘 갖고있다가 만나게 된 강의이다.

군더더기 없는 깔끔한 설명과 스피드한 진행으로 매우 만족중이다.

- 유데미 강의
https://www.udemy.com/course/winterlood-react-basic/

- 인프런 강의

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의

- 지난시간 강의 기록

[React] (백엔드개발자가 도전하는) 한입 크기로 잘라 먹는 리액트(React.js) - 자바스크립트 기본 &

 

이번엔 JavaScript 응용부분 강의를 들었다.
기본수업엔 아무래도 Java 와 문법적으로 다를 뿐 어느정도 비슷한 개념들이 많아서 수월하게 들었는데
응용부분으로 가니 자바스크립트만의 특징이라 불리울만한 문법들을 배우게 되었다.
익숙하지 않았고 새로운 개념들이었다. 

자바스크립트 코드들을 보면 이게 무슨말이지? 되게 축약시킨 느낌으로 로직처리를 한다는 생각이 들었는데, 이번에 배운 문법들이 자바스크립트로 멋지게 코드작성을 하는 스킬이 아닌가 싶다.

빠른 실습과 함께 진행했던 자바스크립트 응용 수업이다.

 

Truty & Falsy

참 같은 값, 거짓 같은 값

//Truthy & falsy
let a = "";
if (a) {
  console.log("TRUE");
} else {
  console.log("FALSE");  -- FALSE 출력
}

a = "String";
if (a) {
  console.log("TRUE");   -- TRUE 출력
} else {
  console.log("FALSE");  
}

빈 문자열 - FALSE
비어있지 않은 문자열 - TRUE

💡 자바스크립트에는 조건식에서 Boolean 값을 넣지 않아도 참이나 거짓으로 인식이 되는 속성이 있다.
ex)

• “” : FALSE
• “string” : TRUE
• [ ] : TRUE
• undefined : FALSE
  
  
• 참으로 평가하는 값들 (Truthy)
• { } 42 ”0” ”false” Infinity ⇒ True가 아니어도 참으로 분류하는 값들을 참 값은 값 들이라고 Truthy 라고 부른다.
• 거짓으로 평가하는 값들 (Falsy)
• null undefined 숫자 0, -0 NaN ””

❗대표적인 Falsy의 사례들은 굉장히 코딩할 때 활용하기 좋은 성질이다.

 

단락회로 평가 

: 왼쪽에서 오른쪽으로 연산하게 되는 논리연산자의 연산 순서를 이용하는 문법 피 연산자 중에 뒤에 위치한 피 연산자를 확인할 필요 없이 연산을 끝내버리는 것을 단락회로 평가 라고 한다.

Truthy나 falsy값을 이용하여 단락회로 평가를 작성할 수 있다.

//단락 회로 평가
const getName = (person) => {
  if (!person) {
    return "객체가 아닙니다";
  }
  return person.getName;
};

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

⇒ 멋지게 변환해보자

• person 이 객체인 경우

//단락 회로 평가
const getName = (person) => {
  const name = person && person.name; // zzamong
  return name || "객체가 아닙니다";
};

let person = { name: "zzamong" };
const name = getName(person);
console.log(name);

• person 이 객체가 아닌 경우

//단락 회로 평가
const getName = (person) => {
  const name = person && person.name; // null
  return name || "객체가 아닙니다"; // "객체가 아닙니다"
};

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

 

 

조건문 업그레이드

=>객체의 property에 접근하는 괄호표기법으로 혁신적으로 접근

const meal = {
  한식: "불고기",
  중식: "멘보샤",
  일식: "초밥",
  양식: "스테이크",
  인도식: "카레"
};
const getMeal = (mealType) => {
  return meal[mealType] || "굶기";
};

console.log(getMeal("중식"));
console.log(getMeal());

[실행 결과]
멘보샤
굶기

💡 굉장히 많은 유형의 대표적인 뭔가 하나를 return 해야 할 때 객체의 괄호표기법을 통해 효율적으로 해결할 수 있다.

 

비 구조화 할당

배열이나 객체에서 원하는 값을 더 빠르고 쉽게 꺼낼 수 있는 방법

배열의 비 구조화 할당

let arr = ["one", "two", "three"];

let one = arr[0];
let two = arr[1];
let three = arr[2];

console.log(one, two, three);

⬇️

let arr = ["one", "two", "three"];
let [one, two, three] = arr;
console.log(one, two, three);

⬇️

let [one, two, three] = ["one", "two", "three"];
console.log(one, two, three);

: 순서대로 배열의 요소를 변수에 쉽게 할당할 수 있는 방법

let [one, two, three] = ["one", "two", "three"];
console.log(one, two, three);

swap

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

[실행 결과]
20, 10

 

객체의 비 구조화 할당

let object = {
  one: "one",
  two: "two",
  three: "three"
};

let one = object["one"];
let two = object["two"];
let three = object["three"];

console.log(one, two, three);

⬇️

let object = {
  one: "one",
  two: "two",
  three: "three"
};
let { one, two, three } = object; //키 값을 기준으로 할당한다.
console.log(one, two, three);

[실행 결과]
one two three

⇒ 객체 property의 키값을 통해 접근해야 하기 때문에 변수명이 키값으로 강제되는 부분이 있다. 극복하는 방법이 존재한다.

let object = {
  one: "one",
  two: "two",
  three: "three",
  name: "자몽"
};
let { name: myName, one: oneOne, two, three, abc = "four" } = object;
console.log(oneOne, two, three, myName, abc);

[실행 결과]
one two three 자몽 four

 

Spread 연산자

배열과 객체를 한 줄로 펼치는 방법

 

자바스크립트 동기 & 비동기

• 자바스크립트는 싱글 쓰레드로 동작함
• 즉 이런 방식으로 일꾼을 여러 개 사용하는 방법 사용이 불가함

So, How to?

쓰레드가 하나일지라도 작업 여러개를 동시에 실행시켜 버린다. TaskA, TaskB, TaskC 작업이 끝나던 말던 관심없이 그냥 동시에 다 실행시켜 버린다.

• 싱글 쓰레드 방식을 이용하면서, 동기적 작업의 단점을 극복하기 위해
• 여러 개의 작업을 동시에 실행시킴
• 즉, 먼저 작성된 코드의 결과를 기다리지 않고 다음 코드를 바로 실행함

⇒ 비동기 작업 (Non-Blocking 방식)

동시에 작업을 다 실행해버리면,

정상적으로 끝났는지 어떻게 확인하고 작업의 결과는 어떻게 확인할까 ?

⇒ 비동기적으로 실행된 A,B,C라는 각각의 함수들에게 “야 너 작업끝나면 실행해”라는 의미에서 콜백함수를 붙여서 전달한다.

 

function taskA(a, b, cb) {
  setTimeout(() => {
    const res = a + b;
    cb(res);
  }, 3000); //타이머만들수 있는 내장 비동기 함수, 2초
}

function taskB(a, cb) {
  setTimeout(() => {
    const res = a * 2;
    cb(res);
  }, 1000);
}

function taskC(a, cb) {
  setTimeout(() => {
    const res = a * -1;
    cb(res);
  }, 2000);
}

taskA(4, 5, (a_res) => {
  console.log("A RESULT : ", a_res);
  taskB(a_res, (b_res) => {
    console.log("B RESULT : ", b_res);
    taskC(b_res, (c_res) => {
      console.log("C_RESULT : ", c_res);
    });
  });
});
console.log("코드 끝");

[실행 결과]
코드 끝 
A RESULT :  
9
B RESULT :  
18
C_RESULT :  
-18

: 콜백함수의 콜백함수의 콜백함수를 넣어서 비동기처리의 결과를 또 다른 비동기처리의 값으로 전달 할 수 있다. 그런데 이 상황이 생각보다 많다. 가독성이 그렇게 좋지 않다. 만약 Task가 3개 뿐만이 아니라 100개가 넘어간다면 콜백함수가 끝도 없이 연결되는 지옥을 만나게 된다.

 

Promise - 콜백 지옥에서 탈출하기

• 콜백지옥 : 연속되는 비동기 함수들을 처리할 때 비동기처리의 결과값을 사용하기 위해서 콜백이 계속 깊어지는 현상

Promise : 자바스크립트의 비동기를 돕는 객체

-비동기처리의 결과값을 핸들링 하는 코드를 비동기의 함수로부터 분리할 수 있다. -비동기처리 함수에 더이상 줄지어 전달할 필요가 없다.

// 2초뒤에 전달받은 값이 양수인지 음수인지 체크하는 비동기 함수
function isPositive(number, resolve, reject) {
  setTimeout(() => {
    if (typeof number === "number") {
      //성공 -> resolve
      resolve(number >= 0 ? "양수" : "음수");
    } else {
      //실패 -> reject
      reject("주어진 값이 숫자형 값이 아닙니다");
    }
  }, 2000);
}

isPositive(
  10,
  (res) => {
    console.log("성공적으로 수행됨 : ", res);
  },
  (err) => {
    console.log("실패 하였음 : ", err);
  }
);

[실행 결과]
양수

⬇️

Promise를 사용해서 비동기처리를 하게 될 isPositiveP()

function isPositiveP(number) {
        //실행자 - 비동기작업을 실질적으로 수행하는 수행자
  const **executor** = (resolve, reject) => {
    setTimeout(() => {
      if (typeof number === "number") {
        //성공 -> resolve
        console.log(number);
        resolve(number >= 0 ? "양수" : "음수");
      } else {
        //실패 -> reject
        reject("주어진 값이 숫자형 값이 아닙니다");
      }
    }, 2000);
  };

  **const asyncTask = new Promise(executor); //**
  return asyncTask;
}

isPositiveP(101);

[실행 결과]
101

💡 어떤 함수가 Promise를 반환한다는 것은 이 함수는 비동기 작업을 하고 그 작업의 결과를 Promise 객체로 반환받아서 사용할 수 있는 함수로 볼 수 있다.

이 함수가 반환한 객체를 사용해보자.

const res = isPositiveP(101);

res
  .then((res) => {
    console.log("작업 성공 : ", res);
  })
  .catch((err) => {
    console.log("작업 실패 : ", err);
  });

[실행 결과]
작업 성공 : 양수

Promise객체의 메서드 then 과 catch 를 사용하면, resolve() 수행 함수는 then 에서,

reject() 수행 함수는 catch 에서 받을 수 있다.

 

async & await -  직관적인 비 동기 처리 코드 작성하기

: Promise를 더 쉽고 가독성 좋게 작성할 수 있는 법

async

Promise 처럼 비동기를 다루는 기능이자 Promise를 더 쉽게 이용할 수 있게 해준다.

💡 async를 함수에 붙여주면 이 함수는 자동적으로 Promise를 return하는 비동기 함수가 된다. 이 말은 함수를 이렇게 helloAsync() 호출할 필요가 없고 then() 메서드 사용이 가능하다는 의미이다.

await

! await 키워드를 비동기함수의 호출 앞에 붙이게 되면 비동기함수가 마치 동기적인 함수처럼 작동하게 된다.

await 키워드가 붙은 함수의 호출은 뒤에있는 함수가 끝나기 전까지 그 아래에 있는 코드를 수행하지 않는다. await 줄에는 다 동기적으로 수행하게 된다. await 은 async 키워드가 붙은 함수에서만 사용할 수 있다.

 

API 호출하기 - what is API ?

식당에 가면 우리가 메뉴판을 보고 음식을 주문하듯이,
웹에서는 원하는 리소스를 얻기 위해 요청을 날리는데 그 요청을 API 라고 할 수 있으며, 우리가 많이 봐오던 url 주소를 말한다.

- 이전에 정리해두었던 API 개념

API 란?

 

fetch

: 자바스크립트에서 API 호출할 수 있도록 도와주는 내장함수

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

getData();

[실행 결과]
(100) [Object, Object, Object, Object, Object, Object, Object, Object, Object, Object, …]

 

응용편 강의들은 새로배우는 내용들이 많았다. 이 부분들을 잘 이해하고 활용할 줄 알아야 자바스크립트를 할 줄 안다고 말 할 수 있을 것 같다. 실습하면서 자연스레 자바스크립트와 리액트 둘다 습득하길 기대하며 남은 강의들도 계속 들어봐야겠다.