[TIL]20210819 - 멘토링, 모듈화, 비동기

🚀 intro

오늘 팀원들과 루카스의 멘토링을 진행했다.

현업자분과의 멘토링 기회는 너무 소중하다는 것을 다시 깨닳게 되었다.

현재는 내가 알기 어려운 여러 도메인들에 대한 진솔한 이야기, 직장을 선택할 때의 기준, 현업에서 발생할수 있는 문제점에 대한 해결경험 등 하나하나 모두 기억에 남는다. 루카스 👍

물론 멘토링에 대한 기록도 따로 해두었다. (비공개...🤣)

그리고 오늘은 자바스크립트의 모듈화와 비동기 처리에 대해 학습하였다. 😃

📚 오늘 학습한 내용

자바스크립트의 모듈화는 따로 글을 분리해서 작성했다.

➡️ 자바스크립트의 모듈화 ⬅️

비동기

비동기 처리란?

특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성이다.

비동기 예시

• addEventListner
• setTimeout, setInterval

callback

순차적으로 처리해야하는 비동기 작업이 저 많아지면 그 유명한 콜백 지옥에 빠지게된다.

프로미스

프로미스는 비동기 작업을 제어하기 위해 나온 개념으로, 콜백 지옥에서 어느정도 벗어날 수 있게 해준다.

프로미스로 정의된 작업끼리는 연결할 수 있으며, 이를 통해 코드의 depth가 크게 증가하지 않는 효과가 있다.

aync/await

프로미스가 콜백 depth를 1단계로 줄여주긴 하지만 순차적이 아닌 프로미스를 만나면 프로미스가 실행되고 아래 코드가 실행되기 때문에 아직은 불편하다.

aync/await을 이용하면 프로미스를 동기 코드처럼 보이게 짤수가 있다. (실행은 여전히 비동기이다.)

• aync 함수는 실행결과를 프로미스로 깜싼다.
• await은 aync 함수 안에서만 사용가능하다.

in 프로미스

const delay = time => {
  return new Promise(resolve => setTimeout(resolve, time));
};

// 프로미스
const work = () => {
  console.log('work run');

  delay(1000) //
    .then(() => {
      console.log('work 1 complete');
      return delay(1000);
    })
    .then(() => {
      console.log('work 2 complete');
      return delay(1000);
    })
    .then(() => {
      console.log('work 3 complete');
      return delay(1000);
    })
    .then(() => {
      console.log('work all complete');
    });

  console.log('work running..'); // 이부분이 우선 실행되기 때문에 코드의 순서가 헷갈릴수 있다.
};

work();
// work run
// work running..
// work 1 complete
// work 2 complete
// work 3 complete
// work all complete

in aync/await

const delay = time => {
  return new Promise(resolve => setTimeout(resolve, time));
};

// 프로미스
const work = async () => {
  console.log('work run');

  console.log('work running');

  await delay(1000);
  console.log('work 1 complete');

  await delay(1000);
  console.log('work 2 complete');

  await delay(1000);
  console.log('work 3 complete');

  await delay(1000);
  console.log('work 4 completee');
};

work();
// work run
// work running
// work 1 complete
// work 2 complete
// work 3 complete
// work 4 complete

프로미스를 작성하면 비동기 작업들을 순차적으로 작성할 수 있다. 코드가 훨씬 보기 편하다.

💬 comment

비동기에 대해 제대로 이해하기 위해서 CS스터디 주제로 비동기를 선택하여 발표한 덕분에 뒷단에서 어떻게 동작하는지에 대해 배경지식을 갖고 있었다.

하지만 프로미스와 async/await을 활용해본 경험이 없어서 언제 어떻게 활용하는지 감을 못잡고 있었다.

로토님께서 프로미스의 예시 코드에서 async/await으로 변환한 예시 코드를 보니 확 이해가 와 닿았다.

프로미스는 콜백함수의 depth를 줄여주긴 하지만 코드상으로 비동기적인 부분과 동기적인 부분이 섞여있다면 헷갈릴수 있다. 이 때 async/await을 활용한다면 비동기적인 코드도 동기적으로 짤수 있어서 코드를 읽을 때 훨씬 보기 편해지는 것을 깨닳게 되었다.😃

빨리 바닐라 자바스크립트 프로젝트를 시작해서 API요청을 했을 때 오늘 배운 비동기 처리 지식을 적용해보고 싶다.😎