미리보기

프로젝트 설명

학생들이 탐구형 수행평가를 스스로 해결하고, 선생님의 실시간 피드백까지 받을 수 있는 종합적인 온라인 학습 지원 플랫폼 개발 프로젝트

깃허브
수행쌤

사용기술

프로그래밍 언어

HTML, TypeScript, JavaScript, CSS

도구 및 라이브러리

React, Yarn, TailwindCSS, React-Query, React-hook-form, MSW

상태관리

Zustand, contextAPI

기타

Git, GitHub Actions, RESTful API

로그인 구현

공통 구현 사항

• 소셜 로그인과 일반 로그인의 인증 로직을 통합 관리할 수 있도록 AuthProvider를 설계하여 확장성과 유지보수성을 강화

• React-Query와 ContextAPI를 조합하여 활용해 사용자 인증 상태를 글로벌로 관리, 로딩/에러 상태를 실시간으로 UI에 반영

OAuth2를 이용한 소셜 로그인 (카카오, 구글, 네이버) 기능 개발

• 소셜 로그인 도입으로 회원가입 및 인증 절차를 간소화하고, 플랫폼별로 상이한 OAuth2 인증 방식을 통합 관리

• 서비스에서 사용자 인증 상태를 유지하기 위해 토큰 관리 및 자동 갱신 로직 구축, 세션 만료로 인한 불편을 최소화

일반 로그인

• 백엔드 인증 API 구현 지연으로 프론트엔드 개발이 중단되지 않도록, MSW(Mock Service Worker)를 활용해 Cookie 기반 인증 상태 관리를 모의로 구현

• 일반 로그인 프로세스(로그인 성공/실패, 세션 유지, 쿠키저장 등) 전반에 대한 테스트 환경을 구축하여 안정성을 확보

기타 인증 관련 구현사항

회원가입 및 계정 관리 기능

• 사용자 친화적인 회원가입, 이메일 찾기, 비밀번호 재설정 프로세스를 구축해 계정 복구의 편의성 강화

회원 탈퇴 및 로그아웃 기능

• 사용자 데이터 관리와 보안을 고려해 회원 탈퇴 및 로그아웃 기능을 구현, 사용자에게 데이터 제어권을 제공

통합 인증 로직 설계

• 회원가입, 로그인, 로그아웃 등 모든 인증 프로세스를 AuthProvider에서 통합 관리하여 유지보수성과 확장성을 확보

기타 구현 사항

• 인증 상태 기반으로 접근 제어 로직 구현(로그인하지 않은 사용자의 접근 차단)

• Axios 인터셉터를 활용해 모든 API 요청에 인증 헤더를 자동으로 추가

• 타입 안전성을 통해 채팅 데이터 구조와 API 응답 타입을 명확히 정의하여 런타임 에러 사전 방지

게시물 관리

• 게시물 수정 및 삭제 기능 구현

• 댓글이 두 번씩 전송되는 오류를 해결해 데이터 무결성을 확보

UI/UX 개선

스켈레톤 UI를 추가해 로딩 중 빈 화면 문제 해결

• 댓글과 채팅 리스트를 로드할 때 화면에 아무런 UI가 표시되지 않아 사용자에게 로딩 중임을 알리지 못하여 스켈레톤 UI를 추가해 데이터 로드 중에도 화면이 비어 있는 상태를 최소화하고, 사용자에게 로딩 상황을 명확히 전달

번들 사이즈 최적화

• React의 lazy와 Suspense를 적용해 초기 번들 크기를 줄이고, 페이지 로드 속도를 개선하여 사용자 이탈을 방지

• Suspense 사용 시 로딩 페이지를 제작해 사용자 경험을 방해하지 않도록 최적화

프로젝트 설명

LLM 기반의 챗봇과 대화를 통해 사용자의 발 사이즈와 선호도를 분석하여 최적의 신발을 추천하는 서비스

깃허브
perfitt

사용기술

프로그래밍 언어

HTML, TypeScript, JavaScript, CSS

도구 및 라이브러리

React, Yarn, Vanilla-ExtractCSS, React-Query, FireBase

상태관리

Zustand

기타

Git, GitHub Actions, RESTful API

LLM 기반 챗봇 구현

