자바스크립트 공부
비동기 처리에 관한 공부
Promise
저는 주로 API를 콜할때 fetch 나 axios를 통하여 콜을 하는데 , 원래 fetch , axios는 Promise 기반 위에 쌓여진 ES8문법 , 외부 라이브러리 입니다 .
이전에는 비동기 처리를 하기 위해서 콜백 함수를 활용 해야했는데요 ,
콜백 함수로 처리를 할 경우 코드가 많이 난잡해져서 흔히 말하는 콜백지옥 ( 가독성이 매우 떨어지는 긴 콜백 함수들로 연결되어있는 코드) 이 생성 됩니다 .
이러한 문제를 해결하고자 Promise를 사용하게 되었는데요 ,
const myPromise = new Promise((resolve , reject) => {
// 구현
})
이렇게 Promise를 생성해서 사용하면 되고 ,
호출이 성공하면 resolve , 실패하면 reject를 호출 해 주면 됩니다 .
작업이 끝나고 또 다른 작업을 해야할때는 .then()을 붙여주어 체이닝을 통해 코드의 가독성을 좋게 할 수 있습니다 .
에러 (reject) 시엔 .catch를 하면 됩니다 .
async / await
async / await은 ES8 문법으로 Promise의 사용을 더욱더 편리하게 해줍니다 .
저는 보통 이렇게 사용했습니다
const getData = async () => {
const response = await fetch('endpoint');
const data = await response.json()
}
getData();
이렇게 사용하면 API를 콜 할수 있었습니다 .
기본적으로 async function은 선언할때 파라미터 괄호 앞 (arrow function 기준) 에 async 를 붙여 사용하고 ,
일반적인 function 선언은 async function newFunction() { console.log('This is my new function ..');} 이렇게 작성합니다.
비동기로 처리해야할 구문 앞에 await 를 붙여서 사용합니다 .
function sleep(ms) {
return new Promise(resolve => setTimeout(resolove,ms))
}
const getDog = async () => {
await sleep(1000)
console.log('멍멍')
}
const getCat = async () => {
await sleep(2000)
console.log('야옹')
}
const getTiger = async () => {
await sleep(3000)
console.log('어흥')
}
async function execute() {
const result = Promise.all([getDog(),getCat(),getTiger()])
console.log(result)
}
Promise.all 을 사용하면 한번에 작업을 실행할 수 있습니다 .
Promise.race라는것도 있는데 , 사용하게 되면 가장 빨리끝난것 중 하나만 결과값을 가져옵니다 .
위 코드에서는 getDog함수가 가장 빨리 끝날테니 console.log('멍멍') 을 출력 하겠죠.
하지만 Promise.race에서는 가장 빨리끝날 함수가 실패를 한다면 , 남은 2개의 함수가 정상적으로 처리가 될 것임에도 불구하고
실패로 간주합니다 .
Understanding of Computer's memory system
컴퓨터는 메모리에 있는 data 를 cpu가 계산해주는 계산기입니다 .
CPU와 메모리가 데이터와 주소신호를 주고받는일이 프로그래밍이라고 할수 있습니다 .
메모리는 전원을 끄면 모든 상태를 잃어버리기때문에 오래 기억해두려면 하드디스크 같은 저장장치를 사용해야합니다 .
메모리를 다루는일이 프로그래머가 하는일
저수준 언어로 프로그래밍을 하는것은 너무 고된일이기 때문에 고수준 언어를 개발 후 고수준언어를 저수준언어로 번역처리를 합니다.
고수준 언어를 저수준 언어로 번역하는 과정은 보통 몇단계를 거쳐서 이루어 집니다 .
1. 프로그램 글자들이 UTF-8 사전을 이용해 2진수 형태로 저장되어 있습니다 .
2. lexer는 자신의 규칙(사전)을 이용해 어떤 기호인지를 알려주는 의미를 부여합니다 .
3. 파서는 어셈블러 형식으로 수행할수있는 형태로 의미를 부여합니다 . 이때 트리구조를 사용합니다.
4. AST를 이용해 어셈블러 형식으로 번역됩니다 . https://astexplorer.net/ 에 가보면 자바스크립코드를 AST트리구조로 번역해 볼 수 있습니다 .
High-order-array functions
왠만한 고차함수들은 이해가 되는데 , reduce가 정말 이해가 되지않아 다시한번 정리를 해보려고 합니다 .
reduce의 목적은 array안에 있는 요소들을 조건에 맞추어 하나의 값 ( number , array , object) 로 재 정의 하는것입니다 .
첫번째 파라미터 , (통상 acc라고 네이밍을 합니다) 는
두번쨰 파라미터 , (통상 curr라고 네이밍을 합니다) 는 현재 이터레이션, 벨류 입니다 .
const staff = [
{name:'bob', age:20 , position:'developer' , salary:100},
{name:'peter', age:25 , position:'designer' , salary:300},
{name:'susy', age:30 , position:'the boss' , salary:400},
{name:'anna', age:35 , position:'intern' , salary:10},
]
* number 로 다시 재정의 한다면 ?
const dailyTotal = staff.reduce((acc,curr) => {
acc += curr.salary
return acc (***** 항상 첫째 파라미터를 return 해주어야 reduce의 의미가 있습니다 *****)
},0)
console.log(dailyTotal()) // 810
두번째 인자로 number로 재정의 해주려면 0 , 배열로 재정의 해주려면 [] , 객체로 재정의 해주려면 {} 을 삽입하면 됍니다 .
즉 두번째 인자는 initalvalue 라고 할수 있습니다 .
find
find 는 해당 array를 순회하면서 조건에 맞는 참 값중 첫번째 값을 return해줍니다 .
const findAge = () => {
return staff.find(people => people.age > 25)
}
console.log(findAge()) // {name:'susy', age:30 , position:'the boss' , salary:400}
map
map은 조건에 맞는 새로운 배열을 생성합니다 . 각 요소를 순회하며 조건을 적용시킵니다 .
const upSalary = () => {
return staff.map((people => people.salary + 100))
}
console.log(upSalary()) // [200,400,500,110];
filter
filter는 조건을 통과한 새로운 배열을 생성합니다 .
const findAge = () => {
return staff.filter(people => people.age > 20)
}
console.log(findAge()); // [{name:'peter', age:25 , position:'designer' , salary:300},
{name:'susy', age:30 , position:'the boss' , salary:400},
{name:'anna', age:35 , position:'intern' , salary:10}]
concat
concat은 배열과 배열을 합쳐서 새 배열을 반환합니다 .
const newStaff = [{name:'Daysha', age:21 , position:'investor' , salary:1300}]
const addStaff = () => {
return staff.concat(newStaff);
}
console.log(addStaff()) // [{name:'peter', age:25 , position:'designer' , salary:300},
{name:'susy', age:30 , position:'the boss' , salary:400},
{name:'anna', age:35 , position:'intern' , salary:10},
{name:'Daysha', age:21 , position:'investor' , salary:1300}]