'README.md' 작성하기
- Node Version node ≥ v 14.17.4 명시하기 → 14.17.4 (승희), 14.17.5→ 16.10.0(승록), 16.10.0(다슬)
- server status (현재 배포가 유지되고 있는지)
- 프로젝트 이름
- 프로젝트 실행 방법에 대한 설명 (ex. npm start, storybook 접근법)
공통적으로 사용 될 만한 common Hooks 정의
<Hook 이름>
- 기능: <Hook의 기능>
- 사용: <Hook 이 사용될 컴포넌트>
useToggle W
- 기능: 특정 element에 클릭 시, true-false 상태값이 변경되도록 업데이트
- 사용: Follow, Unfollow 버튼
useHover V W
- 해당 element에 마우스를 hover했을 경우 true, false로 상태 값을 업데이트 해줌
- 우리꺼
- 헤더 메뉴 또는 채널 퀘스쳔, 친구 목록 hover시에 유용할 것
useScroll V W
- 해당 element 좌표 값 추적을 통해 상태 업데이트 가능
- 피드 페이지 인피니트 스크롤에서 특정 버튼을 고정시켜두기
- 해당 버튼 클릭 시 element의 좌표 값 업데이트를 통해 스크롤을 제일 위로 올려주는 부분 구현 시 유용할 것
- requestAnimationFrame, passive를 통해 최적화 필요
useKey V W
- event(keydown, keyup), targetKey('ESC'), handler(함수)를 받아 targetKey keydown 또는 keyup 이벤트 발생 시 handler 실행
- 모달 등에서 ESC 키를 눌렀을 경우 모달이 닫히는 이벤트 구현 시 유용
useClickAway V W
- 특정 영역의 바깥쪽을 클릭했을 경우 handler 실행
- useRef를 이용하여 handler가 바뀜에 따라 이벤트가 remove되고 다시 add되는 것을 방지 가능(성능 개선)
- 모달 창 바깥 쪽 부분을 클릭했을 경우 모달이 닫히는 이벤트 구현 시 유용
useResize
- 특정 엘리먼트의 크기가 변했을 경우 이미지 등을 해당 엘리먼트의 width, height에 맞춰 이미지의 크기 설정 가능
- ResizeObserver API를 활용해 특정 요소의 크기 변화 감지
useLocalStorage W
- key와 initialValue props를 받아 LocalStorage에 값을 저장(setItem)하고 받아오는(getItem) 기능
- LocalStorage에 저장되어야하는 데이터를 생각해봅시다!
- Answer textarea에 사용!
useForm W
- 초깃값(오브젝트 형태), submit 이벤트, validate를 props로 받기
- handleChange 함수 : form 안에 있는 요소들이 변할 때마다 값 업데이트
- handleSubmit 함수 : 에러 체크 후 에러가 없다면 정상적인 submit 이벤트 발생
- 회원가입, 로그인, 셋팅 페이지에서 활용 가능
useTimeoutFn V W
- 몇 초 뒤 함수를 실행할지 시간과 함수를 props로 받음
- run : timeout을 세팅하고 timeout이 끝나면 fn함수를 실행시키는 함수, button을 여러번 누를 경우를 대비해 이미 timeout이 실행되고 있었다면 해제시켜주기
- clear : 실행 중인 timeout을 해제시켜주는 함수
useIntervalFn
- 웹사이트에서 반복적인 로직을 사용할 때 사용
useDebounce W
- 특정 기간 내에 같은 이벤트가 호출됐을 경우 가장 마지막 이벤트만 실행
- useTimeoutFn Hook을 이용해 특정 초 이내에 디펜던시 관련 내용들이 바뀔 경우 run
- textarea 작성 시 값 업데이트 부분에서 쓰면 유용할 것 (노션과 비슷)
- posts 검색이나 친구 검색 시에도 유용할 것
useAsync V W
- 작성중...
hooks 구조 및 타이틀
- src/hooks ←디렉토리
- stories/hooks 에 작성 ex) stories/hooks/useToggle ←디렉토리
- stories title명 : ex) Hooks/useHover
hooks 기능 구현 분배
- 윤승록 : useToggle, useHover, useAsync
- 문승희 : useScroll, useKey, useClickAway
- 김다슬 : useLocalStorage, useForm, useTimeout, useDebounce
10월 21일 리아님과 면담 및 현 진행상황 피드백
디자인 측면
- 디자인이 너무 딱딱하다.
- 컴포넌트의 디테일한 디자인(각진 사각형이 많이 사용됨)이 전반적인 디자인(둥글둥글)과 맞지 않게 모났다. → 나중에 수정해도 괜찮다
- 모달 같은 경우, 그림자를 사용하면 좋을 것 같다. 현재 너무 화면에 챡 붙어있는 느낌
- 마이트리 페이지는 둥굴하게 잘 했다. 마이트리 페이지 디자인처럼 컴포넌트들을 둥굴하게 디자인하면 좋을 듯
- 컴포넌트 재사용을 고려하며 개발할 것. 이미 만들어져 있는 것을 최대한 활용
총평
- 잘 하고 있다
- 팀원들과 소통이 잘 되고 있다는 점 긍정적