[7장] 왜 Promise를 적용한걸까요?

jasongoose commented 6 days ago

🧐 Question

예제 중에 아래와 같이 작성한 코드가 있는데 왜 즉시 해결되는 Promise를 적용한걸까요?

적용하는 것과 적용하지 않았을 때 어떤 차이점이 있을까요?

addChangeListener((state) => {

  // 1.
  Promise.resolve().then(() => {
    window.localStorage.setItem('state', JSON.stringify(state))
  })

  // 2.
  // window.localStorage.setItem('state', JSON.stringify(state))
})

📝 Reference

chhw130 commented 5 days ago

어느정도 일관된 렌더링 보장을 하기 위해서 작성한 것 같습니다.

사용자에게 업데이트된 UI를 즉각적으로 보여줘야하는데, localStorage동작은 화면 뒷단에서 발생하는 것이라 우선순위가 비교적 낮아 비동기적으로 처리했다라는 저의 개인적인 생각입니다.(확실하지는 않아요..ㅠㅠ) 과거 localStorage가 성능적으로 이슈(메인 스레드 block이슈, 오버헤드, 구형 브라우저, 사용자 기기)가 있어 저자가 고려하지 않았을까라는 생각이 드네요! localStorage사용을 중단하세요!

horang-e commented 5 days ago

슬며시 클로드를 사용해서 질문해보니 마이크로 태스크 큐를 만들기 위함이라고 하네요! react로 치면 batching처리와 비슷한 원리로 사용하는것 같습니다! 상태가 변경이 될 때 일반 큐에 쌓여 매번 일어나게 하는것이 아닌 마이크로 큐에 쌓여 마지막 상태변경만 저장하도록 보장해 준다고 합니다!

// Promise 없이 직접 저장할 경우의 문제점
addChangeListener(state => {
  localStorage.setItem('state', JSON.stringify(state)) // 즉시 실행
  // 연속된 상태 변경시 불필요한 저장 발생
  // 저장 중 에러시 렌더링도 영향받을 수 있음
})

// Promise를 사용한 최적화된 방식
addChangeListener(state => {
  Promise.resolve().then(() => {
    localStorage.setItem('state', JSON.stringify(state))
    // 마이크로태스크 큐를 통해 최적화
    // 에러 격리도 가능
  })
})

FE-StudyWithMe / FE-without-framework

[7장] 왜 Promise를 적용한걸까요? #51

🧐 Question

📝 Reference