자바스크립트 응용

if문

function isKoreanFood(food) {
	if (["불고기", "떡볶이", "비빔밥"]).includes(food)) {
    	return true;
        }
}

 

includes를 사용하면 그 배열 안에 들어있는 것인지 아닌지 확인이 가능하다.

 

비 구조화 할당

-배열

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

이 코드는 one에 "one"이 들어가고 two에 "two" 이렇게 순서대로 들어간다. 그리고 왼쪽에서 마지막에 ="four"의 의미는 오른쪽 값이 부족하여 할당이 안되면 기본값으로 할당하라는 의미이다.

 

let a = 10;
let b = 20;

[a, b] = [b, a]

두 값의 변수를 서로 바꿔야하면 이렇게 간단하게 바꿀 수 있다.

 

-객체

let object = {one:"one", two:"two", three:"three", name:"홍길동"};

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

객체에서는 순서가 아닌 키값을 기준으로 받아온다. name: myName의 의미는 키 값으로 받아오고 다른 이름으로 사용하고 싶을 때 사용한다. 그리고 배열에서 했던것 처럼 abc는 없기 때문에 four를 기본값으로 지정 가능하다.

 

Spread 연산자

-객체

const cookie = {
    base: "cookie",
    madeIn: "korea",
};

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

chocochipCookie에서 cookie의 프로퍼티를 똑같이 사용한다. 그러면 ...cookie를 하면 cookie의 프로퍼티를 써준다. 이렇게 ...으로 하는 것을 Spread 연산자라고 한다.

 

-배열

const abc = ["a", "b", "c"];
const def = ["d", "e", "f"];

const all = [...abc, "중간 삽입 가능", ...def];

배열도 이렇게 Spread 연산자를 사용 가능하고 중간에 삽입해도 된다.

 

동기 & 비동기

-동기

task a, b, c가 있다.

동기 방식은 하나가 끝날 때까지 기다리고 다음게 실행되는 방식이다. 그래서 블로킹 방식이라고도 한다.

하지만 자바스크립트는 싱글 쓰레드 방식이다.

 

-비동기

싱글 쓰레드인 방식의 단점을 해결하기 위해 여러 개의 작업을 동시에 실행시키는게 비동기이다.

그래서 일처리를 잘했는지와 결과 값을 보여주기 위해 콜백함수를 붙여준다.

 

• 코드

-동기

function taskA() {
    console.log("A 작업 끝");
}

taskA();
console.log("코드 끝");

 

-비동기

function taskA() {
    setTimeout(() => {
        console.log(("A TASK END"));
    }, 2000);
}

taskA();
console.log("코드 끝");

setTimeout은 타이머를 만들 수 있는 내장 비동기 함수이다. 인자로는 콜백 함수를 넣어주고 딜레이 타임을 넣어준다. 2000이면 2초다. 

 

function taskA(a, b, cb) {
    setTimeout(() => {
    const res = a + b;
    cb(res);
    }, 3000);
}

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

a와 b를 더하고 콜백 함수로 출력해주는 코드

 

• JS 엔진

-동기

Call Stack에 쌓였다가 수행되면 제거되면서 실행한다. Main Context도 사라지면 프로그램 종료

 

-비동기

Call Stack에 쌓였다가 setTimesout 같은 비동기 함수이면 Web APIs에 들어가서 대기한다. 그리고 Callback Queue로 옮겨지고 Event Loop에 의해 다시 Call Stack에 들어가서 수행된다. 이때 Event Loop는 Call Stack에 Main Context만 있어야 옮겨준다. 

 

-콜백 지옥

콜백 지옥이란 연속되는 비동기 함수를 사용할 때 콜백이 계속 깊어지는 현상을 말한다.

 

Promise

Promise는 콜백 지옥을 해결할 수 있다.

 

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

1. 대기 상태(Pending)
2. 성공(Fulfilled) => resolve
3. 실패(Rejected) => reject

 

-일반적인 콜백 함수

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

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

 

-Promise 사용

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

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

const res = isPositiveP(101);

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

 

• 콜백 지옥 탈출하기

-콜백 지옥

function taskA(a, b, cb) {
    setTimeout(() => {
        const res = a+b;
        cb(res);
    }, 3000);
}

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(3, 4, (a_res) => {
    console.log("task A :", a_res);
    taskB(a_res, (b_res) => {
        console.log("task B :", b_res);
        taskC(b_res, (c_res) => {
            console.log("task C :", c_res);
        });
    });
});

 

-Promise로 콜백 지옥 탈출

function taskA(a, b) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const res = a+b;
            resolve(res);
        }, 3000);
    });
}

function taskB(a) {
    return new Promise((resolve, reject) =>{
        setTimeout(() => {
            const res = a*2;
            resolve(res);
        }, 1000);
    });
}

function taskC(a) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const res = a*-1;
            resolve(res);
        }, 2000);
    });

}

taskA(5,1)
    .then((a_res) => {
    console.log("A RESULT : ", a_res);
    return taskB(a_res);
    })
    .then((b_res) => {
        console.log("B RESULT : ", b_res);
        return taskC(b_res);
    })
    .then((c_res) => {
    console.log("C RESULT : ", c_res);
});

 

async & await

• async

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

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

console.log(helloAsync());

-결과

async는 함수가 Promise를 반환하도록 하게 하는 능력이 있다.

 

-3초 있다가 출력

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

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

이 코드가 너무 거창하고 길게 느껴지면 await을 사용한다.

 

• await

 

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

async function helloAsync() {
    await delay(3000);
    return "hello async";
}

await는 async가 붙은 함수 내에서만 사용 가능하다. await을 붙이면 함수가 마치 동기적으로 작동한다. 즉, await가 붙은 함수는 그 함수가 끝날 때 까지 다음 줄을 실행하지 않는다.

 

API 호출하기

1. 클라이언트가 데이터 요청(Request) -> 2. 서버가 DB에서 데이터 검색(Query) -> 3. DB에서 데이터 찾고(Query Result) 서버에 알려줌 -> 4. 서버는 클라이언트에게 요청 데이터 전달(Response)

 

이 중에서 1번 데이터 요청과 4번 요청 데이터 전달을 우리가 개발할 부분이며 API라고 한다.

API와 함수는 둘 다 응답을 받는 것인데 API는 컴퓨터 외부에서 받아서 응답을 언제 받을지 모른다.

 

• API 호출

-오픈 API 사이트

https://jsonplaceholder.typicode.com/

JSONPlaceholder - Free Fake REST API

JSON placeholder는 개발자들에게 별 조건 없이 API 호출에 대해 범위 데이터를 응답해준다.

저 중에서 /posts로 들어가면 나오는 주소를 알아야 API 호출이 가능하다.

주소: https://jsonplaceholder.typicode.com/posts

 

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

getData();

fetch는 API 호출을 도와주는 내장 함수이다. 

rawResponse는 편지 봉투 자체라할 수 있고 jsonResponse는 봉투 안에 들어있는 편지라 할 수 있다. 그리고 저 사이트의 내용은 json 형식으로 이루어져있다.