미리보기

Description (Website, GitHub)

코드라이브는 코딩테스트 준비에 어려움을 겪는 취업 준비생들에게 동기부여를 주기 위해 제작한 서비스

Tech Stack

React Typescript React-Query Styled-Component

Experience

로그인 & 회원가입

• GitHub OAuth 기반 로그인 구현으로 접근성 80% 향상

• React Query 기반 커스텀 훅으로 중복 체크 API 관리 최적화

• 입력 및 검증 상태 분리 관리로 UX 오류 방지 및 인터랙션 개선

그룹 수정페이지

• 상세 데이터 조회 후, useEffect에서 일괄 초기화 처리하여 초기 렌더링 시 불필요한 상태 변화 제거 및 가독성 개선

• 이미지 렌더링 최적화를 위해 업로드 시 browser-image-compression 라이브러리를 적용하여 파일 크기 압축 처리

  • 평균 50% 이상 용량 감소 (예: 5MB -> 1MB 이하), 페이지 로딩 속도 및 렌더링 성능 개선

그룹 페이지

• 사용 언어, 인원 수 필터링 및 키워드 기반 검색 기능 구현

• 추천 그룹 API 호출 로직을 React Query 기반 커스텀 훅으로 분리하여 재사용성과 유지보수성 개선

• 기존 useEffect 기반 데이터 패칭을 useQuery로 대체하여 로딩 처리 및 상태 관리 최적화

랜딩 페이지

• CSS keyframe animation 기반 자동 스크롤 슬라이더 구현

Description ( GitHub )

AI(ChatGPT)와 금융 대기업 API를 활용하여 사용자의 자산에 맞는 동네를 추천하는 서비스

Tech Stack

React Next.js TypeScript Styled-Component
Experience

• Next.js의 Root Layout을 재사용성, 유지보수성, 확장성을 고려하여 효율적인 폴더 구조로 설계

• Figma를 활용해 서비스 UI/UX 기획 및 개발

• 단계별 진행 상태를 표시하는 NavBar 구현

React Hook Form 도입

• 기존에는 각 페이지에서 개별적으로 폼을 관리했으나, 불필요한 리렌더링을 방지하고 폼 상태 관리를 효율적으로 처리하기 위해 React Hook Form을 도입

• 이를 통해 폼 성능을 최적화하고, 데이터 검증 및 제출 로직을 간소화하여 코드의 유지보수성을 향상시킴

Description ( GitHub, Website )

사용자들이 중고 상품을 등록하고 판매할 수 있는 중고 거래 플랫폼 서비스

Tech Stack

React Recoil FireBase Styled-Component

Experience

로그인, 게시물 작성 페이지 구현

• Firebase Auth를 활용하여 사용자 로그인 및 인증 처리

• Firebase Firestore를 활용해 게시물 데이터를 업로드 및 관리

Recoil 활용한 상태 관리

• Prop Drilling과 리렌더링 이슈가 발생하여 개별 상태(atom) 단위로 관리할 수 있는 Recoil을 채택

• useRecoilState 훅을 사용하여 상태 업데이트 관리

• 페이지 내 전역 상태를 효율적으로 관리하기 위해 Atom 활용

프로젝트 일정 관리 및 회의 내용 문서화

• GitHub Wiki를 활용하여 팀원들의 작업 내용을 공유할 수 있도록 템플릿 제작 및 관리

• 제주의 전설과 관련된 관광지를 코스로 추천하는 서비스 제작

• 프로젝트 코드 컨벤션 및 초기 세팅

• UI/UX 디자인 참여

AI(ChatGPT, DALL·E 등)를 활용한 창의적인 금융&보험 서비스 개발 대회 참여

약 800여개의 팀들 중 15위 안에 선정

• 다양한 협업 툴(Figma, Notion)을 활용하여UI/UX 디자인 및 설계