처음 기획부터 테이블 설계, 화면 구성, 배포까지 전 과정을 담당하면서 시스템 전체 흐름을 이해하는 것을 목표로 한 프로젝트입니다.

[프론트엔드 GitHub](https://github.com/hyeyeon9/frontend)

• 2인 팀 ｜ 풀스택 50% 기여

• 역할 : 재고/폐기/발주/상품 관리 페이지, 실시간 알림, 챗봇

• 사용 기술 :

  • Frontend : React Tailwind CSS Zustand RESTful API

  • Backend : Spring Boot FastAPI MySQL AWS

  • Workflow Tools : Git GitHub Notion Slack

수행업무

• 장바구니 연관 분석 데이터를 히트맵+라인차트로 데이터 시각화 (Nivo 활용)

• React Table에서 렌더링 최적화를 위해 useMemo 적용 -> 무한 렌더링/플리커링 현상 제거

• 재고 리스트 무한스크롤 구현 중 필터와 충돌 발생 -> 컴포넌트 분리 구조의 필요성 체감

• 유통기한 임박 재고 -> 발주/할인 연동 흐름 구성 ( 실제 운영 시나리오 고려 )

• SSE 기반 알림 시스템 구현

  • 단방향 전송이 필요한 상황에서 웹소켓보다 간단하고 안정적인 SSE 선택

• FastAPI 기반 LangChain 챗봇 서버 직접 구축

  • 챗봇 위젯 UI 구현 + 프롬프트 튜닝으로 도메인 특화 응답 흐름 구성

• [배포] 프론트: S3 + CloudFront 정적 호스팅 ｜ 챗봇 서버: Elastic Beanstalk로 배포

• [협업] 일일 스크럼시 진행 사항과 기능의 목적을 공유해, 피드백 기반으로 개선 반복

• [UI] Tailwind css를 통해 점주를 위한 태블릿 반응형 UI 구성

• [UX] 데이터 -> 인사이트 -> 행동 흐름을 고려한 사용자 중심 화면 구성에 집중

배운점

• 기능 중심보다 실제 사용 흐름을 고려한 화면 설계 및 API 연동

• 문제 해결 과정에서 상태 관리, 성능 고려, 컴포넌트 분리 설계에 대한 고민을 직접 경험

• 협업 과정에서의 활발한 소통, 공유의 중요성 체감

• 새로운 기술(SSE, LangChain 등)을 비판적으로 선택하고 구현해보며 실행력 향상

Next.js와 Typescript의 구조적인 타입 시스템과 App Router 기반 라우팅 흐름을 실제 프로젝트에 적용하며, 사용자가 주제별 스터디를 등록하고 조건에 맞는 스터디를 탐색하고 신청할 수 있는 플랫폼을 구현 중입니다.

[GitHub](https://github.com/hyeyeon9/Groupie)

• 개인 | 100% 기여

• 사용 기술 :

  • Frontend : Next.js TypeScript Tailwind CSS Prisma

진행 업무

• Next.js App Router 기반 SPA 구현

• Prisma ORM을 활용한 CRUD 전반 구현

  -> 스터디 등록/수정/삭제를 직접 구현하며 Next.js 풀스택 구조에 대한 이해도 향상

• Prisma 모델 타입을 활용한 API 응답 구조 설계

  -> include 옵션과 함께 prisma의 타입 시스템을 활용해 프론트-백엔드 간 타입 일관성 유지

• 조건 기반 필터링 + 검색 기능 (카테고리, 키워드)

• Intersection Observer를 활용한 무한스크롤 구현

  -> 상태 충돌 이슈 해결을 위해 컴포넌트 분리 구조 적용

• react-calendar 기반 스터디 일정 시각화 UI 구성

• Tailwind CSS로 반응형 UI 구성 (모바일 대응)

AI와 협업해 창의적인 콘텐츠를 제작해 보자는 목표로 시작한 단기 토이 프로젝트입니다.
Gemini API를 활용해 AI와 어떻게 상호작용을 해야 원하는 답을 얻을 수 있는지 실험해 보며 만들었습니다.

[GitHub](https://github.com/hyeyeon9/SogeumStory)

• 사용 기술

  • Frontend : React React Router Materialize CSS

  • Backend : Flask Flask-CORS

  • AI 연동 : Google Generative AI (Gemini-Pro, Gemini-1.5 Flash)

수행 업무

• [FE] React + React Router로 SPA 구현, Materialize CSS로 빠른 UI 구축

• [FE/BE] 사용자 입력(텍스트/이미지)를 백엔드(Flask)로 전송 -> 응답 처리 흐름

• [AI 연동] Gemini-Pro / Gemini 1.5-Flash API 연동 -> 프롬프트 튜닝을 통해 결과 품질 비교

• [UX] 이야기 생성 후 '이어쓰기' 기능 구현 -> AI의 맥락 기억 유도해보기

배운점

• AI를 ‘도구’로 적극 활용하기 위한 실험과 학습을 주도적으로 진행

• 백엔드-프론트 간 비동기 데이터 흐름 이해

바닐라 JavaScript의 기초를 탄탄히 다지기 위해 시작한 토이 프로젝트로, 모달/타이머/반응형 UI를 구현하며 DOM제어와 사용자 반응 처리를 학습했습니다.

이 과정을 통해 React의 컴포넌트 기반 구조의 필요성을 체감했고, 어떻게 작동하는지 명확히 이해할 수 있었습니다.

[GitHub](https://github.com/hyeyeon9/sunday_game)

수행 업무

• [JS] 순수 JavaScript로 DOM 조작, 이벤트 흐름, 타이머, 모달 등 게임 흐름 전반 설계

• [UI] 공통 구조(모달, 점수, 리셋)를 반복 구현 -> 컴포넌트화 필요성 체감

• [UX] 난이도 조절, 실시간 점수/시간 표시, 자동 모달 닫힘 등 사용자 흐름을 고려한 설계

배운점

• React 도입 시점에서 구조 분리와 재사용성의 이점을 명확히 이해하는 계기가 됨