배포... 내가 만든 웹앱을 라이브에 올려보고싶었다.
취준을 하며 채용사이트를 둘러보던 중 AWS나 클라우드를 이용한 라이브 서버에 대해 관심이 생겨 겉핥기로 강의 하나를 골라 수강했다!
정지운님의 "비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지"를 보고 작성한 글이다
HTML이나 CSS 부분은 빠르게 넘기며 모르는 부분이 있나 없나만 체크하고 넘겼다
시작은 분명 배포를 하기위해 수강했는데 제일 인상깊었던 부분은 바닐라 js의 비동기처리 부분이었다.
분명 비동기처리 란걸 배운거같긴한데... 역시 직접 체득하지않으면 기억이 안나는거같다.
프로젝트 중
먼저 프론트앤드로 취업한 내 친구에게 포트폴리오를 보여주니...
이렇게 하는건 비동기방식을 할 줄 몰라서 힙영역에 있는 데이터들을 그냥 스택으로 옮겨서 처리한거밖에 안된다고 설명해줬다!
(이해가 잘 안되는 부분이다. 내 생각에는 더 세련된 방식이 있는데 왜 옛날방식으로 했냐~ 같긴함.)
비동기 방식과 비동기 처리는 다른 이야기지만!
비동기 처리?
비동기 방식은 병렬로 테스크가 처리되는걸 말한다. 비동기 처리는 그런 비동기 방식에서 순서가 중요할 경우, 즉 코드의 실행 순서를 보장받아야 할 경우 비동기 처리를 한다 라고 부른다.
강의에서 말하길, js의 비동기 처리는 주로 3가지 방식으로 하는데
- 콜백함수
- promise 객체
- async, await
가 있다고 한다.
1. 콜백함수
그저 함수를 내부에 집어넣으면 비동기적으로 순서가 보장되어 실행된다.
// 1
console.log("1등!");
// 2
setTimeout(function () {
console.log("2등!");
// 3
setTimeout(function() {
console.log('3등!');
}, 2000);
}, 2000);
콜백 지옥에 빠질 수 있다.
2.promise 객체
콜백함수의 단점을 개선한다.
promise내부에는 대기, 이행, 거부 상태값이 존재한다.
resolve가 호출 된다 → 이행상태 → promise 객체의 then() 메서드 호출
reject가 호출된다 → 거부 상태 → promise 객체의 catch() 메서드 호출
3.acync, await
promise에서 resolve로 넘어온 값이 await 구문에 반환 되는거라고 이해하면 된다.
async function asyncFunction() {
console.log(1);
const result = await getResult();
console.log(result);
}function getResult() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(2);
}, 2000);
});
}asyncFunction();
이런식으로 js에서 비동기 처리를 한다고 한다.
