[한입 크기로 잘라 먹는 리액트] Javascript 응용

1. Truthy & Falsy

전달받은 파라미터가 객체인지, falsy인지 확인해야한다. -> 에러발생 방지

!를 붙이면 !false(true)로 판단되어 예외처리하기 쉽다.

---

2. 삼항 연산자

truthy와 falsy 적용가능.

[]은 truthy로 취급된다.

 

삼항 연산자를 중첩하는 것도 가능하다. 가독성이 떨어지므로 if문이 더 낫다.

---

3. 조건문 업그레이드

if(food === "불고기" || food === "비빔밥" || food === "떡볶이")

에서 

if(["불고기","떡볶이","비빔밥"].includes(food))

로 복합한 조건문 간략하게 만들 수 있다.

      

      

      

    
    

      <javascript />
    
const meal = {
    한식 : "불고기",
    중식 : "멘보샤",
    일식 : "초밥",
    양식 : "스테이크",
    인도식 : "카레"
};

const getMeal = (mealType) => {
	return meal[mealType] || "굶기";
};

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

객체의 괄호표기법으로 리턴을 효율적으로 하는 예시

"한식"키를 갖는 값을 가져온다.

---

4. 비 구조화 할당

배열의 기본변수 비 구조화 할당.

      

      

      

    
    

      <javascript />
    
let arr = ["one", "two", "three"];

let [one,two,three] = arr;

각각 인덱스가 쏙쏙 들어간다!

 

배열의 선언분리 비 구조화 할당.

      

      

      

    
    

      <javascript />
    
let [one, two, three] = ["one","two","three"];

할당되지 못하면 undefined로 표시되는데, 기본값을 지정할 수 있다.(ex. four = "four")

 

4.1. 쉽게 변수의 값을 swap하는 방법

[a,b] = [b, a];

 

4.2. 객체의 비 구조화 할당

키값을 기준으로 이루어지므로 순서는 상관없다.

기본값 지정이 가능하고, 변수명을 바꿔 저장할수도 있다.

let {name : myName, one, two, three} = object;

name이라는 키값을 기준으로 myName의 변수에 할당한다는 뜻.

---

5. spread 연산자

중복된 프로퍼티를 작성하는 대신 spread연산자(...)를 사용한다.

새로운 객체에 펼쳐주는 역할이다.

      

      

      

    
    

      <javascript />
    
const cookie = {
    base : "cookie",
    madeIn: "korea"
};

const chocochipCookie = {
	...cookie,
    toping: "chocochip"
};

중간에 값을 유연하게 넣을 수도 있다.

      

      

      

    
    

      <javascript />
    
[...noTopingCookies, "함정쿠키", ...topingCookies];

---

6. 동기/비동기

스레드 : 코드를 한줄 한줄 실행시켜주는 것

동기 방식의 처리 : A가 끝나야 비로소 B가 실행되는 방식

블로킹 방식 : 스레드에서 작업하나가 수행될때 다른작업이 실행되지 않게 블로킹하는 것

작업시간이 오래걸리는 문제가 생길 수 있다.

멀티 쓰레드 : 쓰레드를 여러개 사용하는 방식

 

자바스크립트는 싱글 쓰레드이므로, 비동기 작업을 사용한다.(여러 개의 작업을 동시에 실행)

논 블로킹 방식

 

작업의 결과를 확인하려면 콜백 함수를 붙여서 전달하면 확인이 가능하다.

      

      

      

    
    

      <javascript />
    
//3초뒤 콜백함수 실행
function tastA(a, b, cb){
	setTimeout(() => {
    	const res = a + b;
        cb(res);
    }, 3000);
}

taskA(3, 4, (res) => {
	console.log("A task result : ", res);
});
console.log("코드 끝");

비동기 처리의 결과값을 이용할때 콜백함수를 전달해서 이용할 수 있다.(여러개 겹친다면 콜백 지옥!)

 

자바스크립트 엔진은 힙, 콜스택 으로 이루어져있다.

힙 : 메모리 저장