1:1 AI 채팅 서비스 개발

• LLM 기반의 챗봇을 활용해 사용자의 신발 선호도 분석 및 추천

데이터 캐싱 최적화

• React-Query를 활용해 채팅 메시지와 이미지 데이터를 캐싱, API 호출 빈도를 감소시켜 성능향상

다중입력 방지

• 비정상적인 다중 입력을 차단하는 로직 설계 및 구현으로 서비스 안정성 강화

채팅 내역 공유 기능

• Zustand를 활용해 채팅 기록의 상태를 관리하며, URL을 통한 간편한 공유 기능 개발

채팅 서비스 사진 업로드 리사이징 기능구현

WebP 리사이징

• react-image-file-resizer를 활용해 이미지 용량을 평균 84% 감소(1.6MB → 256KB)

• 이미지 크기 축소를 통해 전송 시간을 단축하고, 클라이언트-서버 간 데이터 전송 효율성 향상

• 최적화된 이미지 크기로 페이지 로딩 속도 개선 및 사용자 체감 성능 향상

내 발 측정 SDK 연동 (기업 제공 가이드 기반)

• 기업 제공 가이드를 바탕으로 발 측정 기능을 프로젝트에 구현

배포

• GitHub Actions를 활용한 CI/CD 파이프라인 구축

• AWS S3 정적 웹 호스팅을 통한 안정적인 서비스 제공

기타

• Vanilla-Extract CSS: 제로 런타임 스타일링으로 번들 사이즈를 최소화

• React-Query 캐싱 전략: API 호출 최적화로 네트워크 요청 수 감소 및 데이터 로드 시간 단축

• useMemo 활용: 자주 호출되는 날짜 계산 로직을 최적화해 렌더링 성능을 개선

프로젝트 설명

구하기 어렵거나 비싼 아이템들을 대여비를 받고 빌려주고 빌리는 행위를 통해,
많은 사람들이 다양한 스타일을 즐길 수 있는 옷 대여 서비스

사용기술

프로그래밍 언어

HTML, TypeScript, JavaScript, CSS

도구 및 라이브러리

React, Yarn, TailwindCSS, React-Query, React-hook-form, MSW

상태관리

Zustand, contextAPI

기타

Git, GitHub Actions, RESTful API

OAuth2를 이용한 소셜 로그인 (카카오, 구글, 네이버) 기능 개발

• 소셜 로그인 도입으로 회원가입 및 인증 절차를 간소화하고, 플랫폼별로 상이한 OAuth2 인증 방식을 통합 관리

• 서비스에서 사용자 인증 상태를 유지하기 위해 토큰 관리 및 자동 갱신 로직 구축, 세션 만료로 인한 불편을 최소화

채팅 서비스 사진 업로드 리사이징 기능구현

• react-image-file-resizer를 활용해 이미지 용량을 평균 84% 감소(1.6MB → 256KB)

• 이미지 크기 축소를 통해 전송 시간을 단축하고, 클라이언트-서버 간 데이터 전송 효율성 향상

• 최적화된 이미지 크기로 페이지 로딩 속도 개선 및 사용자 체감 성능 향상

실시간 1:N 채팅 서비스 구현

• WebSocketAPI를 활용해 실시간 양방향 통신 채팅 서비스 개발

• 대여자와 대여 희망자가 실시간으로 소통할 수 있는 안정적인 채팅 경험 제공

MSW기반 모킹 데이터 활용 환경 구축

• 백엔드 API 병목으로 인하여 프로젝트 개발이 지연되는 상황을 방지하기 위하여
  msw 기반의 모킹서버 활용
  https://deswaq.tistory.com/55

react-hook-form 기반 폼 최적화

• 폼 상태 변경 시 불필요한 리렌더링이 발생하지 않게 하기 위해
  react-hook-form 활용
  추가로 validation 및 error처리에 용이한 패턴 구축
  타입스크립트 사용으로인해 프로젝트 타입 안정성 강화 및 유효성 검증을 위한 zod 활용
  https://deswaq.tistory.com/61

Eslint 규칙 설정 및 통일화

•  Eslint 규칙을 프로젝트에 적용하여 코드 품질 관리 및 유지보수성 향상