[충남대 FE_강병현] 미션 제출합니다.

[kang-kibong]

🎯 기능 목록

• 할 일을 추가, 수정, 삭제할 수 있다.
  • enter을 클릭하면 할 일을 추가한다.
  • 사용자가 아무것도 입력하지 않은 경우 할일을 추가할 수 없다.
  • 각 할 일의 delete 버튼을 클릭하면 해당 할 일을 삭제할 수 있다.
  • 완료한 할 일들은 ‘Clear completed’ 버튼을 클릭하면 삭제할 수 있다.
• 할일의 목록을 볼 수 있다.
  • 모든 할 일을 필터링할 수 있다.
  • 진행중인 할일을 필터링할 수 있다.
  • 완료된 할일을 필터링할 수 있다.
  • 진행중인 할 일의 총 개수를 확인할 수 있다.
  • 새로고침을 하여도 이전에 작성한 할 일은 유지될 수 있다.
• 할 일의 상태를 전환할 수 있다.
  • 할 일의 radio 버튼을 클릭하면 완료 상태 혹은 초기 상태로 전환할 수 있다.

✍️ 소감

1️⃣ 타입스크립트 활용

타입스크립트를 활용하여 코드의 안정성과 가독성을 향상시킬 수 있었습니다. 특히, 인터페이스와 제네릭을 적절히 활용하여 타입을 명확하게 정의하고 관리하는 것이 중요하다는 것을 깨달았습니다.

2️⃣ 모듈 시스템

모듈 시스템을 활용하여 코드를 모듈화하고 재사용성을 높일 수 있었습니다. 컴포넌트, 스타일, 유틸리티 함수 등을 각각의 모듈로 분리하여 관리함으로써 코드의 구조를 개선할 수 있었습니다.

3️⃣ 컴포넌트 디자인

컴포넌트를 작성하면서 컴포넌트의 재사용성과 유연성을 고려하는 것이 중요하다는 것을 배웠습니다. props를 효율적으로 활용하여 컴포넌트의 기능을 확장하고 다양한 상황에 대응할 수 있도록 설계하는 것이 필요하다는 것을 깨달았습니다.

4️⃣ 글로벌 스타일 및 리셋 스타일

글로벌 스타일과 리셋 스타일을 적용하여 브라우저의 기본 스타일을 초기화하고 일관된 스타일을 유지할 수 있었습니다. 이를 통해 크로스 브라우징 이슈를 해결하고 일관된 사용자 경험을 제공할 수 있다는 것을 학습할 수 있었습니다.

5️⃣ Context API

컨텍스트 API를 활용하여 상태 관리와 전역 상태의 공유를 효율적으로 처리할 수 있었습니다.

6️⃣ 폴더 및 파일 구조

적절한 폴더 및 파일 구조를 유지하면 코드의 유지보수성을 향상시킬 수 있습니다. 컴포넌트, 컨텍스트, 유틸리티 등 각 기능별로 폴더를 구분하고 파일을 모듈화하여 관리함으로써 코드베이스를 체계적으로 관리할 수 있었습니다.