결국 포기했다.
그냥 너무 어렵다. 에디터 만드는건 아무나 하는 것이 아니었다. 그래서 그냥 팁탭을 적용시켰다. 많은 문제들이 알아서 잘 해결된 것 같다.아아.... 아아아아아아아ㅏ......
개발
산세리프 기본적용 css
body { font-family: "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", "Segoe UI", BlinkMacSystemFont, -apple-system, sans-serif; }
업데이트 일지 #2
아래는 직접 마크다운 위지윅 편집기를 만드는 과정에서 기록한 글이다. 현재는 TipTap 에디터 활용하였다. (굴복...) 이탤릭체... 넌 누구냐 마크다운 문법에서는 별 한 개로 감싸면 기울임꼴이 된다. 이렇게 그리고 별 두개로 감싸면 굵은 글씨가 된다. 이렇게 그리고 이 두개 조합도 된다. 이렇게 그런데 아무래도 형식이 비슷하다보니 적용되는 순서도 그렇고 검출하는 방식도 그렇고 참 쉽지가 않은 것 같다. 지피티나 잼민이는 AST 구조로 하라고는 하는데 뭐 어느정도는 설득력 있는 말이긴 하다. 그런데 왠지 안 써도 될 것 같은 느낌~~~같다거나?닷떼 이런 식의 사용법도 가능하거든ㅋㅋㅋ ㅎㅎ. 지우는 부분도 현재로서는 크...
업데이트 일지 #1
아래는 직접 마크다운 위지윅 편집기를 만드는 과정에서 기록한 글이다. 현재는 TipTap 에디터 활용하였다. (굴복...) 오늘부터 작성하는 내용들은 그냥 업데이트 일지라는 제목으로 할까보다. 헤딩 적용 방법을 그냥 무식하게 바꿨다. 기존에 이리저리 위치 계산하고.. 노드 뗐다 붙였다... 엄청나게 뭔가 노력을 했는데 그냥 기존에 있던 커서 탐지 및 복원 로직이 생각보다 스마트해서, 그냥 내용 바꿔치기로 하도록 했다. 방법은 간단하다. 탐지에 앞서 줄을 노멀라이즈 한다. 그 다음에 탐지를 하는데, textContent 기준으로 정규식 판단해서 적용한다. 그다음에 그냥 HTML 날리고 다시 적용시키는 방법을 사용했다. 다만 모든 문자에 대해서 그렇게 적용하면 오버헤드가 너무 많이...
게시판 카테고리 추가
게시판에 카테고리 기능을 추가했다. 사실 UI적인 부분을 추가하는 부분이 크게 어렵지는 않았다. 자바스크립트로 창 열림/닫힘을 구분하는 게 아닌 CSS로 제어하기 얼마 전 습득했던 Tailwind CSS의 플러그인인 DaisyUI의 플로팅 버튼 컴포넌트 사용 방법을 보고 터득한 기술이다. 부모 요소에다가 :focus-within을 걸어버리면 내부 요소에 포커스가 잡혀있는 경우 해당하는 상태로 부모 요소가 지정된다는 사실! 즉, 라벨 요소에 클릭 가능한 요소인 것처럼 인식되게끔 role="button"과 tabindex="0"을 걸어주고, 드롭다운 항목에도 모두 그렇게 해주면 문제는 해결된다. 그러면 자바스크립트 없이도 드롭다운을 구현할 수 있게 되는 놀라운! 선택하면 창이 닫히게 ...
편집기에서 구조적으로 가지고 있던 문제들을 대부분 해결했다.
아래는 직접 마크다운 위지윅 편집기를 만드는 과정에서 기록한 글이다. 현재는 TipTap 에디터 활용하였다. (굴복...) 키다운 중심 조작에서 뮤테이션옵저버로 기존에 개선한 버전은 각 줄마다 contenteditable을 부여해서 그 안에서 자유롭게 편집 및 데이터가 바인딩되어 작동되도록 했었다. 이 버전만으로도 작동하는 데에는 크게 문제는 없었지만, 문제는 키입력 시 처리해줘야 하는 내용이 너무 많다는 데 있었다. 예를 들면... 화살표 버튼으로 문장 사이를 왔다갔다 해야 하는 경우 커서 위치를 파악하여 앞뒤로 옮겨주는 작업을 해야 했었고, 마찬가지로 백스페이스와 엔터 동작도 그러했다. 무엇보다 가장 큰 문제는, 문장 간 드래그 선택이 안된다는 것이었다. 여러가지로 생각을 ...
편집기를 좀 더 반응성 있게 만들었다.
아래는 직접 마크다운 위지윅 편집기를 만드는 과정에서 기록한 글이다. 현재는 TipTap 에디터 활용하였다. (굴복...) 최대한 충돌이 일어나지 않도록 해보았다. 기존에는 좀 이상했던 것이 사실이다. 렌더링을 걸면서 내용까지 수정하려니 뭐가 이상할래도 많이 이상했겠지... 여러모로 작동이 제대로 안되는 것 같길래 아예 뜯어 고쳤다. 최대한 반응성 있는 방향으로 설계한 것이다. 가장 큰 변화는 자식 요소에 바인딩을 걸지 않았다는 것이다. 바인딩을 걸지 않으니깐 양방향 업데이트든 뭐든 충돌이 발생할 여지가 없다. 한가지 아쉬운 것은 # 을 칠때마다 바로바로 헤딩의 크기가 나타났으면 좋겠는데 그건 나중에 개선을 해볼까 한다. 어쨌든.... 목표는 달성한 것 같아 ...
역시 개발을 하려면 수학을 잘해야 한다는 것을 깨달은 건에 대하여
그... 목록에서 타이틀바 위치 반영하는 방식을 수학적으로 제대로 계산했다. 뭔가 이전에 Math.max를 남용했더니 내가 원했던 위치가 아니라 좀 다르게 움직이던데 한계값을 0-100으로 하고 제대로 계산을 했더니 잘 반영이 되었다. 이제는 조회수 카운트하는 로직을 좀 계산해야 하는데... 귀찮으니깐 프리로드를 끄는 편이 나을듯. 뿌듯하도다.
메인 화면에 랜덤 게시글 보기 기능을 완성했다.
mongodb의 aggregate 기능은 좀 어려운 것 같다. 쓸때마다 검색해서 써야겠다... 어떻게 하면 좋을까... 하면서 방법을 좀 생각해봤는데, 일단은 활성화된 게시판을 설정에서 가져온다. 게시판 목록을 배열로 변환하고, 랜덤 함수를 이용해 아무거나 뽑는다. 해당 테이블에서 또 aggregate의 sample 기능을 활용해 아무 게시글 하나를 뽑는다. 이렇게 하여 기능을 완성했다. 이정도면 충분한 것 같은데, 아무래도 진정한 랜덤은 아니게 된 것 같지만,,, 뭐 어쩌겠나 내 실력이 아직 그정도인 것을ㅋㅋㅋ
줄바꿈 로직을 약간 수정했다.
아래는 직접 마크다운 위지윅 편집기를 만드는 과정에서 기록한 글이다. 현재는 TipTap 에디터 활용하였다. (굴복...) keydown 이벤트와 input 이벤트 분리 기존에는 keydown 이벤트에 setTimeout을 주어 텍스트가 입력되거나 입력이 변경된 후에 대한 처리를 해주었었다. 그런데 이게 좀 불안정했다. 아직도 좀 불안정한 것 같다.. 이렇게 하면 어찌 저찌 되는 것 같다... 다시 한 번 진짜로 해결한 것 같다!!! 원래는 커서가 문장의 맨 처음 가있을 때 백스페이스를 누르면 커서가 이전 문장 맨 뒤에 붙는 게 아니라 맨 앞에 붙는 문제가 있었고, 커서가 어디에 있든지 그 위치에서 엔터를 눌러 줄바꿈 하면 그때도 커서가 다음 문장의 맨 앞에 가는 문제가 있었다...