issues
search
codesquad-project-team
/
frontend
🍻취향 공유 sns 팀프로젝트
20
stars
3
forks
source link
[53] 프로필 수정 페이지에 이미지 에디터 추가
#114
Closed
dev-allenk
closed
4 years ago
dev-allenk
commented
4 years ago
구현사항
프로필 수정 페이지에 이미지 에디터 추가(포스트 업로드 페이지에 사용한 컴포넌트를 그대로 재사용)
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
구현사항
bindAsyncDispatch 유틸함수 작성했으나 useAsyncDispatch로 대체비동기 로직도 dispatch와 같이 선언적인 방식으로 작성하기 위한 함수 작성해당 유틸함수 활용하여 로직 흐름 구조 변경참고사항
로직 구조 변경
변경 후 장점
변경 후 단점
해결된 이슈 번호