블록체인 엔지니어링 부트캠프 2기 - Week 4👏
사진 출처: https://blog.metafor.kr/164
Day 1
DOM API를 재귀함수로 적용해 화면을 만들어보는 시간을 가졌다. 코드를 막상 써려고 하니 뭔가 직관적인 느낌이 들지 않았다. 평소 프로그래밍 스타일에 적용하기에는 무리가 있다고 판단. 그냥 재귀함수를 반복해서 학습한다는 개념에서 해볼 만 했던 시간이었다.
Day 2
비동기 프로그래밍과 관련하여 학습을 진행하였다. 비동기란 어떠한 연산이 순차적으로 작동될 때 기다리지 않고 다음 연산하는 방식을 말한다. 흔히 Node.Js에서 non-blocking I/O를 기본 동작으로 작동된다고 생각을 해봤을 때. 자바스크립트의 싱글스레드를 런타임 환경으로 극복한 멋진 프로그램이라고 생각한다.
Callback
const print = (string) => {
setTimeout(
() => {
console.log(string)
}, Math.floor(Math.random() * 100) + 1
)
}
const printAll = () => {
printString("A")
printString("B")
printString("C")
}
printAll();
DOM API를 재귀함수로 적용해 화면을 만들어보는 시간을 가졌다. 코드를 막상 써려고 하니 뭔가 직관적인 느낌이 들지 않았다. 평소 프로그래밍 스타일에 적용하기에는 무리가 있다고 판단. 그냥 재귀함수를 반복해서 학습한다는 개념에서 해볼 만 했던 시간이었다.
비동기 프로그래밍과 관련하여 학습을 진행하였다. 비동기란 어떠한 연산이 순차적으로 작동될 때 기다리지 않고 다음 연산하는 방식을 말한다. 흔히 Node.Js에서 non-blocking I/O를 기본 동작으로 작동된다고 생각을 해봤을 때. 자바스크립트의 싱글스레드를 런타임 환경으로 극복한 멋진 프로그램이라고 생각한다.
Callback
const print = (string) => {
setTimeout(
() => {
console.log(string)
}, Math.floor(Math.random() * 100) + 1
)
}
const printAll = () => {
printString("A")
printString("B")
printString("C")
}
printAll();
자바스크립트 내장 비동기 함수 setTimeout() 함수를 사용하여 비동기 함수를 만들어 봤다. 효과적으로 순서를 제어할 방법이 뭐가 있을까??
두 번째 인자로 콜백함수를 전달하면 된다.
const print = (string, callback) => {
setTimeout(
() => {
console.log(string);
callback();
}, Math.floor(Math.random() * 100) + 1
)
}
const printAll = () => {
printString("A",() => {
printString("B", () => {
printString("C", () => {})
})
})
}
printAll();
하지만 콜백을 계속해서 전달함으로써 가독성이 매우 떨어지는데 이것을 Callback Hell 이라고 한다.
이 가독성을 극복할 방법으로 Promise객채를 이용하면 된다.
Promise
const printString = (string) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log(string);
resolve();
}, Math.floor(Math.random() * 100) + 1)
})
}
const printAll = () => {
printString("A")
.then(() => {
return printString("B")
})
.then(() => {
return printString("C");
})
}
printAll();
Promise 객채는 세 가지 상태로 표현할 수 있다.
- pending(대기): 이행하거나 거부되지 않은 초기 상태
- fulfiled(애행): 연산이 성공적으로 완료됨.
- rejected(거부): 연산이 실패함.
.then으로 리턴받은 결과를 다시 활용하여 연결한걸 Promise Chaining이라고 한다.
하지만 이 역시 가독성이 매우 좋다고는 할 수 없다. 이걸 극복하기 위해 자바스크립트는 또다시 새로운 문법은 만들어 냈다.
Async & Await
이 문법은 슈가 코드라고 들 한다. 즉 개발자가 보기 편한 형태라고 볼 수 있다. 하지만 내부적으로 돌아가는 로직은 Promise와 같다.
function one() {
return new Promise((resolve, reject) => {
setTimeout(() => {resolve("one")}, 100)
})
}
function two() {
return new Promise((resolve, reject) => {
setTimeout(() => {resolve("two")}, 100)
})
}
function three() {
return new Promise((resolve, reject) => {
setTimeout(() => {resolve("three")}, 100)
})
}
const result = async () => {
const one = await one();
const two = await two();
const three = await three();
console.log(one);
console.log(two);
console.log(three);
}
result();
말도 안 되게 가독성이 좋아졌다. 또한 병렬적으로 비동기 함수를 리턴 값을 받아 오기 때문에 성능 또한 좋아졌다고 볼 수 있다.
결론
아직도 배울 게 한참이나 많은 자바스크립트. 깊게 파고들면 파고들수록 어려움이 많아 진다.
Day 4~5
기대하고 긴장도 되는 HA 시간이다. 이때까지 배운 섹션의 내용을 복습겸 시험을 보는 날이다. 떨리는데...?
기대하고 긴장도 되는 HA 시간이다. 이때까지 배운 섹션의 내용을 복습겸 시험을 보는 날이다. 떨리는데...?
여기에 대해선 스포가 될수 있기 때문에 자중하겠다.
Author And Source
이 문제에 관하여(블록체인 엔지니어링 부트캠프 2기 - Week 4👏), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@yeoungil012/블록체인-엔지니어링-부트캠프-2기-Week-3-1e3hypmp저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)