2022년 A4 감상문

A4 텍스트 에디터? 그게 뭘 만드는 건데?

팀: NAVER SmartEditor

발표자님: 노용구

 

 

내가 이 발표를 가장 먼저 들은 이유

이전 제품 개발 중, 필요했던 기능 중에 하나였던 editor에 대한 발표라 먼저 들어보았습니다.

발표의 주된 내용

editor라 하면 당연하게 여겨지는 커서의 움직임이나, 복사 붙여넣기, 이미지와 글을 블록단위로 처리하는 등의 기능들을 개발 및 발전시키면서 있었던 이슈들을 확인할 수 있어 좋았습니다.

 

 

Editor라면 있는 커서 그거 기본으로 주어지는 거 아닌가?..

입력창이라면 가지고 있어야하는 커서는 가상 커서로 구현하고 있다고 합니다. 커서의 움직임을 svg로 위치를 선정해주고, css animation을 통해 깜빡거림을 표현해준다고 합니다. (현재 ide들은 가상 커서를 통해 커서의 움직임을 표현해주고 있다고 합니다.)

Editor 구성 요소

이미지, 글, 이모티콘과 같은 하나의 입력은 블록 단위로 처리해주기 위해 json형식으로 저장을 해둔다고 합니다. 이것을 데이터 모델링이라고 부르는데, 이렇게 사용자 입력을 하나의 뭉텅이로 처리해주기 때문에 뭉텅이 간의 움직임을 잘 구현해줄 수 있었다고 합니다.

Editor의 변천사

이전의 editor부터 현재 editor까지, 이전 Editor의 한계와 그 다음 세대의 Editor에서 한계를 극복한 부분을 확인할 수 있어 좋았습니다. Editor면 자동적으로 html에서 제공되는 것이 많을 것이라 생각했는데,, 간단한 것이 아님을 깨닫게 되었습니다.

dom 직접 변경 🆚 react 렌더링 문제점

인상 깊었던 부분은, contenteditable로 인해 dom이 변경되는 사항이 react의 렌더링 방식과의 충돌되는 부분을 해결하는 방법이었습니다. react는 store에 따라 가상 dom을 통해 렌더링을 한 뒤 dom을 변경하는 방식이고, contenteditable은 dom을 직접 변경하고 그 뒤에 store가 변경되는 방식입니다.

해결

이 두 가지 방식의 렌더링이 서로 충돌이 일어나게 되서, 입력하게 될 경우 오류가 발생한다. 이를 해결하기 위해 입력이 store를 변경할 경우나, dom을 직접 변경하는 경우를 나누고 한 입력이 일어날 경우에는 한 가지 경우에 대한 렌더링만 일어나도록 하여 위 두가지 렌더링 방식에 의한 충돌이 일어나지 않도록 한 것입니다.

위 부분은 코드를 보고 더 심도있게 생각해볼 필요가 있다고 생각합니다.

 

 

알게 된 점

• contenteditable 과 html 태그 속성
• 글이나 이미지를 json으로 모델링하여 블록단위로 처리할 수 있게 함
• 입력창의 커서→svg로 만든 가상 커서임
• 입력창에서 할 수 있는 드래그를 통한 선택창도 svg로 만드는 가상의 선택임

 

 

영상 링크: https://www.youtube.com/watch?v=xDyUFE1pmmY&t=84s