오늘의 목표

• 현재 로그인 한 계정 소유의 블로그인 경우 수정 기능 활성화
• 블로그 grid layout 수정 후 저장 시 내용이 저장되도록 (backend가 없으므로 새로고침 하기 전 까지)

수행 내역

• 블로그 화면을 조회 중일 때, isEditting boolean으로 수정 중인지 여부를 확인
• 로그인 되어있는 계정의 session 정보를 확인하여 현재 보고 있는 블로그 페이지의 userId와 일치하면 수정 버튼 활성화
• 블로그 수정 기능 활성화 시 각 element들의 draggable 영역과 onclick 이벤트의 영역이 겹쳐 onclick이 인식되지 않고, 반대로 drag & drop 을 했을 때 onClick 이벤트가 발생되는 issue 수정
  • 웹페이지 형태로 만들어진 특성을 활용해 drag handle로 item-top 영역을 지정하고, content 부분에서만 클릭 이벤트가 발생하도록 함

문제 및 이슈

• Context에서 useMemo 사용 후 배열 영역 안에 사용하려고 하는 value가 누락되어 제대로 업데이트가 되지 않음

  • isBlogEditting, setIsBlogEditting 가 누락 → React Component에서 이름이 없는 hooks가 업데이트 되는 현상을 확인
  • useMemo의 [] 배열 안에 각각 추가 후 정상 동작 확인

• isBlogEditting을 true로 바꾼 뒤, false로 초기화 해주는 과정이 없음에도 다른 페이지를 렌더링 한 후 다시 블로그 페이지로 오면 false가 되어 있음

  • react-router의 Link가 아닌 a 태그 또는 href 를 사용해서, 주소 값이 바뀌는 경우, context 내의 state들이 초기값으로 돌아가게 됨
  • 아래와 같이 수정 후 다른 페이지 방문 후 다시 블로그 화면을 렌더링 할 경우에는 useEffect로 초기화 하도록 수정

// Header.jsx
 <li role='menuitem'>
    <Link to={`/myPage?userId=${currentUserInfo.userId}`}>
        내 블로그
    </Link>
</li>

// BlogUserInfo.jsx
useEffect(() => {
    setIsBlogEditting(false);
}, []);

참고자료

• https://www.npmjs.com/package/react-grid-layout/v/1.5.2#demos

지원요청

• 없음