ArtTalkTalk

📌 문제 배경

프로젝트에서 다양한 입력 폼을 처리할 때, 각 입력 필드의 상태를 useState로 개별적으로 관리하고 유효성 검사 로직을 직접 구현했습니다. 그러나 입력 필드가 많아질수록 코드의 복잡도가 증가하고, 중복 코드가 발생하여 가독성과 유지보수성이 저하되었습니다. 또한, 불필요한 리렌더링이 발생하면서 폼의 성능 저하가 우려되는 문제도 있었습니다.

🔍 원인 분석

• useState를 이용한 개별 상태 관리로 인한 코드 중복과 복잡도 증가
• 입력 필드 수가 많아질수록 리렌더링과 로직 분산 발생
• 유효성 검사 로직이 분산되어 유지보수가 어려움

🛠 해결 과정

1. react-hook-form의 Controller 도입으로 상태 관리 최적화
   • react-hook-form을 활용하여 각 입력 필드의 상태를 중앙에서 관리하고, 불필요한 useState 사용을 줄여 코드 구조를 단순화
   • Controller를 통해 입력 값과 폼 상태를 효과적으로 연동하고 이벤트 핸들러를 간결하게 처리
   • 중복 코드 제거 및 재사용성 향상으로 유지보수성과 성능 최적화 달성

✅ 결과

• 입력 필드 변경 시 불필요한 리렌더링이 줄어들며 렌더링 성능 향상
• react-hook-form 도입으로 유효성 검사 로직을 일관되게 유지하며 가독성 향상

📌 문제 배경

프로젝트 초기에는 프론트엔드, 백엔드, 디자이너 간의 원활하지 않은 소통으로 인해 작업 지연 및 요구사항 전달 문제가 발생했습니다. 각 팀의 작업 타임라인과 우선순위가 일치하지 않아 협업이 비효율적으로 이루어졌으며, 즉각적인 피드백이 어려워 개발 과정에서 요구사항 변경이 생길 때 대응 속도가 느려졌고, 프로젝트 일정에 부정적인 영향을 미쳤습니다.

🔍 원인 분석

• 역할별 커뮤니케이션 채널이 명확하지 않아 작업 우선순위 공유에 어려움
• 요구사항 변경 시 실시간 소통 부족으로 개발 일정 지연 발생
• 팀 간 협업 구조가 정립되지 않아 작업 흐름 불일치

🛠 해결 과정

1. 코어타임(19–22시) 설정으로 실시간 협업 시간 확보
   • 모든 팀원이 동시에 접속하여 피드백을 주고받을 수 있도록 코어타임을 지정하여 즉각적인 의사소통 가능
2. 데일리 스크럼을 통한 업무 공유 및 병목 제거
   • Block / Done / To-do 형식으로 매일 각자의 업무 상황을 공유하며, 필요한 협업을 빠르게 파악하고 문제를 조기에 해결
   • GitHub Discussions 기능을 활용해 비동기적으로도 진행상황을 확인할 수 있도록 환경 구성
   • https://github.com/ArtTalkTalk/ArtTalkTalk_frontend/discussions

✅ 결과

• 코어타임을 통해 빠른 피드백 루프 형성 및 결정 지연 최소화
• 데일리 스크럼으로 각 팀원 업무 현황 공유가 명확해지며 협업 효율 증가
• 작업 우선순위 조율이 수월해져 일정 관리의 정확도가 향상됨