올림픽 메달 사이트) KPT 회고✍️

1. Project - 올림픽 메달 사이트🏅

01. 완성 사이트 엿보기

• 금메달 수 정렬
  

• 총메달 수 정렬
  

• ADD : 중복 국가 예외처리
  

• UPDATE : 존재하지 않은 국가 예외처리
  

2. Project KPT Review🗒️

01. 개인 회고

• KEEP : 만족하는 부분

- 도전 기능(예외 처리, 전체 메달 수 정렬, 로컬 스토리지)을 모두 구현해냈다. 
- github PR과 README를 꼼꼼히 작성했다.
- 트러블슈팅을 열심히 기록했다.

• PROBLEM : 문제가 발생한 부분

[기능부분]
- TOTAL 버튼이 상황에 맞게 변경이 되지 않아 UX면에서 약간 아쉬움이 있다.
- state를 메달마다 선언하여 코드가 복잡해졌다.
- 함수의 인자, 선언과 호출시점 등에 대한 기본적인 지식이 부족했다.

[기타]
- 챗GPT에게 조금 의존했다.

• TRY : 개선방안

[기능부분]
- 나중에 로직을 추가하여 TOTAL 버튼을 수정해보자!
- state를 하나의 객체로 관리하여 간결하게 작성하는 법을 연습해보자!
- 함수에 대한 복습을 필히 하자!

[기타]
- 챗GPT에게 힌트를 받고, 직접 작성해보는 과정을 더 오래 많이 거쳐보자!

02. 튜터님의 피드백

• form 태그에 대한 활용도가 아쉽다. submit 이벤트를 활용하는 부분을 개선해보자.
• HeaderForm 컴포넌트에서 관리하는 state들이 분산되어 있어 코드가 복잡하다. 하나의 객체로 관리하면서 코드를 간결하게 만들 수 있다.
• 현재 useEffect 없이 구현이 가능하다. state를 변경하기 위해 useEffect를 사용하는 것은 안티패턴이다.
• React 17버전 이상부터 React를 import 하지 않아도 된다. 제거하자!
• module css방식에 대해 참고하자.
• 컴포넌트 파일을 제외한 일반적인 상황(파일명 등)은 안전하게 케밥 케이스를 사용해야한다.

03. 프로젝트 개선을 위한 참고 사이트

• form 태그 참고 사이트
• useEffect 안티패턴 참고 사이트
• module css 참고 사이트
• 케밥 케이스 참고 사이트