콜스택 : 코드의 실행에 따라서 호출스택을 쌓는다.

---

7. Promise | 콜백 지옥 탈출

비동기 결과값을 사용하기 위해 콜백이 깊어지는 현상이다.

Promise : 자바스크립트의 비동기를 돕는 객체이다. 콜백을 줄지어 전달할 필요가 없다.

7.1. 비동기 작업이 가질 수 있는 3가지 상태

Pending : 대기 상태, 비동기 작업이 진행중이거나 시작할 수 없는상태

Fulfilled : 성공, 의도한 대로 완료된 상태

Rejected : 실패, 비동기 작업이 실패했다.(서버응답x, 시간이 너무오래걸림)

 

비동기작업은 한번 성공하거나 실패하면 그걸로 끝이다.

 

Resolve : 해결. pending-> fulfilled

Reject : 거부. pending->rejected

      

      

      

    
    

      <javascript />
    
function isPositive(number, resolve, reject {
	setTimeout(() => {
    	if (typeof number === "number") {
        // 성공
        resolve(number >=0? "양수" : "음수")
        } else {
        // 실패
        reject("주어진 값이 숫자형 값이 아닙니다.");
        }
    }, 2000);
}

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

return 값이 Promise<any> 라면, 이 함수는 비동기 작업을 한다는 뜻이다.

 

resolve나 reject의 결과값을 이용할때,

      

      

      

    
    

      <javascript />
    
//const res = isPositiveP(101);
const res = isPositiveP([]);

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

then 체이닝 : 프로미스 결과값을 인자로 전달하고 then메서드로 붙여서 호출하는 방식

비동기처리호출하는 코드와 결과처리코드를 분리할 수 있다.

---

8. async/ await | 직관적인 비동기 처리

function앞에 async를 달면 반환값이 Promise이다.

      

      

      

    
    

      <javascript />
    
function hello() {
	return "hello";
}

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

helloAsync().then((res) => {
	console.log(res);
}); //hello Async가 콘솔에 출력된다.

함수에 async가 붙으면 promise를 반환한다.(비동기처리함수가 된다) then을 쓸 때 res에 결과값이 들어간다.

      

      

      

    
    

      <javascript />
    
function delay(ms) {
    return new Promise((res) => {
    	setTimeout(res,ms);
    });
}

async function helloAsync() {
    return delay(3000).then(() => {
    	return "hello Async";
    });
}

//await을 이용하여 바꾸기
async function helloAsync() {
    await delay(3000);
    return "hello async";
}

await이 붙은 비동기함수는 동기함수처럼 작동하게 된다. 함수수행끝날때까지 아래의 코드는 수행하지 않는다.

await키워드는 async붙은 함수 안에서만 사용가능하다.

      

      

      

    
    

      <javascript />
    
async function main() {
    const res = await helloAsync();
    console.log(res);
}

main();
//3초뒤에 콘솔에 찍히는 것 확인

---

9. API & fetch

api호출하기

클라이언트-(request:데이터요청)->서버-(query:데이터검색)->데이터베이스-(query result:데이터찾기)->서버-(response:요청 데이터 전달)->클라이언트

 

api호출 : request(데이터요청), response (요청데이터 전달)

api : 클라이언트와 서버처럼 프로그램간의 연결다리. 다른프로그램에게 데이터를 받기 위해 말을 건다(웨이터에게 주문)

 

응답을 언제 받을지 확실하게 알 수 없기 때문에 비동기호출을 사용한다.

 

json placeholder : 무료 api호출로 더미데이터 응답서비스

어떠한 주소로 요청했을때 어떤 jsonl형태로 응답하겠다는 것을 확인할 수 있다.

주소를 복사해서 붙여넣으면 된다.

      

      

      

    
    

      <javascript />
    
let response = fecth("https://jsonplaceholder.typicode.com/posts")
    .then((res) => console.log(res)
);
//fetch는 api호출돕는 내장함수이다.
//api의 결과값을 반환하는 것이 아니라 성공객체 자체를 반환한다.

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

getData();