글 작성이 불편한 블로그를 개선 해보자 Part.3

길었던 블로그 개선작업의 완료

작업 돌아보기

1. Next.js 14로 업데이트
2. MDXEditor -> react-md-editor로 변경작업
3. 기존의 md 파일 및 이미지를 supabase storage, database로 이전 작업
4. 전체 레이아웃, posts 레이아웃 및 스타일, post 상세 페이지 레이아웃 및 스타일 변환 작업
5. 페이지네이션 작업
6. 태그 기능 작업
7. 글 작성 후 database 반영 작업
8. 로그인 기능
9. Next.js Parallel Routes 기능을 활용한 로그인 모달 작업

크게 이정도 작업을 했던 것 같다.

기능을 붙이는 작업은 크게 어렵지 않았으나 스타일과 반응형 작업이 상당이 오래 걸렸다.

글 작성 페이지는 velog의 에디터 스타일을 가져와서 제작해 보았다. 이 과정에서 MDXEditor가 내가 원하는 기능을 충족 시켜주지 않아서 아쉽지만 react-md-editor로 변경을 하였다. 에디터 화면이 조금 아쉽긴 하지만 그래도 내가 필요했던 기능 지원 및 전체적으로 글 작성하기 위해서 기존에 md파일을 작성하는 것과 동일하고 preview기능까지 제공해줘서 글 작성에 큰 도움이 되었다.

완성된 에디터 페이지

앞으로 추가 해야 할 일

1. ToC(Table of Contetns)기능
2. 단위 테스트 추가
3. 검색 기능
4. Error page 추가
5. 블로그에서 놀만한 미니게임

위의 내용은 사실 선택사항이지만 그래도 개선 작업이 완료되어서 조금씩 짬내서 추가해보려는 기능들이다.

나의 글 작성을 위한 장소이기도 하지만 짧게짧게 킬링타임으로 즐길 수 있는 미니게임도 제작해보고 싶은 마음이 있다.

겪었던 문제점

한글을 입력하여 태그를 추가하면 마지막 글자가 추가되는 문제 발견 위와 같은 문제가 있어서 gpt한테 질문을 해보았지만 내가 제대로 질문하지 못해서 인지 정확안 해결법을 찾지 못했다.

gpt도 composing 관련 힌트를 주었지만 내가 질문을 한글을 사용시에 문제가 된다고 하였더니 한글입력 자체를 못하게 되버려서 해당 코드로는 해결하지 못했고 구글 검색을 통해서 해결서 해당 블로그(Korean KeyboardEvent Error in React)를 통해서 해결법의 실마리를 찾을 수 있었다.

e.nativeEvent.isComposing을 활용해서 문제해결 할 수 있었다.

/src/components/editor/Tags.tsx
const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
    if (e.nativeEvent.isComposing) {
      return;
    }
    const { key } = e;

    if (key === ',' || key === 'Enter') {
      e.preventDefault();
      const trimmedInput = input.trim();

      if (trimmedInput.length > 0 && !tags.includes(trimmedInput)) {
        dispatch({ type: ActionKind.tags, payload: [...tags, trimmedInput] });
      }
      setInput('');
    }
  };

마무리

꾸준히 차근차근 작업을 이어간 덕분에 마무리를 할 수 있었다. 아직 내가 의도치 않게 동작하는 문제들이 보이기는 하지만 이정도면 그래도 만족이다. 추가로 겪었던 문제점 또는 공부한 부분에 대해서 이곳에서 정리하면서 앞으로 글 작성에 신경을 쓰도록 해봐야겠다.