10.15 항해 33일차 TIL

한우석·2021년 10월 15일
post-thumbnail

20조 REWIND Frontend

Team

  • Frontend : 오세명,한우석 (REACT)
  • Backend : 오준석,최선강 (SPRING)


REWIND란?

  • 그 동안 Backend,Frontend가 공부하고 정리했던 내용들을 각 프레임워크별 (Spring,React,Node.js)로 모두 공유할 수 있는 게시판을 구현하려고 합니다. 게시판은 기본적으로 메인페이지에 모든 프레임워크들의 게시글들이 한번에 보여지며 각 카테고리속에는 그에 해당하는 게시글들만 보여집니다. 유저는 로그인을 하여야 기본적인 서비스를 이용할 수 있습니다.

문제점

Toast UI Editor를 사용하면서 하루종일 해결이 안 되었던 문제가 있었다.
게시글을 수정 하면 상태가 자동으로 업데이트 되지 않는 문제가 있었는데 세명님도 같이 정말 오랜시간을 고민하다가 해결을 하게 되었다.


// '수정하기' 버튼 클릭 시 (문제 해결 전)
  const updatePost =  () => {
    const getMarkDown = toastRef.current.getInstance().getMarkdown();
    if (!validatePost(title, getMarkDown)) {
      return;
    }
    dispatch(
      updatePostToAxios(currentPost.id, {
        id: currentPost.id,
        category,
        title: updateTitle,
        contents: getMarkDown,
      }),
    );
    history.replace(`/post/${currentPost.id}`);
  };




// '수정하기' 버튼 클릭 시 (문제 해결 후)
 const updatePost = async () => {
    const getMarkDown = toastRef.current.getInstance().getMarkdown();
    if (!validatePost(title, getMarkDown)) {
      return;
    }
    await dispatch(
      updatePostToAxios(currentPost.id, {
        id: currentPost.id,
        category,
        title: updateTitle,
        contents: getMarkDown,
      }),
    );
    history.replace(`/post/${currentPost.id}`);
  };

dispatch가 완료되기 전에 history.replace('/post/${currentPost.id}');가 먼저 실행 되어서 LOAD가 되지 않고 이전 게시글을 불러오는 것이 문제 였다.
이 문제 하나를 해결하는데 너무 많은 시간을 투자해서 여유 있을 것 같던 일정이 훨씬 타이트하게 되었다. 그래도 오늘은 너무 늦어서 더 진행을 하지 못했다..

profile
H/W 개발자에서 프론트 엔드 개발자로 전향 하고 있는 초보 개발자

0개의 댓글