무제 제목 없는 코딩 블로그

UMC(University MakeUs Challenge) 9기에서 진행한 Proovy는 이공계 대학생을 위한 퍼스널 AI 튜터 서비스다. Claude, GPT, Gemini 같은 대형 언어 모델을 기반으로, 복잡한 수식의 정확한 풀이 검증과 수식 친화적 입력, 그리고 학습 루프 제공을 핵심 가치로 삼았다. 단순한 챗봇이 아니라, 수학이라는 특수한 도메인에 최적화된 AI 도구를 만드는 것이 목표였다.나는 이 프로젝트에서 웹 파트 프론트엔드 개발을 주도하며, 기술 기틀 설계와 배포 인프라 관리까지 담당했다. 웹 파트는 총 4명이었고, 그 외 백엔드·디자인 팀과 함께 11명의 규모로 진행됐다. 프론트 기술 스택은 React 19, TypeScript, Tailwind CSS v4, MSW, GitHub Ac..

비동기 데이터 관리를 Zustand로 캡슐화한 뒤, 그 과정에서 드러난 전역 상태 기반 내비게이션의 한계를 직면했다. Zustand가 UI 상태를 충분히 잘 다루었지만, "URL이 없는 페이지 전환"은 새로고침, 뒤로가기, 북마크 모두를 무너뜨렸다. 결국 React Router를 도입하고 폴더 구조까지 Feature-based로 재편하면서 진짜 웹 애플리케이션다운 구조를 갖추게 되었다. 총 세 편 중 3편(리팩토링)을 상태의 성격에 따라 구별하여 작성했다.[Portfolio #1] React로 웹사이트 구성하고 Tailwind로 디자인 입히기[Portfolio #2] Firebase 연동과 트러블 슈팅 (CRUD & 보안)[Portfolio #3-1] Zustand 도입으로 동기적 UI 상태 관리 리팩..

컴포넌트끼리 의존성이 커짐에 따라 상대적으로 가벼운 Zustand를 통해 Props Drilling 문제를 해결하려 했다. 단순하게 전역 상태 관리를 Zustand로 교체하는 것에 그치지 않고, 상태의 성격(동기 vs 비동기)에 따라 관리 전략을 다르게 가져갔다. 총 세 편 중 3편(리팩토링)을 상태의 성격에 따라 구별하여 작성했다.[Portfolio #1] React로 웹사이트 구성하고 Tailwind로 디자인 입히기[Portfolio #2] Firebase 연동과 트러블 슈팅 (CRUD & 보안)[Portfolio #3-1] Zustand 도입으로 동기적 UI 상태 관리 리팩토링하기[Portfolio #3-2] Zustand 도입으로 비동기적 서버 데이터 관리 리팩토링하기+ React Router ..

전역 후 개발 공부를 위해 기획했던 포트폴리오 웹사이트를 리액트로 구축하고, 디자인하기로 하였다. 프로젝트의 완성 단계인 지금 회고록을 작성하고자 한다. 총 세 편으로 프로젝트 회고록을 작성할 것이며 순서는 다음과 같다.[Portfolio #1] React로 웹사이트 구성하고 Tailwind로 디자인 입히기[Portfolio #2] Firebase 연동과 트러블 슈팅 (CRUD & 보안)[Portfolio #3-1] Zustand 도입으로 동기적 UI 상태 관리 리팩토링하기[Portfolio #3-2] Zustand 도입으로 비동기적 서버 데이터 관리 리팩토링하기 + React Router & 폴더 구조 리팩토링하기 1편에서 React와 Tailwind CSS로 그럴싸한 외관을 완성했다. 하지만 데이..

전역 후 개발 공부를 위해 기획했던 포트폴리오 웹사이트를 리액트로 구축하고, 디자인하기로 하였다. 프로젝트의 완성 단계인 지금 회고록을 작성하고자 한다. 총 세 편으로 프로젝트 회고록을 작성할 것이며 순서는 다음과 같다.[Portfolio #1] React로 웹사이트 구성하고 Tailwind로 디자인 입히기[Portfolio #2] Firebase 연동과 트러블 슈팅 (CRUD & 보안)[Portfolio #3-1] Zustand 도입으로 동기적 UI 상태 관리 리팩토링하기[Portfolio #3-2] Zustand 도입으로 비동기적 서버 데이터 관리 리팩토링하기 + React Router & 폴더 구조 리팩토링하기 웹사이트 초기 기획 실행 기술 선정: React와 TypeScript를 이용하여 컴포..