미리보기

• QR코드 기반 모바일 웹 테이블 주문 오더플래닛의 유저 웹 프론트엔드 개발을 담당, 유저 웹 90% 이상 구현

• 서비스 초기 단계부터 프로젝트에 참여해 기획과 디자인을 개선하고 유저 경험을 향상, 결제 단계를 3페이지에서 2페이지로 줄이고, 장바구니에 '더 담기' 버튼을 추가해 사용자 편의성 개선

• 사내 KPI 달성을 위한 개발 지식 공유 세션을 개최하여 팀 내 지식 공유 및 학습 문화를 정착시키고, 구성원의 기술 역량과 협업 효율을 높이는 데 기여

핸드폰으로 메뉴 선택 주문까지 가능한 QR 코드 기반 모바일용 웹 테이블 오더 유저 웹 개발

React Recoil React-Query Tailwind CSS Antd i18next

• 효율적인 서버 데이터 관리로 코드 유지 보수성 향상

  - Axios와 커스텀 훅을 활용해 API 호출을 표준화 코드 유지보수성을 높임
  - 환경 변수 관리와 interceptor로 일관된 데이터 처리 구현

• 성능 최적화로 사용자 경험 개선

  - 기존에 작성된 무한 스크롤 로직을 React-Query의 useInfiniteQuery로 변경 코드량 20% 감소

  - Suspense와 Lazy로 코드 스플리팅 적용, 초기 로딩 시간 단축.

• 재사용 가능한 UI 컴포넌트로 개발 생산성 증가

  - Antd와 Tailwind를 활용한 공통 컴포넌트 구축, UI 개발 속도 향상.

• 효율적인 전역 상태 관리로 성능 최적화

  - Recoil을 도입하여 전역 상태 관리 최적화, 기존 useContext 대비 리렌더링 감소

  - Recoil Selector를 활용해 파생 데이터 계산 로직을 분리, 의존성 기반 캐싱으로 렌더링 성능 최적화

• 글로벌 사용자 접근성 강화

  - i18next를 통해 다국어 번역을 지원해 글로벌 유저의 접근성 향상

  - OAuth(구글, 애플 로그인) 및 ABA Pay 결제 모듈 연동 테스트 수행 경험

사용자가 읽고 있는 책을 관리하고 아카이빙하는 웹 서비스

Next.js Zustand Typescript Tailwind CSS Antd

• Next.js 기반 프로젝트의 아키텍처 설계

  - 기술 스택 및 폴더 구조 정의를 통해 유지 보수성과 확장성을 고려한 프로젝트 구조 설계

• 코드 리뷰 문화 도입을 통한 협업 효율 및 품질 향상

  - 팀 내 코드 리뷰 문화를 정착시켜 코드의 일관성 및 품질 개선

• Dnd-kit과 웹 스토리지를 활용한 서재 페이지 구현

  - Drag & Drop 사용자 인터랙션 구현 및 데이터의 영속성을 위한 로컬 스토리지 사용

프로젝트 바로가기

힐링이 필요한 직장인들을 위한 소모임 커뮤니티

Next.js TypeScript React-Query Tailwind CSS Zustand

• 팀장 역할 수행으로 원활한 팀 운영 및 커뮤니케이션 주도

  - 회의 리드, 역할 분담(R&R), 컨벤션 정리, 그라운드룰 수립 및 회고 등 팀 운영 프로세스 구축

• React Query의 Hydration Boundary를 활용한 SSR 구현

  - 초기 렌더링 시 데이터 페칭 중복 방지, 불필요한 HTTP 요청 감소 및 네트워크 효율성 개선

  - CSR 대비 초기 로딩 속도 향상 및 SEO 최적화 효과

• 공용 컴포넌트 및 모임 상세 페이지 구현

  - 재사용 가능한 UI 컴포넌트 구성 및 주요 페이지 UI/로직 구현

프로젝트 바로가기

자기소개 웹페이지 제작 개인 프로젝트

React.js SCSS

• 전역 상태 관리로 동적 UI 구현

  - useContext를 활용해 스크롤 위치를 전역 상태로 관리, 화면 전환과 텍스트 애니메이션 구현

• 반응형 및 인터랙티브 레이아웃 설계

  - 미디어 쿼리를 사용한 다양한 디바이스에 대응하는 반응형 레이아웃을 설계

  - CSS Grid를 활용해 외부 라이브러리 없이 Masonry 레이아웃 구현, 콘텐츠 탐색 편의성 강화

  - Parallax 스크롤 효과를 적용하여 시각적인 몰입감을 높이고 인터랙션 요소 강화

• 커스텀 캐러셀 컴포넌트 구현

  - React, JavaScript, CSS를 활용해 외부 라이브러리 없이 캐러셀 컴포넌트를 독립적으로 개발

프로젝트 바로가기

핸드메이드 제품 판매 사이트 제작 프로젝트

React.js SCSS react-daum-postcode

• 사용자 입력 검증 및 인터페이스 개선

  - 정규식을 활용한 로그인/회원가입 페이지 구현, 정규식 기반 실시간 검증 및 조건 충족 시 버튼 활성화 UX 구현

  - 다음 주소 API 연동으로 주소 입력 과정 간소화, 직관적인 설계를 통한 사용자 경험 향상

• 동적 라우팅으로 콘텐츠 접근성 최적화
  - useParams를 활용해 아이템에 고유한 경로 부여를 통해 URL 아이템별 리뷰 페이지 구현