[TIL] 210728 - 항해 52일차

무언가를 만들어봤던 경험은 언젠가 꼭 도움이 된다😊😊

🐷 실전 프로젝트 중

우리의 협업돼지 만드는 중

Toast UI Editor

마크다운 에디터 중 국내산(?)이라 이해도 쉽고 쓰기도 쉬운 Toast UI Editor를 사용했다.

사실 엄청 겁먹고 시작했는데, 코드가 너무 짧아서 당황스러웠다.

import "@toast-ui/editor/dist/toastui-editor.css";
import { Editor } from "@toast-ui/react-editor";
import "tui-color-picker/dist/tui-color-picker.css";
import "@toast-ui/editor-plugin-color-syntax/dist/toastui-editor-plugin-color-syntax.css";
import colorSyntax from "@toast-ui/editor-plugin-color-syntax";
import "prismjs/themes/prism.css";
import "@toast-ui/editor-plugin-code-syntax-highlight/dist/toastui-editor-plugin-code-syntax-highlight.css";
import codeSyntaxHighlight from "@toast-ui/editor-plugin-code-syntax-highlight";

const Writer = () => {
   const editorOpt = {
    previewStyle: "vertical",
    height: "500px",
    initialEditType: "markdown",
    useCommandShortcut: true,
    previewHighlight: false,
    ref: editorRef,
    initialValue: "",
    plugins: [colorSyntax, [codeSyntaxHighlight, { highlighter: Prism }]],
  };
  
  return <Editor {...editorOpt} />
}

모든 코드를 다 작성한 것은 아니지만, 그래도 저렇게만 만들면 에디터가 떡하니 등장한다.

이렇게 쉬운 걸 써도 되나 싶을 정도🙄🙄

그래서 기본 에디터 패키지에 없는 코드블럭 언어별 색상이나 텍스트 색 바꾸는 기능을 추가해서 양심을 조금은 챙겨봤다.

에디터에 작성된 텍스트를 받아오는 것도 굉장히 편리했다.
markdown, HTML 두 가지로 받아올 수 있었다.

다만 이렇게 받아온 정보를 DB에 그대로 저장해도 되는 지를 알 수가 없다.

서치를 해보면 그대로 저장하신 분들도 많고, HTML entity로 변환해서 저장하고 사용할 때 다시 HTML로 변환했다는 분들도 계셨다.

이 부분은 좀 더 고민해보고 찾아보는 노력이 필요할 것 같다.

+) 오늘 다 했다고 생각하고 PR을 날렸는데 생각해보니 이미지를 처리하지 못했다.

에디터에서 기본적으로 이미지를 올릴 수 있게 해주긴 하는데, base64 문자열이 아래와 같이 끝도 없이 보여진다.

에디터를 base64가 점령해버렸다🤷🏻‍♀️

이 부분을 잊은 나를 세게 치고... 내일의 나에게 미뤄본다ㅎㅎㅎ

캘린더 만들기

협업 툴 일정을 관리할 수 있는 캘린더가 꼭 필요했다.
다행히도 나에게는 리액트 심화 과제에서 독자적 길을 가겠다며 혼자 외롭게 구현했던 🔥매운맛 과제 캘린더🔥가 있었다.

그 친구를 기반으로 좀 더 다듬고, 기능을 추가해서 사용하려고 한다.

추가할 기능으로는

• 여러 날에 걸친 일정을 등록하고 보여주기
• 편집 기능 추가
• 투두리스트와 연동

그리고 생각하려면 얼마든지 더 생각할 수 있을 것 같다.

캘린더를 처음 구현할 때는 조금 막막했는데, 두 번째가 되니 이미 내 코드도 있고 머리 속으로 코드가 그려지기도 해서 너무 편하다.

항상 했던 것을 할 수는 없지만 많은 것을 만들어보고 경험한다는 것은 언젠가 꼭 도움이 되는 것 같다.

더 좋은 캘린더로 보여질 수 있도록 노력해본다✨✨

서버와의 연결은 내일로

내일 1차 배포를 해야해서 서버와 api 연결을 오늘로 예상하고 있었다.
저녁 쯤 서버 배포가 될 것 같아서 오늘 밤 샐 각오로 에디터를 완성하고 나서는 잠도 좀 잤다ㅎㅎ

하지만 오늘 오후에 있었던 튜터님과의 팀 면담에서 DB 구조를 엎고 다시 만들어야겠다는 결론이 내려졌다.

다행히 프로젝트를 시작한 지 얼마 되지 않았기 때문에 빠르게 엎게 되었다.
그래서 서버 배포는 내일 오전이 될 것 같다ㅎㅎ

조급한 마음이 안드는 것은 아니다.
하지만 1차 배포가 완성인 것도 아니고 더 완성도 있는 구조를 만드는 것이 내일 완벽한 1차 배포가 되는 것보다 훨씬 중요하다고 생각한다.

팀플에서 문제가 생기지 않으면 그게 더 이상하다.

내일은 아침부터 정신차려서 개발해야 한다는 마음으로 오늘은 오랜만에 일찍 잠들 예정이다.
매일 기본 새벽 3-4시에 자다가 잠이 올 지 모르겠는데 노력은 해봐야지.

내일도 힘내자💪💪