[42] 포스트 수정 삭제 기능 구현

[dev-allenk]

구현사항

• DetailPage 마크업 추가
  • DetailPage(포스트 상세 페이지)에 헤더영역 만들고 '수정', '삭제' 버튼 추가
• 수정 기능 구현
  • 수정 버튼에 마우스 올리는 경우 LocalStorage에 포스트 내용 저장하는 기능 구현
  • 수정 버튼 클릭 시 localStorage에 저장된 내용을 읽어와서 PostUploadPage에 초기 렌더링
  • 작성 버튼 클릭 시 수정한 데이터를 초기 데이터와 비교후 업데이트된 값만 PUT 요청
• 삭제 기능 구현
  • 삭제 버튼 클릭 시 정말 삭제할 지 확인 후 DELETE 요청보내는 기능

코드 흐름

1) 제출버튼 클릭 - handleSubmit() 2) 업로드할 이미지가 있으면 업로드해서 s3URL생성 - uploadImagesToS3() 3) edit mode인 경우 s3URL과 기존 업로드 되어있던 이미지url을 병합 - mergePreviousImages() 4) 병합된 URL을 요청 보낼 형식에 맞게 구조화 - formatURLs() 5) 구조화된 URL과 나머지 데이터를 요청 보낼 형식에 맞게 구조화 - formatData() 6) edit mode인 경우 diff 비교를 통해 변경된 값만 필터링 - getUpdatedValues() 7) 최종 postData를 mode에 따라 POST or PUT 요청

참고사항

• diff 유틸메서드를 직접 구현했어요. 라이브러리를 가져다가 써봤는데 원하는 형태가 아니어서.. 배열을 객체형태로 분해해버리거나 하더라구요. 완전한 diff 함수는 아니고 입력값이 일정한 형태라는게 보장된다는 가정하에 사용할 수 있는 함수에요.(처음엔 완전하게 만들려다가 잘 안되서 적당히 타협..😅)
• 리액트 라우터에서 제공하는 hooks를 사용해봤어요.(useHistory, useLocation) Root 컴포넌트에서 props로 넘기지 않고 사용하는 쪽에서 바로 사용할 수 있는 hook이더라구요. 하위 컴포넌트로 여러단계 props를 전달하지 않아도 되서 편리했어요.
• 수정버튼에서 mouseover 이벤트가 발생할 때 localStorage에 저장하도록 했어요. 수정버튼 눌렀을 때 조금이라도 빠르게 페이지 전환이 일어날 수 있게 시도해봤어요. 리액트 공식페이지에서도 비슷한 방식을 사용하더라구요. 코드스플리팅을 적용할 때 응용할 수 있을 것 같아요.
• PostUploadPage 컴포넌트가 많이 지저분해졌네요.. reducer를 사용하면 조금 정리할 수 있을 것 같은데, 쌓인 일이 많아서 다음 피쳐로..😅

해결된 이슈 번호

• resolved #87

[dev-allenk]

css-modules (PR #99) merge 된 이후에 css-modules적용 후 merge 필요! 이 PR 먼저 merge 후 PR #99 에서 css-modules로 수정 예정