[WIL] 항해 99 9주차 회고록

1. 웹에디터를 어떤걸 사용해볼까?

첫번째 시도 : TOAST UI Editor

공식문서 : https://nhn.github.io/tui.editor/latest/

Editor | TOAST UI :: Make Your Web Delicious!

 

NHN에서 만들어서, 한글에 최적화가 잘 되어있고, 일단 예쁘고, 마크다운 편집기로 핫한 에디터다. 심지어, 코드 하이라이팅이라던가 컬러같은 플러그인들이 잘 되어있다! 설치하는 방법이 너무 간단해서 놀랬다... 😮

 

아래와 같이 미리보기를 꺼둘 수도 있다.

 

모바일 사이즈로 가면 이렇게 더보기 버튼이 생긴다.

 

이제 하위의 버튼들을 클릭해보면..!!! 레이아웃이 깨지는 현상을 발견할 수 있었다... 아... 

플러스로 이미지를 첨부하면 기나긴 base64형식이 그대로 나열되는데... 아....

 

 

두번째 시도 : CKEditor

공식문서 : https://ckeditor.com/docs/ckeditor5/latest/

WYSIWYG HTML Editor | Collaborative Rich Text Editor | CKEditor

 

현재까지도 업데이트가 활발하게 이루어지고있는 것 같은 CKEditor을 써보기로 했다! 

아래 디자인은 클래식 버전이다. 확실히 지루하다...😫

 

하지만 모바일에서 잘 작동된다는 점! 좋다! 

 

에디터를 커스터마이징하려면... eject를 써야하는데....🤣 이미 나는 예~~~전에 eject를 써본 적이 있다. 리액트 처음 알게 된 햇병아리인 내가 멋도 모르고 써보다가 대참사를 겪었던 기억이 떠올랐다.. 다행히도 꼭 eject를 쓰지 않아도 된다. craco를 사용하면 된다고! craco는 eject를 쓰지않고, 웹팩 설정을 건드리는 착한 친구다! 참고 사이트는 여기에 있다.

https://velog.io/@kyungjune/react-ckeditor5-%EA%B8%B0%EC%96%B5%ED%95%98%EA%B8%B0

react ckeditor5 기억하기

 

 

이것저것 넣었다.

 

모바일? 기가막히게 잘된다!

 

다양한 웹에디터

• Summernote :  폰트를 설정할 수 있는데, 그 폰트들이 한글 최적화가 안됨. 제이쿼리와 부트스트랩도 설치해야함.
• Quill : CKEditor처럼 모바일/웹 둘다 가능하지만.. 수 많은 툴바들이 더보기 버튼 안으로 숨겨지지 않음... 
• Draft : 페이스북에서 관리하는 에디터! 정말 심플하게 구성되어있다. 
• 네이버에디터 : 버전이 3.0이였으면 사용했을텐데... 크흠 
• Prosemirror : 당시에는 데모의 디자인이 따분해서 넘어갔는데, 리덕스처럼 state와 action으로 만들어졌다고? 신기하다

 

2. 나의 에디터 우당탕탕은 아직 끝나지 않았다!

에디터에서 이미지를 추가해서 작성하면, 오류! 그 이유는 이미지를 BASE64로 변환하기때문! 그래서, 사용자가 이미지를 업로드하면 파이어베이스 스토리지에 업로드해서 업로드 된 이미지의 url을 받아와서 서버에 글 내용을 올릴때 같이 올릴 것!! 2일동안 이 부분에서 계속 매달려서 진이 빠진다... 정말......... 정말 다양한 방법을 시도했고, 오류를 범했고, 삽질하고 고치고... 🤣🤣 너무 괴로웠다. 모든 걸 끝내고 난 뒤에보니 이 녀석과 좀 친해진듯?

 

문제 1. 파이어베이스에 있는 TaskEvent가 먹지 않는다면?

storage 안에 TaskEvent가 있는지 없는지 꼭꼭 확인하자 

 

 

문제 2. 파이어베이스에 접근이 안된다

일단, 파이어베이스 규칙을 수정했다. 기존은 로그인한 유저만 읽고 쓰기가 가능하게 되어있었는데, 나는 파이어베이스 로그인을 사용하지 않으니 모두가 사용할 수 있도록 적용했다.

 rules_version = '2';
service firebase.storage { match /b/{bucket}/o { match /{allPaths=**} { allow read, write: if true; } } }

 

문제 3. 새로고침을 하면 에디터의 플러그인이 사라진다?

아래처럼 조건문을 주면 오류가 사라지더라! :-) 얏호

 

문제 4. 수정페이지에서 에디터의 모든 입력값을 다 지우면 오류가 난다.

이건 정말 신기한데, 값이 없으면 { } 객체로 처리해주면 오류가 안난다. 이게 근본적인 해결법인지는 모르겠으나.. 무튼 수많은 삽질 속에 해결했다.

 

3. 숫자 0은 falsy해

왼쪽이 코드, 오른쪽이 코드에서 쓸 카테고리다. 딱봐도 저 "0" 가 수상한데, 그 이유가 있다. 

나는 혹시나 카테고리 Id들이 변해버릴까봐, 저렇게 객체로 저장하고 있었다. 카테고리를 이용해 map을 돌릴 때 객체 안에 있는 categoryId를 사용했다. 카테고리에 0이라고 등록이 되어있지만, 2번째 사진의 예외처리 조건에서 카테고리가 없다고 뜨는것! 숫자 0은 false로 인식해서 나타난 문제였다. 0은 falsy해서 아래처럼 !로 조건을 주면 false로 찍혀서 조건 안에 있는 것들이 실행되지 않는다. 그래서 그 때 당시에 "0"을 줬었다. 기억하자 숫자 0은 falsy한 값이다. 알면서 놓치는 이 기이한 현상.. 

 

결국에 저 카테고리를 다른데에서도 사용할 곳이 생겨서 "0"을 다시 숫자로 돌리고, 조건을 변경했다.

 

오류가 나서 한번 더 고쳤다 ^^.. 조건을 다시 되돌리고, setPost를 할때 `${ele.categoryId}` 이렇게 string으로 변환해서 넣어주기로했다.