원티드 프리온보딩 프론트엔드 인턴십 사전 과제

Wanted에서 진행하는 프리온보딩 프론트엔드 인턴십 사전 과제

배포 링크

레파지토리 클론

$ git clone https://github.com/JunJongHun/wanted-pre-onboarding-frontend.git

패키지 설치

$ npm install

애플리케이션 실행

$ npm start

todo 컴포넌트 분리하여 재사용성 높임
memo, useCallback 훅을 사용, 불필요한 렌더링을 방지 -> 성능 최적화 구현
todo 추가, 삭제, 수정, 취소 시, 깜빡임 없게 구현 -> 사용자 경험 개선
- API 요청 후, 다시 리스트 API요청해서 업데이트 X -> 프론트 상태 업데이트 후, API 요청만 보내기 -> 새로고침 했을 때, 리스트 API요청 후 반영

Todo 생성
- 추가 버튼 눌렀을 때, todo 추가 구현
- 빈 문자열 여부에 따른 추가 버튼 활성화/비활성화
TODO 수정
- input형태로 변경하여 수정 및 취소 기능 구현
- 수정 버튼 눌렀을 때, input창에 focus 기능 추가
- 취소 버튼 눌렀을 때, 내용 초기화 및 수정모드 비활성화
TODO 삭제
- 삭제 버튼 눌었을 때, todo 삭제 기능 구현
체크박스 클릭 시, todo 완료 여부 구현
todo 목록 눌렀을 시, 체크박스 체크 구현