미리보기

• React Native Cli 기반 자사 서비스 "미니빅" 유지보수

  • 신규 기능 및 스크린 개발, 에러 핸들링

• 앱 리뉴얼 프로젝트 진행

  • 리뉴얼 과정에서 필요한 대부분의 UI 컴포넌트들을 개발, 앱 릴리즈 이후에도 안정적으로 동작

  • 커스텀 컨텍스트 메뉴 컴포넌트 설계 및 구현

  • 즐겨찾는 항목 설정 스크린 내 리스트 렌더링 최적화

• 미니빅 앱 리팩토링

  • API 요청 방식 개선으로 요청 시간 최적화

  • 불필요한 상태 업데이트 개선으로 주변 기기 검색 과정의 성능 최적화

  • 주도적으로 제안하여 UI 및 UX 개선에 기여

  • 중복되는 코드를 재사용 가능한 컴포넌트 및 유틸 함수로 분리

• React 기반 자사 백오피스 페이지 기능 개발 및 유지 보수

  • API 를 통한 데이터 요청 및 외부 라이브러리를 이용한 차트 시각화 적용

  • ERP 재고 관리에 필요한 통합 엑셀 시트 생성 자동화

    • xlsx 모듈을 이용하여 다수의 액셀 시트의 데이터를 이용하여 ERP 재고 관리에 필요한 통합 시트 작성 자동화

    • 기존 수기 작성에 비해 작업속도 약 80% 단축

• Cafe24 환경의 자사 쇼핑몰 개발 및 유지 보수

  • 디자이너와 협업하여 자사 쇼핑몰 리뉴얼 작업 진행 (Web/ Moblie)

  • 마케팅 팀의 요청에 따라 기획전 페이지 개발

개인 프로젝트로 진행한 감사일기 작성 서비스 입니다.

현재 앱스토어에 배포되어 있으며, 플레이스토어는 비공개 테스트 단계에 있습니다.

• Supabase 를 이용한 RDB 구축 및 Oauth 연동, 게시글 및 사진 CRUD 구현

• 중복된 로직을 분리하여 사용하기 위한 Custom Hooks 사용

• reanimated 를 이용한 애니메이션 구현

• iOS/Android 환경에서 동일한 경험을 제공하기 위해 자체 Toast, Modal, Switch, Checkbox 컴포넌트 구현

• 스케쥴 알람 구현

  • 일기를 쓰고자하는 시간에 알림을 주는 기능 구현

  • FCM 과 연동하여 Foreground 및 Background 알림 구현

• 전역 오버레이 시스템 구현

  • Modal, BottomSheet 와 같이 화면 전체를 덮는 UI를 통합으로 관리하는 구조 구현

  • Recoil을 활용하여 오버레이 컴포넌트를 전달하여 전역으로 관리

  • 단일 Presenter 컴포넌트에서 오버레이 컴포넌트의 렌더링을 관리

  • Custom Hook 을 이용하여 오버레이 컴포넌트 전달 및 Open / Close 메소드 제공

  • 렌더링에 필요한 상태 및 관련 코드들을 간편하게 관리 할 수 있게 되어 개발 편의성 향상

• 자체 토스트 메시지 구현

  • Recoil을 활용하여 토스트 메시지 큐를 전역으로 관리

  • reanimated를 활용한 부드러운 토스트 애니메이션 및 다중 토스트 표시 시 포지션을 이용한 스택 애니메이션 구현

  • Custom Hook을 이용하여 Toast 표시 로직 추상화

• 기기 권한 관리 구현

  • Context API를 활용하여 앱 전반의 권한 관리 시스템을 설계 및 구현

  • iOS/Android 플랫폼 별 권한 처리 분기처리

  • Custom Hook 을 이용하여 권한 체크 및 요청 로직 추상화

  • 권한 거부 후 관련 기능 재접근 시 모달을 이용하여 설정 스크린으로 유도하여 사용자의 편의성 향상

📎 Github

📎 AppStore

• 실제 기획 단계에 참여하며, 디자이너, PM 과 소통

• 앱 리뉴얼에 필요한 UI 컴포넌트와 추가 스크린의 대부분을 개발

• react-native-reanimated를 이용한 컴포넌트 개발 및 애니메이션 추가

• iOS/Android 환경에서 동일한 경험을 위한 커스텀 컨텍스트 메뉴 컴포넌트 설계 및 구현

  • Modal컴포넌트와 reanimated라이브러리를 활용, 컨텍스트 메뉴가 열리는 경우 다른 영역의 터치를 방지하고, 자연스러운 백드롭을 구현

  • onLayout 이벤트를 활용하여 컨텍스트 메뉴가 열리는 위치를 계산, 적절한 위치에서 아코디언 컴포넌트가 열릴 수 있도록 구현

