[블로그 에디터] 블로그 에디터 프로젝트 회고록
프로젝트 소개
블로그를 운영하면서 마크다운을 사용해도 되지만 그 당시 이 생각을 못 했다.
HTML, CSS를 이용하여 블로그를 꾸미려고 노력을 했다.
그러나 매번 글을 작성하고 거기에 CSS 클래스를 추가하는게 여간 귀찮은 일이 아니었다.
지금와서 생각해보면 이러한 귀찮음도 글을 적지 않은 이유 중 하나이지 않았을까? 라는 생각을 했다.
따라서 이번년도 목표로 개인 블로그 에디터를 개발하는 것을 잡았다.
1월 중으로 빠르게 개발을 해보자 라고 생각했는데 성공적으로 끝마쳤다.
(이 글이 블로그 에디터를 개발하고 처음으로 작성하는 글이다.)
◆ 사이트 이미지
주요 기술 스택 및 개발 기간
◆ 프론트
Next.js, TypeScript
◆ 사용 npm 패키지
immer, js-to-html, react-beautiful-dnd
◆ 배포
Vercel
◆ 개발 기간
2023년 1월 25일 ~ 2023년 1월 29일 / 약 5일
프로젝트 구현 시 새로 배운 내용 및 어려웠던 내용
(아래 내용 4가지는 따로 게시글을 작성할 예정이므로 상세히 작성하진 않았습니다.)
◆ 다중 키보드 이벤트 처리
단축키를 많이 사용해야 해서 다중 키보드 이벤트 처리가 필수였다.
이전에 공부를 했었는데 제대로 하지 않은 것인지 기억이 나지 않아 다시 하였다.
필자는 mac을 주로 사용하기 때문에 command key 이벤트 처리도 따로 해주었다.
◆ onKeyDown 한글 이벤트 중복 처리
onKeyDown에서 이벤트 처리를 하는데 특정 케이스에서 이벤트가 2번 발생하였다.
여러 케이스를 꾸준히 테스트 해보니 한글이면서 아직 입력 중일 때 발생하였다.
처리 방법은 다양하게 있었지만 필자는 isComposing을 사용하여 처리하였다.
◆ Drag and Drop 처리
Drag and Drop은 예시 코드를 참고하여 거의 똑같이 구현하였다.
◆ 볼드 처리
볼드처리를 어떻게 할까? 이게 큰 문제였다.
여러 방법을 꾸준히 생각해본 결과 해당 프로젝트에서 적당히 사용할 수 있도록 구현하였다.
해당 내용은 나중에 자세히 다뤄보도록 해야겠다.
추후 계획
우선 100% 개인 맞춤 에디터여서 약간의 불편함은 존재한다.
지금 이 글을 작성하면서도 느끼고 있는 내용들이 있다.
1. 상단의 버튼들이 sticky가 아니어서 마우스 스크롤을 계속 해주어야 한다.
2. 단축키가 부족하다.
우선 위 내용을 수정해야겠다.
앞으로도 불편한 상황이 없는 이상 발생하는 버그는 known issue로 넘어갈 예정이다.
앞서 말했듯이 100% 본인 맞춤이기 때문에 내가 불편함만 없으면 된다는 생각이다.
결론
이번 프로젝트는 너무 재미있었다.
그리고 나 자신을 위해 만든 것이어서 그런 지 애정이 간다.
그리고 지금 작성해보니 너무 편하고 앞으로는 이것으로 계속해서 블로그 작성을 해야겠다.
