데모데이 질문리스트

💯 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 라이브러리에 대한 학습과 수정하는 방법에 대해서만 학습을 진행하였습니다.

TS와 JS를 같이 사용한 이유가 있나요?

• TS는 정적 타입을 지원해줍니다. 이로 인해서 컴파일 단계에서 오류를 포착할 수 있습니다.

배경화면을 만든 이유가 무엇인가요? 수식편집기에서 배경화면이 있으면 좋은 점이 있나요?

• 배경화면은 카카오테마를 토대로 만들었습니다. 장점이 있다기보단 사용자들이 수식 작성을 딱딱하게 하지 않도록 배경화면에 효과를 주어서 좀 더 재미를 주기 위해서 사용하였습니다.

nginx는 어떤 용도로 사용하셨나요?

• 프론트엔드만으로 프로젝트를 구성하면서 정적 파일을 빌드하고 이 파일을 서버에 보여주기 위해서 사용하였습니다.

움직이는 배경화면(예를 들어 눈 내리는)은 이미지로 다운로드했을 때, 움직이는 gif로 저장되나요?

• 움직이는 gif를 저장하기 위해서는 프레임 단위로 저장을 해야했는데, 그 과정에서 렌더링 비용이 상당히 많이 들었습니다. 이 기능을 넣게 되면 렌더링 비용이 오래 걸릴 것 같다는 생각이 들어서 기능을 추가하지 않았습니다.

움직이는 배경화면이 있음으로서 생겨나는 성능 저하/최적화 문제는 없었나요?

• 일단 성능 저하에 대한 고민은 requestAnimationFrame과 setInterval에 대한 고민, 가상 canvas를 설정함으로써, 반복 렌더링 작업을 줄여보는 시도를 해보았습니다.
• 하지만 canvas자체가 매 순간마다 지우고 그려주는 작업을 반복하기 때문에 이 비용을 좀 더 최소화할 방법을 좀 더 생각해봐야 할 것 같습니다.

drag & drop으로만 작성이 가능한가요? 직접 작성이나 클릭으로도 가능한가요?

• 둘 다 사용 가능합니다. drag & drop을 만든 목적은 사용자들이 커서 이동을 하지 않고, 원하는 위치에 수식을 넣기 위해서 사용하였습니다.

서버는 따로 없나요?

• 서버는 백엔드 기능이 없기에 프론트엔드만 정적 파일을 nginx를 이용해서 서버에서 볼 수 있도록 하였습니다.