• 즐겨찾는 항목 설정 스크린 내 리스트 렌더링 최적화

  • 기존 3개의 개별 리스트들이 하나의 상태로 관리되어 리스트의 아이템의 많은 경우 컴포넌트 업데이트에 약 0.5초의 지연시간이 발생

  • 상태 분리 및 렌더링 최적화를 위해 useCallback, useMemo, React.memo 를 도입하여 렌더링 최적화

  • 기존 0.5초의 렌더링 지연시간을 0.1초 이내로 개선

• API 요청 방식 개선

  • 불필요한 동기 요청 처리로 인해 지연되는 다수의 요청을 Promise.all 을 이용한 병렬 처리로 개선

• 불필요한 상태 업데이트 개선

  • 주변 기기 검색 시 불필요하게 이루어지는 상태 업데이트를 새로운 기기를 발견한 경우에만 상태를 업데이트 하게끔 수정

  • 저사양 기기에서 발생하는 버벅거림을 체감 할 수 없을 정도로 개선

• UI /UX 개선

  • iOS 기준 60hz 로 실행되던 앱을 info.plist 내의 CADisableMinimumFrameDurationOnPhone설정 추가 및 reanimated도입으로 120hz 로 더 부드럽게 앱이 실행되게끔 하여 앱 사용 경험을 개선

  • 기기 연결 스크린 접근 시 상단에 주변 기기가 있는 경우 기기 아이콘을 표시하여 사용자가 더 직관적으로 알 수 있도록 개선

  • 현재 선택된 장소의 정보에 주소와 지도를 함께 표시하여 사용자가 선택된 장소가 어디인지 정확히 알 수 있도록 개선

  • 기기 설정 스크린에서 이름 변경을 위해 이름 변경 스크린으로 이동해야하는 플로우를 기기 설정 스크린에 통합, 불필요한 스크린 이동을 개선하여 앱 사용성 개선

  • 회원탈퇴 시 탈퇴확인 텍스트 입력을 추가하여, 로그아웃과 회원 탈퇴를 혼동하여 발생하던 CS 인입을 감소

• 불필요하게 중복되는 코드를 재사용 가능한 컴포넌트 및 유틸 함수로 분리하여 코드 가독성 및 재사용성 개선

• 디자이너와 협업하여 자사 쇼핑몰 디자인 리뉴얼 작업 진행 (Web/ Mobile)

• 전반적인 스타일 리뉴얼 작업 진행

  • CSS Flex 와 Grid 를 이용한 요소 레이아웃 정렬

  • PsuedoClass 를 이용한 다양한 상황에서의 스타일 적용

  • Swiper.js 를 이용한 케러셀 적용 및 커스텀 페이지 인디케이터 적용

  • scrollEventListener 를 이용하여 하단 스크롤 시 스타일이 변경되는 header 구현

• 자사 컨텐츠 업데이트 자동화 작업

  • 기존 수동으로 추가하였던 자사 컨텐츠 데이터를 jQuery의 fetch 를 이용하여, 자동으로 업데이트 하는 작업을 진행.

  • 10분 가량의 작업 시간을 완전 자동화

개인 프로젝트로 진행한 Todo 및 노트 작성 서비스 입니다.

• TypeScript를 이용한 정적 타입 개발

• localStorage를 이용한 데이터 저장/조회 및 유지

• Redux-Toolkit을 이용한 전역 상태 관리

• react-route-dom을 이용한 SPA 페이지 라우팅 구현

• Styled-Components를 이용한 페이지 스타일 적용

• react-helmet 과 react-snap라이브러리를 이용하여 SEO 적용

📎 Github

코드스테이츠 과정 중, 팀 프로젝트로 진행한 위치 기반 사진 공유 SNS 서비스 입니다.

현재 배포는 중단되어 있으나, 깃헙과 프로젝트 노션은 열람 가능합니다.

• 서비스 기획 및 Figma 를 이용한 와이어프레임, 프로토타입 작성

• 랜딩 페이지, 카테고리 별 게시판 페이지, 상세 페이지, 게시글 작성 및 수정 페이지, 마이페이지 구현

• 게시글 레이아웃, 이미지 썸네일, 버튼, 인풋 등 재사용 가능한 컴포넌트 개발

• react-route-dom을 이용한 SPA 페이지 라우팅 구현

• intersectionObserver를 이용한 무한스크롤 구현

• KakaoMap API를 이용한 지도 삽입

• Geolocation API를 이용하여 글 작성 시 사용자의 현재 위치 수집

• 외부 API를 이용한 이미지 업로드 구현

📎 Github

📎 Notion