데모데이 질문리스트

💯 context api vs redux

• context api

  • Redux와 마찬가지로 상태의 중앙 관리를 위한 상태 관리 도구입니다.
  • Redux와 다르게 React에서만 사용할 수 있습니다.
  • 전역 상태가 저장되는 context, 전역 상태를 제공하는 Provider, 그리고 전역 상태를 받아 사용하는 Consumer로 구성합니다.
  • context API는 작성해야하는 코드도 많고 복잡하기 때문에 이런 부가 기능이 필요하지 않다면 Redux를 사용하지 않아도 됩니다.

• redux

  • 로컬 스토리지에 상태를 영속적으로 저장하고 시작할 때 다시 불러오는데 특히 뛰어납니다.
  • 상태를 서버에서 미리 채워서 HTML에 담아 클라이언트로 보내고 앱을 시작할 때 다시 불러오는데 특히 뛰어납니다.

👍 canvas 최적화 방법론

• 캔버스 최적화

그림판 구현 방법

• addEventListener를 이용해서 mousedown, mouseup, mousemove 이벤트를 적용하였고,
• mousedown이벤트가 발생하면 drawing을 true, mouseup이벤트가 발생하면 drawing을 false로 정해주었습니다.
• mousemove는 mousedown이 발생했을 때만 적용되고 mousedown일 경우, 그림판에 색칠해주고, mouseup일 경우 그리는 것을 그만두도록 구현하였습니다.

애니메이션 구현 방법

• requestAnimaionFrame을 이용해서 canvas에 애니메이션을 그리고 지워주는 역할을 반복하였습니다.
• 애니메이션을 지울 때는 cancelAnimationFrame을 적용하여 적용된 애니메이션의 id를 제거해주었습니다.

setInterval과 requestAnimationFrame의 차이

• setInterval의 경우 언제나 콜백함수를 호출하기 떄문에 브라우저의 다른 탭이 선택되는 경우 실제 화면을 다시 그릴 필요가 없는 경우에도 화면을 다시 그리게 됩니다.
• 현재 창에 표시되지 않으면 애니메이션을 중지하여 배터리 수명과 성능향상에 도움이 됩니다.
• 1초에 60프레임 호출

웹 최적화에 대한 고민