[53] 프로필 수정 페이지에 이미지 에디터 추가

[dev-allenk]

구현사항

• 프로필 수정 페이지에 이미지 에디터 추가(포스트 업로드 페이지에 사용한 컴포넌트를 그대로 재사용)
• useFetch 훅 리팩토링
  • 초기렌더링 뿐만 아니라 모든 api 요청에 사용할 수 있도록 개선
  • 간편한 에러 핸들링 가능하도록 기능 추가
• handleResponse 유틸함수 작성
  • fetch 요청 시 로딩 상태가 필요 없는 경우 사용할 수 있는 유틸함수 추가
• useAsyncDispatch 커스텀 훅 작성
  • 비동기 로직을 컴포넌트로부터 분리하기 위한 커스텀 훅
• bindAsyncDispatch 유틸함수 작성했으나 useAsyncDispatch로 대체
  • 비동기 로직도 dispatch와 같이 선언적인 방식으로 작성하기 위한 함수 작성
  • 해당 유틸함수 활용하여 로직 흐름 구조 변경
• useProfileValidation 훅 작성하여 프로필 수정 페이지 유효성 검사
• useEditStatus 훅 작성하여 변경된 내용만 업데이트 요청하는 기능 구현
• 이메일 유효성 검사 추가

참고사항

로직 구조 변경

• actions.js와 reducer.js 같은 파일이 생기면서 로직 구조가 많이 변경되었어요. 로직을 분리하고 컴포넌트를 선언적인 형태로 만들기 위해서 시도해보았습니다.
• 로직 흐름
  • 이벤트 발생 > dispatch > action > reducer > state update > 렌더링
• action.js
  • 비동기 로직을 담당합니다.
  • 비동기 로직 처리 후 상태 변경을 위해 필요한 값을 reducer로 전달합니다.
  • state와는 관계없이, 이벤트가 발생되는 컴포넌트가 소유합니다.
• reducer.js
  • 동기 로직을 담당합니다.
  • dispatch와 action으로 부터 type과 payload를 넘겨받아서 상태를 변경합니다.
  • reducer는 state에 의존적이므로 state를 소유한 컴포넌트가 있는 디렉토리에 작성합니다.

변경 후 장점

• 컴포넌트 내부가 가독성이 좋아졌어요. '어떻게'를 걷어내고 '무엇을'만 남겼어요.
• 컨테이너 컴포넌트의 재사용이 가능해졌어요.(이번 PR에서 ImageEditor컴포넌트)
• 디버깅 할 때 수정 위치 파악이 쉬워요. 이벤트와 로직의 위치가 1:1 매칭됩니다.

변경 후 단점

• 좀 복잡해요. 그래도 useAsyncDispatch 훅으로 조금 개선됨!
• 처음 보는 데에는 시간이 걸림..

해결된 이슈 번호

• resolved #106