📌  정보

• 기간: 2024. 01 ~ 2024. 08
• 역할: 테일즈런너 어드민 프론트 개발
• 참여인원: 2명
• 사용 기술: React, TypeScript, TanStack Query, React-Hook-Form, Jotai

📌  작업 내용

• 전반적인 프로젝트 수행
  • 프로젝트 초기 기획 단계에서부터 참여하여 요구 사항 분석, 페이지 설계, 데이터 흐름 정의 등 전체적인 프로젝트 진행을 하였습니다.
• 프론트엔드 개발
  • 설계 및 구현: CRUD 기능을 구현하기 위해 React와 TypeScript를 사용하여 각 페이지를 설계하고 개발했습니다. 주요 페이지로는 작성, 상세보기, 수정, 리스트 페이지가 포함되었습니다.
  • 데이터 관리 및 최적화: React-Query를 활용하여 효율적인 데이터 패칭 및 캐싱을 구현하고, React Router의 lazy와 loader 기능을 통해 초기 로딩 속도를 개선했습니다.
  • 입력 폼 관리: React Hook Form을 사용하여 복잡한 입력 폼을 효율적으로 관리하고 검증 기능을 간소화하여 개발 효율성을 높였습니다.

📌 개발 프로세스 및 접근 방식

• React-Query를 활용한 데이터 최적화
• React-Hook-Form을 활용한 폼 상태 관리 최적화
• React-Router와 동적 라우팅을 활용한 페이지 구성

📌 회고

프로젝트를 설계하면서 여러 가지 시행착오를 겪었습니다. 특히, 공통 컴포넌트를 설계할 때 지나치게 범용적이고 큰 컴포넌트를 만들려는 욕심이 있었습니다. 처음에는 하나의 컴포넌트로 많은 기능을 처리하려 했고, 그렇게 하려면 컴포넌트가 너무 커지고 복잡해졌습니다. 그 결과, 코드가 점점 복잡해지며 유지보수하기 어려워졌습니다. 이러한 경험을 통해, 각 컴포넌트가 맡을 역할을 명확하게 정의하고, 하나의 컴포넌트가 너무 많은 책임을 지지 않도록 세분화하는 것이 얼마나 중요한지 깨닫게 되었습니다.

컴포넌트를 작은 단위로 나누는 것의 장점은 확장성과 가독성을 유지하는 데 큰 도움이 된다는 점이었습니다. 작은 컴포넌트는 코드의 책임이 명확하고, 변화가 생기더라도 다른 부분에 미치는 영향이 적기 때문에, 프로젝트가 커질수록 관리가 수월해졌습니다. 이를 통해 저는 '작고 명확한 역할을 가진 컴포넌트 설계'의 중요성을 깊이 이해하게 되었습니다.