데모데이 질문리스트

💯 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프레임 호출

mathquill 라이브러리에 대해서 어느 정도 이해하고 있니

• web 기반에서 수식을 쉽게 편집해줄 수 있도록 도와주는 라이브러리
• latex 문법을 html로 변환하여 보여주는 라이브러리입니다.

렌더링 최적화 경험은 해보았나

• 애니메이션 렌더링을 줄여보기 위해서 requestAnimationFrame 함수를 이용하여 애니메이션을 추가하였습니다.

latex

• LaTeX(ˈleɪtɛk 레이텍[] 또는 ˈlɑːtɛk 라텍[])은 문서 조판에 사용되는 프로그램이다. Tex을 직접 사용하기는 어렵기 때문에, 오늘날에는 latex을 이용하여 문서 조판을 하는 경우가 많습니다.

mathquill의 일부 문법이 적용되지 않는 것으로 알고 있는데 혹시 수정해보았는지

• 물론 그 부분에 대해서 좋은 경험을 할 수 있지만 제한된 시간으로 인해서 저같은 경우는 canvas, 지은님과 수경님은 drag&drop, resizing, undo, redo와 같은 기능적인 요구 사항을 해결하는 것이 먼저였기 때문에 이 부분에 대해서 먼저 해결을 하였고, 시간적으로 오래 걸리게 되어서 mathquill 라이브러리에 대한 학습과 수정하는 방법에 대해서만 학습을 진행하였습니다.