📝Text Editor

처음에는 여러 에디터를 찾다가 어떤건 한글 입력이 잘 안되고, 또 어떤건 입력은 되지만 state에서 마지막 글자가 반영이 안되는 등 약간의 골머리를 썩이다가 친구가 Quill이란걸 추천해 줬다. 그래서 바로 적용해 봤다. Toast에서 만든 에디터가 있는데 시간 나면 다음엔 그걸로 바꾸는게 좀 더 좋을 것 같다.

Quill

npm install react-quill

퀼을 이용하여 에디터를 만들고 스타일과 메뉴를 설정해 줬다.

여기서 중요한 점은 이미지 업로드를 가능하게 해야 한다.
이미지는 다음과 같이 업로드된다.

• 에디터에서 이미지를 선택함
• 선택된 이미지를 서버에 올리고 올려진 이미지의 url을 받음
• 에디터에 img Element를 추가하고 src를 해당 url로 설정함

다음과 같은 과정을 거친다.

이미지를 올려야하는데 나는 이전에 이미 아마존 무료1년을 써버려서 S3를 돈주고 쓰기는 좀 그렇고...
찾아보다가 무료로 이미지 API업로드를 할 수 있는 곳을 알아냈다.

imgBB

imgBB라는 곳은 api로 이미지를 업로드 가능하게 해준다.
깔끔하게 이미지를 올릴 수 있고 변환을 거쳐 원본, 썸네일등 변화된 버전의 링크도 받을 수 있다.
다만 처리를 좀 해야하는지 업로드시 시간이 좀 걸리는 편이다.

아무튼 해당 방법으로 이미지 업로드를 처리하였다.