미리보기

팀 구성 : 백엔드 3, 프론트 3

기술 스택 : React, TypeScript, SCSS Module, Fetch API, Zustand, React Query, Storybook

웹사이트 링크: https://www.planu.site

프론트엔드 팀장을 도맡아 프로젝트의 폴더 구조를 설계하고 지속적으로 팀원들의 코드를 리뷰함으로써 전체적인 코드 품질과 일관성 향상

공통 컴포넌트 및 알림, 달력, 위치 공유, 위치 선택, 그룹 관련 페이지 개발

UI 컴포넌트 개발을 위한 도구인 Storybook을 사용하여 개별 및 공통 컴포넌트의 기능과 상태를 팀원 모두와 테스트하고, 문서화하여 관리

알림 페이지에서 SSE(Server-Sent-Events)를 연동하여 실시간으로 받아온 알림 데이터를 React Query와 Context API를 활용하여 관리

위치 공유 페이지에서 SockJS로 WebSocket을 연동하여 그룹 참여자들 간 실시간 위치 공유 기능 개발

성능 최적화를 위한 React.memo를 활용한 컴포넌트 메모이제이션, React.lazy를 활용한 코드 스플리팅 적용

• 성능 최적화 적용 전 : FCP - 9.5s / LCP - 1.3s / 번들 gzip 크기 - 3.69MB

• 성능 최적화 적용 후 : FCP - 2.2s / LCP - 0.7s / 번들 gzip 크기 - 433KB(약 88% 감소)

• 성능 최적화로 인해 초기 로딩 속도 개선 및 사용자의 TTI를 단축

기존의 alert로 사용자에게 보여주던 알림창을 react-hot-toast 라이브러리의 toast 알림창을 사용하여 api 응답 로딩, 성공, 에러에 관한 알림창을 시각적으로 보기 좋게 리팩토링

GitHub: https://github.com/Plan-You/PlanU-FE

팀 구성 : 백엔드 2, 프론트 2, 디자이너 1, 기획자 1

기술 스택 : Next.js, TypeScript, TailwindCSS, Zustand, React Query

웹사이트 링크 : https://vsgg.co.kr

zustand persist를 이용한 로그인 여부, 토큰 관리

fetch API를 사용할 때 편리하고 효율적으로 사용할 수 있도록 custom fetch 구현

React Query의 useInfinityQuery Hooks를 사용한 무한 스크롤 구현

react quill 라이브러리를 사용한 게시글 작성 페이지 개발

동적 사이트맵, 메타 데이터, 오픈 그래프를 활용한 seo 최적화

• seo 점수 : 70점에서 92점으로 향상

기존 웹뷰 기반의 페이지를 반응형 웹으로 개선하여 모바일에서도 최적화된 UI 제공

테스트/배포 서버 환경 구축 및 운영

Github : https://github.com/vsgg12/VSGG-FE/tree/main

팀 구성 : 백엔드 3, 프론트 2

기술 스택 : React, TypeScript, TailwindCSS, Zustand, React Query

웹사이트 링크 : https://www.ddrawry.site/

UI 컴포넌트 개발을 위한 도구인 Storybook을 사용하여 개별 및 공통 컴포넌트의 기능과 상태를 테스트하고, 문서화하여 관리

프로젝트와 폴더 구조 설계 및 공통 컴포넌트와 MainPage, MyPage, 공유페이지 개발

사용자가 공유하고싶은 일기를 canvas2html을 사용해 이미지화해서 저장소에 다운로드 또는 공유 페이지 링크로 공유 가능하도록 기능 개발

성능 최적화를 위해 React.lazy를 활용한 코드 스플리팅, React.memo를 활용한 메모이제이션 적용

빠른 사용자 경험(UX) 제공을 위한 좋아요 상태 낙관적 업데이트 적용

기존 Web View 기반 사이트를 Tailwind CSS를 활용해 반응형 웹으로 개편

GitHub:  https://github.com/DDrawry/ddrawry-FE

팀 구성 : 백엔드 3, 프론트 2, 디자이너 1, 기획자 1

기술 스택 : Next.js, TypeScript, TailwindCSS, Zustand, React Query

웹사이트 링크 : https://www.molip.site

프로젝트 폴더링 구조 설계 및 공통 컴포넌트, 게스트 초대 및 수락, 메인, 팀 관련 페이지, 공유 페이지 개발

초대 링크를 받고 들어와 로그인 완료했을 경우 페이지 리디렉션 구현으로 사용자 경험 개선

zustand persist를 활용한 로그인 상태와 바텀시트 상태 관리

로그인 상태 여부에 따른 페이지 리디렉션 구현

Swiper 라이브러리를 이용한 로그인 튜토리얼 제작으로 사용자 온보딩 최적화

Github : https://github.com/Swyp-team10/molip-front/tree/dev

팀 구성 : 백엔드 3, 프론트 3

기술 스택 : React, TypeScript, Axios, Zustand, TailwindCSS, React Query

팀장을 도맡아 일감 분배, 일정 관리, 목표 관리 및 지속적인 코드 리뷰로 코드 실수를 줄이고 팀 내의 지식 공유와 기술적 성장을 도움

공통 컴포넌트 및 좋아요/저장, 로그인, 메인, 레시피 추천, 재료 추가, 마이페이지 개발

데이터 로딩 중 사용자 이탈을 줄이기 위해 콘텐츠 레이아웃을 미리 보여줄 수 있는 Skeleton UI를 도입

zustand persist를 활용해 소셜 로그인으로 인한 토큰 관리

React Query의 useInfinityQuery Hooks를 사용하여 무한 스크롤을 구현

API 연동 작업 전 코드 중복성을 제거하고 interceptor 작성을 위한 customAxios를 생성하여 코드 유지보수성을 향상

Github : https://github.com/OZ-Coding-School/oz_02_main-003-FE

팀 구성: 백엔드 3, 프론트 2, 기획자 2

기술 스택 : React, CSS3, TypeScript, Zustand, Axios

공통 컴포넌트 및 결제, 주소 선택, 국내/외 카드 등록, 메인, 주문, 회원가입, 로그인 페이지 개발

google maps api를 활용한 사용자 주소 검색 및 저장 기능 개발

lighthouse의 개선 사항을 참고한 성능 개선 작업

• 폰트, 이미지 최적화(LCP)

• 불필요한 js, css 코드 삭제(TTI)

• 이미지 크기 고정(CLS)

→ 페이지 로딩 속도 개선 및 레이아웃 변화 최소화

→ 성능 점수 : 61점에서 81점으로 향상

Github : https://github.com/OZ-Coding-School/oz_02_collabo-005