2025 . 오은

repo

메모앱 스터디

2024.05.22 ~ 2024.05.24

개인React
detail image
detail image

🗝️ 주요 기능 및 특징

  • - 메모앱 클론코딩
  • - 입력시 자동으로 타이틀 및 본문 설정 기능
  • - 작성시간 기록 기능

🤔 기술적 의사결정

  • React-Router-Dom Loader 사용
  • 첫 접속시 메모의 uuid를 React-Router-Dom v6 의 loader 를 사용하여 전달하도록 처리 하였습니다.

  • Redux 사용하여 전역상태관리
  • 메모의 상태관리를 Redux를 이용해 custom hook으로 만들어 관리하였습니다.

  • lodash의 debounce 사용
  • 제어컴포넌트의 상태 변경을 효율적으로 처리하기 위해 debouncing 을 고려하였고, lodash 라이브러리의 debounce를 적용하였습니다.

💥 트러블 슈팅

  • useRef를 사용한 debouncing
  • lodash의 debounce를 useRef 없이 적용시 state 변경에 따른 리렌더링으로 인해 debounce가 정상 작동하지 않는 문제가 있었습니다. 이를 해결하기 위해 debounce를 useRef 로 처리하여 해결하였습니다.

  • Redux 사용방법 연습
  • Redux-Toolkit 의 createSlice를 알고 있었지만 기본 Redux의 작동원리를 익히기 위해 switch문으로 Reducer를 만들어 보았습니다.