본문 바로가기

olympic medal tracker2

React + TS 프로젝트에서 코드 리뷰 오늘은 React + TS로 간단한 useState 응용 프로젝트에서 받은 코드 리뷰 공유 및 리펙토링 과정을 설명하겠다! 주요 내용을 아래와 같다.Enum 대체와 성능 최적화Enum의 Tree Shaking 문제점대안: const object 또는 union type 사용제어문 선택과 가독성객체/타입 기반 분기 처리시 switch문 활용실제 코드 예시와 개선된 가독성 비교타입 안정성 강화함수 반환값 타입 처리 방식Generic 활용 vs 타입 단언목적별 함수 분리 전략 프로젝트 소개간략하게 프로젝트 소개를 먼저하고 가겠다. 프로젝트는 올림픽 메달 트랙커로 특정 국가에 대한 메달 기록을 추가/갱신할 수 있는 웹 어플리케이션이다.위 링크를 통해 배포된 사이트로 접속할 수 있다. 국가들의 매달 기록을 저장하.. 2025. 1. 27.
영원히 입력 안되는 폼이 있다? : 진실혹은거짓 제목에 낚였나요? ㅎㅎ추천 받은 제목인데 어그로가 장난아니라서 사용해봤습니다! 영원히 입력 안되는 폼? 당연히 거짓이죠!오늘은 개발하면서 입력 칸에 입력을 할 수 없었던 에러를 어떻게 고쳤는지 말해보겠습니다!  🚨 이슈 사항1) 목적 : TypeScript Enum 사용 시 발생하는 성능 이슈를 해결하기 위해,                  as const와 Union Type 조합으로 리팩토링했다.2) 구현 방법 : Enum을 Object 객체로 변경하고,                           typeof와 keyof 키워드를 통해 Union Type으로 변경하였다.                           Enum을 사용하고 있던 것은 MedalType으로 금메달, 은메달, 동메달을 .. 2025. 1. 23.