💫 과제리뷰

• 파일이름 PascalCase, camelCase 구분 명확히

• Next 하면 고민 되는 것들

  • pages 안에는 로직이 없는게 좋다 (물론 API는 어쩔 수 없다)

• 아토믹 하게 만드는 조건

  • 디자이너가 이미 ‘폴더 구조’를 알고 작은 단위로 디자인을 해줬을때 하면 좋음
  • 참고로 예리님은 한번도 안해봤다고 함 ㅋㅋ

• 대충하고 넘어가기 보다는 POB 끝나고 나서라도 완성하자

• Next JS는 우리가 렌더링 방식을 정할 수 있다

  • SSR : 정적인 것들 카테고리
  • CSR : 동적인 것들 ⇒ 쉽게 바뀌는 것들

• CSS 똑같이 구현하는거는 FE의 개발자의 중요한 역량 (리뷰마다 계속 말씀하심 👀)

• E2E 테스트를 한 경험은 주니어에게 정말 소중한 경험 ✨
  
  

📎 학습 자료

🏅 시작하기 전에

동기

• 정의: 현재 실행중이 코드가 다음 코드가 실행

• 장점: 실행 순서가 보장된다, 읽기 쉽다

• 단점: js가 아무리 빨라도 반복이 많으면 엄청 느려진다
  
  

비동기

🤔 비동기가 필요한 이유

• 자바스크립트 엔진은 한 번에 하나의 task만 실행할 수 있는 Single Thread.

• Single Thread는 한 번에 하나의 task만 실행할 수 있기 때문에 처리에 시간이 걸리는 task를 실행하는 경우 Blocking(작업 중단)이 발생

• 현재 실행중인 코드가 완료되지 않아도, 다음 코드로 넘어감

• 장점: 렌더링 와중에도 비즈니스 로직을 돌릴 수 있다

• 단점: 응답이 언제 올지 모름 (실행순서 보장되지 않음)

• 예시: event, setTimeout
  
  

콜백함수

• 고차 함수(Higher Order Function): 매개변수를 함수로 받은 함수. 즉, 외부에서 콜백함수를 전달받은 함수

• 동기 콜백이 있고 비동기 콜백이 있다

  • 콜백 함수가 꼭 비동기인 것은 아니다 🚨

• 콜백 지옥 때문에 프로미스가 나왔다
  
  

🏅 Promise

프로미스

• 면접에서 많이 물어본다 👀

• 비동기 동작 처리를 위해 ES6에 도입되었다

• Promise ⇒ class ⇒ new 키워드로 인스턴스화 ⇒ 결론: Promise는 object이다

• Promise ⇒ resolve, reject 함수가 있다

  • then 프로퍼티, 성공했을때의 로직 (resolve)

  • 성공하면 무조건 하나만 호출된다 (resolve || reject)

주의해야 할 부분 👀

let promise = new Promise(function(resolve, reject) {
    setTimeout(function() {
        resolve(1); //여기만 실행 됨 🚨
        resolve(2);
    }, 1000);
});

promise.then(function(msg) {
    console.log(msg);
});

프로미스 반환

• promise의 resolve가 다음 then에 callback

• Axios callback
  

프로미스의 상태

• 프로미스 객체 안에 state가 있다 (pending, fulfilled, rejected)

• promise 콘솔 찍어보기

  • pending ⇒ resolve 호출 ⇒ fulfilled

프로미스 에러처리

• .catch가 reject 보다 깔끔하다
  
  

프로미스 마무리

• Promise.all

  • 일 시키고 모든 promise가 성공하면 then
  • 보통 api 여러개의 모든 응답을 받을때 사용
    
    

🏅 감사한 async & await

외부 함수 없이 await 쓰고싶다?

• IIFE 활용

try / catch 사용해야함

🏅 종합

면접에 항상 나오는 질문 👀

• 힙: 메모리가 저장되는 공간

• 콜 스택: Last In First Out

• 콜백 큐: 처리할 메시지의 대기열

• 순서가 어떻게 돌아가는지 직접 그려보면 좋다