issues
search
codesquad-project-team
/
frontend
🍻취향 공유 sns 팀프로젝트
20
stars
3
forks
source link
[53] 프로필 수정 페이지에 이미지 에디터 추가
#113
Closed
dev-allenk
closed
4 years ago
dev-allenk
commented
4 years ago
구현사항
프로필 수정 페이지에 이미지 에디터 추가(포스트 업로드 페이지에 사용한 컴포넌트를 그대로 재사용)
useFetch 훅 리팩토링
초기렌더링 뿐만 아니라 모든 api 요청에 사용할 수 있도록 개선
간편한 에러 핸들링 가능하도록 기능 추가
handleResponse 유틸함수 작성
fetch 요청 시 로딩 상태가 필요 없는 경우 사용할 수 있는 유틸함수 추가
bindAsyncDispatch 유틸함수 작성
비동기 로직도 dispatch와 같이 선언적인 방식으로 작성하기 위한 함수 작성
해당 유틸함수 활용하여 로직 흐름 구조 변경
useProfileValidation 훅 작성하여 프로필 수정 페이지 유효성 검사
useEditStatus 훅 작성하여 변경된 내용만 업데이트 요청하는 기능 구현
이메일 유효성 검사 추가
참고사항
로직 구조 변경
actions.js와 reducer.js 같은 파일이 생기면서 로직 구조가 많이 변경되었어요. 로직을 분리하고 컴포넌트를 선언적인 형태로 만들기 위해서 시도해보았습니다.
로직 흐름
이벤트 발생 > dispatch > action > reducer > state update > 렌더링
action.js
비동기 로직을 담당합니다.
비동기 로직 처리 후 상태 변경을 위해 필요한 값을 reducer로 전달합니다.
reducer.js
동기 로직을 담당합니다.
dispatch와 action으로 부터 type과 payload를 넘겨받아서 상태를 변경합니다.
변경 후 장점
컴포넌트 내부가 가독성이 좋아졌어요. '어떻게'를 걷어내고 '무엇을'만 남겼어요.
컨테이너 컴포넌트의 재사용이 가능해졌어요.(이번 PR에서 ImageEditor컴포넌트)
디버깅 할 때 수정 위치 파악이 쉬워요. 이벤트와 로직의 위치가 1:1 매칭됩니다.
변경 후 단점
좀 복잡해요. 지금으로써는 "익숙해지면 괜찮아질까?"라는 물음에 고개만 갸우뚱하게 되네요.
처음 보는 데에는 시간이 걸림..
해결된 이슈 번호
resolved #106
dev-allenk
commented
4 years ago
코드를 다시 보다보니 동작의 맥락을 파악하기 쉽게끔 하는 방법이 생각났어요. 개선해서 다시 PR 보낼게요.
구현사항
참고사항
로직 구조 변경
변경 후 장점
변경 후 단점
해결된 이슈 번호