미리보기

1. 프론트엔드 개발 및 성능 최적화

• 주요 기술: React, Next.js, React Native, TypeScript

• 주요 프로젝트:

  • 아임히어워크 문서 프로젝트:

    • MDX 기반 문서 관리: MDX 파일 기반 문서 관리 시스템 설계 및 SSR/ISR을 활용하여 실시간 변경 사항 반영.

    • 자동화된 문서 업데이트: GitHub 레포지토리와 연동하여 MDX 파일 업로드 및 변경 시 문서를 자동으로 업데이트하고 화면에 반영.

    • 성과: 개발 및 배포 속도를 개선하고 유지보수 효율성을 높여 문서 관리 시스템의 안정성 강화.

  • 아임히어워크 슈퍼 어드민:

    • 기능 개발: 회사 관리 및 사용자 관리 기능 개발.

    • 상태 관리: NUQS를 활용해 URL 기반 상태 관리 구현.

    • BFF 패턴 적용: 일부 API를 Next.js Route Handlers를 통해 BFF(Backend For Frontend)로 구현.

    • 성과: 상태 관리 간소화와 사용자 맞춤형 기능 추가로 서비스 운영 효율성 강화.

  • 서울교통공사 태그리스 결제 플랫폼시스템:

    • 모노레포 구성: 프로젝트를 모노레포 구조로 설계하여 UI와 유틸리티 코드의 재사용성을 높이고 유지보수 효율성 강화.

    • 성능 개선: SSR 스트리밍을 도입해 LCP(Largest Contentful Paint)를 8초에서 1초 미만으로 단축.

    • 에러 처리 강화: 커스텀 에러 클래스를 정의하고 Error Boundary를 활용해 에러 로직을 표준화.

    • 성과: 실시간 데이터 처리 안정성과 사용자 경험을 크게 개선.

  • PSNM SK 패밀리샵:

    • 레거시 현대화: JSP 기반 레거시 시스템을 React로 전환하여 데스크톱/모바일 쇼핑몰 개발.

    • 문제 해결 중심 개발: 실행 불가한 소스코드와 상용 페이지만 제공된 상태에서 화면 및 데이터 로직을 분석하고, API 설계 및 데이터 구조를 재정의.

    • 외부 시스템 연동: TID 로그인, KMC 본인인증, TGate 개통, PG 결제 등 외부 시스템과의 통합을 PostMessage와 Web Broadcasting으로 구현.

    • UI/UX 최적화: Lazy Loading과 Suspense 적용, URL 기반 페이지 전환 구조 도입으로 초기 로드 속도 개선.

    • 성과: 약 5개월 만에 데스크톱/모바일 양쪽을 모두 단독 개발하여 서비스 안정성 확보.

  • 아임히어워크 CMS:

    • React 업그레이드: React 16.3 → 17 업그레이드를 통해 함수형 컴포넌트와 훅 도입으로 개발 생산성 향상.

    • 번들러 전환: Webpack에서 Vite로 전환하여 빌드 및 배포 속도를 최적화.

      • 배포 시간 67% 감소 (288s → 93s).

    • 타입 안정성 강화: 타입스크립트를 점진적으로 도입하여 코드 안정성과 유지보수성을 향상.

    • 상태 관리 최적화:

      • MobX 기반 상태 관리에서 발생하는 문제를 해결하기 위해 Recoil과 React-Query로 점진적 전환.

      • 불필요한 상태 제거 및 페이지 단위 데이터 패치 전략 도입으로 성능 개선.

    • 사용성 개선:

      • Lazy Loading 및 코드 스플리팅을 통해 초기 로드 속도 개선.

      • 주소 입력 시 다음 포스트 검색 기능 도입으로 사용자 경험 대폭 향상.

    • 성과:

      • 유지보수성과 성능을 크게 개선하며, 안정적이고 확장 가능한 CMS 플랫폼 구축.

      • 사용자 경험 및 개발 생산성 모두 향상.

  • 아임히어워크 앱:

    • UI/UX 리뉴얼: 앱 전반의 화면을 최신 UI/UX 트렌드와 사용자 피드백을 반영하여 대대적으로 리뉴얼.

      • 공통 컴포넌트를 활용해 화면 간 일관성을 높이고 사용자 경험 강화.

    • GPS 및 위치 데이터 개선:

      • 사내 LPin SDK 분석 및 Cell, Wi-Fi, GPS 네이비트 모듈 개발을 통해 GPS 데이터 정확도와 속도를 개선.

      • Mock 위치 데이터를 지도에 표시하며 저장을 차단하는 기능 추가.

      • 위치 요청 로직을 최적화하여 이전 위치 반환 문제 해결.

    • 설문 조사 기능 추가:

      • 퍼널 형태의 설문 조사 기능을 구현.

      • 단답형, 장문형, 체크박스, 파일 업로드 등 다양한 입력 유형 지원.

    • 기술 스택 및 코드 개선:

      • Redux Toolkit을 도입하여 기존 Redux Saga의 복잡성을 줄이고 상태 관리를 최적화.

      • JavaScript 기반 프로젝트를 TypeScript로 점진적으로 전환하여 안정성 강화.

      • 코드 스플리팅과 컴포넌트 최적화를 통해 성능 개선.

    • 플랫폼 지원 강화:

      • Android 및 iOS의 권한 정책 변화에 대응하여 최신 OS 호환성 유지.

      • 다양한 디바이스 환경에 맞춰 UI 및 권한 로직 최적화.

    • 성과:

      • 앱의 전반적인 사용자 경험 대폭 향상.

      • CS 건수 감소: GPS 정확성 및 이미지 업로드 안정화로 사용자 불만을 해소.

      • TypeScript 도입과 리팩토링을 통해 코드 안정성과 유지보수성 강화.

      • 사용성 및 안정성 개선:

        • GPS 개선으로 위치 기반 서비스의 신뢰성 증가.

        • 설문 조사 및 즉시 방문 기록 기능 추가로 서비스 활용도 확대.

        • 전반적인 리뉴얼로 시각적 만족도와 사용자 경험 향상.

  • KIA Trip Advisor

    • 지오펜싱 기반 기능 개발: 관광지 방문 인증과 게시글, 댓글 기반 커뮤니티 기능 구현.

    • 위치 기반 로컬 푸시 알림: 지오펜싱과 백그라운드 위치 데이터를 활용해 사용자 맞춤 알림 제공.

    • 성과: PoC 프로젝트로 관광지와 맛집 추천 기능의 유용성을 증명.

2. 인프라 설계 및 배포 자동화

• 주요 기술: Docker, Jenkins, AWS(ECS, S3, RDS), Proxmox, Cloudflare.

• 배포 자동화:

  • Jenkins 기반의 CI/CD 파이프라인 설계 및 Docker 기반 배포 스크립트 작성.

  • 다양한 기술 스택의 도커화 및 배포:

    • Java Spring Boot: 다중 스테이지 빌드를 활용한 최적화.

    • Go: 경량 이미지 기반으로 빌드 및 배포.

    • Ruby on Rails: 미들웨어 포함 컨테이너 작성 및 배포.

    • React 및 Next.js

      • 빌드 및 정적 파일 생성 후 배포:

        • 정적 파일은 Nginx 기반의 서빙 환경에서 호스팅.

      • Node.js 런타임 환경에서의 SSR/ISR 지원:

        • Docker 컨테이너 내부에서 Node.js로 SSR 및 API 요청을 처리하도록 설정.

        • SSR/ISR 혼합 전략을 통해 서버 리소스 최적화 및 페이지 로드 시간 단축.

  • Slack 알림을 연동하여 배포 상태 실시간 모니터링.

• Proxmox 기반 온프레미스 환경 구성:

  • Jenkins, Nginx Proxy Manager, SonarQube, FusionAuth 등 주요 개발 서비스를 Proxmox VM으로 이전.

  • NAS를 연동하여 VM 스냅샷을 주기적으로 생성, 장애 발생 시 복구 체계 구축.

• Cloudflare 및 Nginx Proxy Manager:

  • Cloudflare를 통한 DNS 관리 및 Nginx Proxy Manager를 사용한 프록시 설정 및 SSL 인증서 자동화.

• 성과:

  • CI/CD 파이프라인과 Docker화로 배포 효율성 개선:

  • Docker 이미지 최적화 및 Jenkins 파이프라인 구성으로 배포 프로세스를 간소화.

  • 다양한 기술 스택에 일관된 배포 환경을 제공하여 안정성 향상.

  • Proxmox 기반 온프레미스 환경에서 안정적이고 확장 가능한 개발 환경 확보.

  • NAS와 Proxmox를 연동한 스냅샷 관리로 데이터 복구 시간 단축.

3. 협업 및 문제 해결

• BFF 패턴 적용:

  • Next.js Route Handlers를 사용하여 프론트엔드 요구사항에 맞춘 BFF(Backend For Frontend) API 설계 및 구현.

  • 프론트엔드와 백엔드 간 데이터 조합 및 효율적인 데이터 전달 로직 개발.

• 백엔드 협업:

  • 백엔드 개발자와 협력하여 주요 백엔드 로직 설계 및 DB 구조 논의.

  • 프론트엔드와 연계되는 API 요구사항 정의 및 데이터 흐름 최적화를 위한 협업.

• 신규 인력 온보딩 및 코드 리뷰로 팀 역량 강화.

배경과 상황

• 기존 문서 관리 방식의 비효율성으로 인해 개발자와 사용자 간의 실시간 문서 반영 및 관리에 어려움이 발생.

• 실시간 업데이트와 효율적인 배포를 지원하는 문서 관리 시스템이 필요.

목표

• MDX 기반 문서 관리 시스템을 설계하여 실시간 업데이트와 높은 유지보수성을 제공.

• GitHub 레포지토리와 연동하여 문서 변경 사항을 자동으로 반영.

참여율

• 프로젝트의 100% 를 단독으로 수행하며 설계, 개발, 배포를 포함한 주요 작업을 담당.

기술 스택

• React, Next.js, TypeScript,

  MDX(Markdown + JSX)

작업 내용

1. MDX 기반 문서 관리 시스템 설계

   • 주요작업:

     • MDX 파일 기반의 문서 관리 시스템 구축.

   • 작업방식:

     • MDX 파일을 React 컴포넌트로 변환하여 동적 UI 제공.

     • 문서 변경 사항을 자동으로 빌드 및 배포하도록 GitHub Action 연동.

2. 실시간 문서 업데이트 및 배포 자동화

   • 주요작업:

     • 문서 변경 사항을 실시간으로 반영.

   • 작업방식:

     • Next.js의 ISR을 사용해 수정된 문서를 빠르게 업데이트.

     • Docker 기반 빌드 파이프라인을 통해 Jenkins로 배포 자동화.

     • Proxmox 머신 기반 상용 서비스용 서버에 배포하여 운영 안정성 확보.

배경과 상황

• 회사와 사용자 관리를 통합하고 신규 기능을 추가하기 위한 슈퍼 어드민 페이지 개발 필요.

• 기존 어드민 페이지는 유지보수가 어려운 구조로 개선이 필요하며, 효율적인 상태 관리와 사용자 접근 제어가 핵심 요구사항.

목표

• 회사 관리 및 사용자 관리 기능을 포함한 안정적이고 확장 가능한 슈퍼 어드민 페이지 구축.

• 사용자 친화적인 UI/UX 제공 및 효율적인 상태 관리 로직 설계.

참여율

• 프로젝트의 100%를 단독으로 수행하며 설계, 개발, 배포 등 대부분의 작업을 주도.

기술 스택

• React, Next.js, TypeScript, Tanstack Query, Shadcn/UI, nuqs를 활용한 URL 기반 상태 관리

작업 내용

1. 회사 및 사용자 관리 기능 개발

   • 주요작업:

     • 슈퍼 어드민 페이지에서 회사 및 사용자 관리 기능 추가.

   • 작업방식:

     • nuqs를 활용한 URL 기반 상태 관리로 간단하고 직관적인 상태 공유 로직 설계.

     • 각 기능의 CRUD 구현

2. BFF 패턴 도입

   1. 주요작업:

      • 기존 API를 조합하여 효율적인 데이터 제공.

   2. 작업방식:

      1. Next.js Route Handlers를 활용해 데이터 가공 및 조합 로직 작성.

      2. 클라이언트 요청에 최적화된 데이터 형식으로 변환하여 API 성능 최적화.

배경과 상황

• 서울교통공사의 태그리스 결제 플랫폼 및 관련 관리자 페이지 개발.

• 앱 서버와 내부망 메인 서버 관리자 페이지를 동시에 개발하며, 실시간 데이터 처리와 사용자 권한 제어가 주요 과제.

목표

• 모노레포 구성을 도입하여 코드 재사용성과 협업 효율성을 증대.

• SSR 스트리밍을 통해 초기 화면 로드 성능을 획기적으로 개선.

참여율

• 프로젝트를 리딩하며 설계와 개발에 기여.

  • 70% 이상의 주요 구조 설계 및 성능 최적화를 주도하고, 나머지 약 30%는 다른 2인에게 태스크를 분배하며 개발 진행.

기술 스택

• React, Next.js 14(App Router), TypeScript, Shadcn/UI, Tanstack Query, Zustand

작업 내용

1. 프로젝트 구조 설계

   • 주요작업:

     • 모노레포 구조를 도입하여 유지보수성과 협업 효율성을 강화.

   • 작업방식:

     • 공통 UI 컴포넌트와 유틸리티 함수, API 타입 등을 독립적인 모듈로 분리.

     • 모듈 간 의존성을 최소화하고 협업 생산성 증대.

2. 성능 최적화

   • 주요작업:

     • SSR 스트리밍 도입으로 초기 화면 로드 성능을 개선.

   • 작업방식:

     • 헤더, 사이드바, 검색 필터 등 주요 UI 요소를 SSR로 우선 렌더링.

     • 테이블 데이터는 클라이언트 컴포넌트에서 하이드레이션으로 로드해 로딩 시간 단축.

3. 데이터 패치 로직 구현

   • 주요작업:

     • 서버와 클라이언트 간 데이터 통신 효율화.

   • 작업방식:

     • Tanstack Query를 사용해 서버에서 데이터를 프리패치하고 클라이언트에서 쿼리 키를 사용해 하이드레이션 처리.

     • Query Params를 활용하여 URL 기반 상태 관리를 통해 데이터 처리의 명확성을 확보.

4. 사용자 권한 제어

   • 주요작업:

     • 사용자 권한에 따라 접근 가능한 페이지를 제한.

   • 작업방식:

     • Next.js 미들웨어를 활용해 로그인한 사용자의 토큰 정보를 기반으로 권한 검증 로직을 구현.

5. 에러 처리 및 코드 품질 개선

   • 주요작업:

     • 에러 핸들링 로직을 개선하고 코드 품질을 향상.

   • 작업방식:

     • 커스텀 에러 클래스를 정의하고 Error Boundary를 사용해 예외 처리 일관성 강화.

     • SonarQube를 도입하여 정적 코드 분석과 품질 관리를 체계화.

성과

• 성능 개선: SSR 스트리밍 도입으로 LCP를 8초에서 1초 미만으로 단축.

• 유지보수성 강화: 모노레포 구성을 통해 코드 중복을 제거하고 협업 효율성을 극대화.

• 데이터 처리 최적화: Tanstack Query와 Query Params를 활용해 상태 관리 복잡성을 줄이고 데이터 패치 성능을 향상.

• 서비스 안정성 확보: 커스텀 에러 핸들링과 SonarQube를 통한 코드 품질 개선으로 시스템 안정성 강화.

배경과 상황

• SK 자사 쇼핑몰의 JSP 기반 레거시 시스템을 React로 마이그레이션.

• 기존 소스코드는 실행 불가 상태였으며, 요구사항 기획서 없이 상용 페이지와 소스코드만 제공된 상태에서 개발 착수.

• 쇼핑몰은 데스크톱과 모바일을 별도의 URL로 분리하여 관리해야 했음.

목표

• 기존 JSP 시스템의 소스코드와 쿼리를 분석하여 동일한 기능을 React 기반으로 재구성하여 데스크톱 및 모바일 쇼핑몰 개발.

• API 설계 및 데이터 구조 재정의로 서버와 프론트 간 데이터 전달 최적화.

• 사용자 경험과 성능을 대폭 개선하며, 외부 시스템 연동(TID 로그인, KMC 본인인증, TGate 개통, PG 결제) 안정성 확보.

참여율

• 프로젝트의 90% 이상을 단독으로 수행. 약간의 퍼블리싱 작업을 제외한 대부분의 로직을 개발.

기술 스택

• React, TypeScript, Vite, TailwindCSS, Zustand.

작업 내용

1. 레거시 분석 및 API 설계

   • 기존 JSP 코드와 실행 중인 화면을 분석하여 데이터 흐름과 비즈니스 로직 파악.

   • 쇼핑몰에서 사용하는 데이터 쿼리를 추출하고 이를 기반으로 새로운 데이터 모델과 API 설계 요구사항 문서화.

2. UI/UX 개선 및 React 컴포넌트화

   • 쇼핑몰 화면을 컴포넌트 단위로 분리하여 재사용성을 높이고 유지보수 용이성 확보.

   • TailwindCSS를 도입해 UI 작업의 생산성을 높이고 유지보수성 강화.

   • Lazy Loading과 Suspense를 도입해 초기 로딩 속도를 개선.

3. 외부 시스템 연동

   • TID 로그인, KMC 본인인증, TGate 개통, PG 결제 등 외부 시스템 연동을 BroadcastChannel API로 구현.

   • 외부 시스템 처리 후 돌아올 때 사용자의 작업 상태를 보존하고 빠르게 결과를 반영하도록 브로드캐스팅 로직 설계.

4. 데스크톱/모바일 분기

   • User-Agent를 활용해 데스크톱과 모바일 사용자들을 구분하여 별도의 URL로 분기하도록 설계.

   • 두 환경에서 공통 컴포넌트를 활용할 수 있도록 화면 구조를 일원화하면서 각각의 요구사항에 맞춘 최적화 적용.

5. 성능 및 유지보수성 개선

   • 페이지의 주요 콘텐츠를 우선적으로 렌더링하도록 설계하여 LCP(Largest Contentful Paint) 최적화.

   • 코드 스플리팅을 적용해 사용하지 않는 모듈을 로드하지 않도록 처리.

성과

• 소방수 역할로 투입:

  • 초기 팀 구성 단계에서 프로젝트의 규모를 잘못 파악하여 많은 기능과 작업량이 누락된 상태였으나, 5개월 만에 데스크톱 및 모바일 쇼핑몰의 모든 React 프론트엔드 작업을 단독으로 완수하며 프로젝트를 정상화.

  • 이 과정에서 초기 데이터 분석, API 설계 요구사항 정의, 컴포넌트 설계, 외부 시스템 연동 등 전반적인 개발 과정의 핵심 역할 수행.

• 서비스 안정성 확보:

  • React와 Vite를 도입해 최신 기술 스택으로 마이그레이션하며 JSP 기반의 불안정한 레거시 시스템을 대체.

  • 데스크톱 및 모바일 환경을 별도 URL로 분리하고 Lazy Loading과 Suspense로 성능을 최적화하여 사용자 경험을 대폭 개선.

• 외부 시스템 통합 경험 강화:

  • BroadcastChannel API를 활용해 TID 로그인, KMC 본인인증, TGate 개통, PG 결제 등 외부 시스템과의 연동 안정성을 확보.

  • 실시간 연동 결과 반영 및 사용자 작업 흐름 유지를 통해 외부 시스템과의 통합을 사용자 친화적으로 구현.

• 기술적 리더십 발휘:

  • 프로젝트 초반의 불확실한 요구사항과 실행 불가 상태의 소스코드 속에서 기술적 리더십을 발휘하여 데이터 분석 및 구조 정의를 성공적으로 수행.

  • 프로젝트 진행 과정에서 최신 기술 도입과 성능 최적화로 전체 프로젝트를 정상 궤도로 이끌며 안정적 서비스를 제공.

배경과 상황

• 위치 기반 근태 관리 및 서비스 활용을 위한 앱으로, 주요 기능 확장과 버그 수정이 핵심 과제.

• 기존 Redux 기반 상태 관리 및 비동기 로직의 복잡성을 개선하고, GPS 데이터 신뢰성 강화가 필요.

목표

• GPS 데이터 정확도와 성능 개선을 통해 위치 기반 서비스 품질 향상.

• 기존 상태 관리 방식을 개선하여 유지보수성과 성능을 강화.

• 새로운 기능 추가와 코드 품질 개선으로 앱의 안정성과 사용자 만족도 증대.

참여율

• 프로젝트 인수 후 100% : UI/UX 리뉴얼, 네이티브 모듈 개발, 상태 관리 최적화, 코드 개선 등 전반적인 앱 개발 주도.

기술 스택

• React Native, TypeScript, Redux Toolkit, Redux Saga,

  Fastlane, 코드푸시(CodePush), Android, iOS 네이티브 개발

주요 작업

1. GPS 및 위치 데이터 개선

   • 주요작업:

     • GPS 데이터의 정확도와 응답 속도를 개선하고, Mock 위치 데이터에 대한 처리 로직 추가.

   • 작업방식:

     • 기존 사내 SDK를 분석하여 각 OS별로 최적화된 GPS 로직을 새로 개발.

     • Android와 iOS 네이티브 모듈을 활용해 Cell, Wi-Fi, GPS 데이터를 병렬로 처리하여 정확도와 성능 개선.

     • Mock 위치 데이터를 지도에 표시하되, 저장은 차단하도록 설계.

2. 상태 관리 및 비동기 로직 개선

   • 주요작업:

     • 기존 Legacy Redux 구조를 Redux Toolkit으로 전환.

     • Redux Saga를 통해 비동기 로직 관리.

   • 작업방식:

     • Redux Toolkit의 Slice를 활용해 액션과 리듀서를 간결하게 관리.

     • 비동기 API 호출과 상태 전환을 Redux Saga로 처리하며, 코드 복잡도를 낮춤.

3. 이미지 업로드 안정화

   • 주요작업:

     • HEIC 이미지를 JPEG로 변환하며 메타데이터를 유지하는 라이브러리 개발.

   • 작업방식:

     • Android와 iOS에서 HEIC 파일의 업로드 호환성을 확보.

     • 업로드 시 타입 검증과 메타데이터 보존 로직을 추가해 안정성을 강화.

4. UI/UX 리뉴얼 및 기능 개선

   • 주요작업:

     • 기존 화면의 기능성 개선과 신규 기능 추가.

   • 작업방식:

     • UI 컴포넌트 최적화를 통해 초기 로드 성능 개선.

     • 즉시 방문 기록 기능과 설문 조사 기능을 추가:

     • 방문 기록: 별도의 일정없이 네이버 지도 SDK를 활용해 실시간 위치 확인과 기록 기능 구현.

     • 설문 조사: 단답형, 장문형, 체크박스, 파일 업로드 등 다양한 입력 유형을 지원.

5. 빌드 및 배포 자동화

   • 주요작업:

     • Fastlane을 활용한 빌드 프로세스 자동화.

     • 코드푸시(CodePush)를 적용해 OTA 업데이트 기능 추가.

   • 작업방식:

     • iOS와 Android 플랫폼에서 코드 업데이트를 무중단으로 배포.

     • Fastlane으로 빌드, 테스트, 배포 단계를 자동화해 효율성 증대.

성과

• 버그 감소:

  • GPS 및 이미지 업로드 로직 개선으로 2023년도 대비 버그성 CS 건수가 90% 이상 감소 (5건 미만 발생).

• 사용성 강화:

  • 방문 기록 및 설문 조사 등 신규 기능 추가로 앱 활용도 확대.

• 배포 효율성 향상:

  • Fastlane과 코드푸시를 도입해 OTA 업데이트를 통해 배포 속도 및 안정성 증대.

배경과 상황

• 기존 CMS는 React 16.3 기반의 클래스 컴포넌트로 작성되어 유지보수가 어려운 구조였고, 상태 관리 라이브러리인 MobX의 과도한 사용으로 코드 복잡성이 높아졌음.

• 번들링 속도와 배포 시간도 오래 걸리는 상황에서, 성능 개선 및 유지보수성을 강화하기 위한 전반적인 리팩토링 필요.

목표

• React 최신 버전과 함수형 컴포넌트를 도입해 생산성을 높이고, 상태 관리 및 데이터 패칭 로직 최적화.

• Webpack에서 Vite로 번들러를 전환하여 빌드 및 배포 속도 개선.

• Docker 및 Jenkins를 활용한 배포 프로세스 자동화.

참여율

• 프로젝트 인수 이후 100% 이상을 단독으로 수행하며 설계, 개발, 배포 전반을 주도.

기술 스택

• React, Javascript, TypeScript, Mobx, Recoil, React Query, Vite, Reactstrap

작업 내용

1. React 업그레이드 및 리팩토링

   • 주요작업:

     • React 16.3에서 React 17로 업그레이드하며 함수형 컴포넌트와 훅을 도입.

   • 작업방식:

     • 클래스 기반 컴포넌트를 함수형 컴포넌트로 점진적 리팩토링.

     • 상태 관리 로직을 단순화하고, 글로벌 상태는 Recoil로 전환.

2. 상태 관리 최적화

   • 주요작업:

     • MobX 상태 관리에서 발생하는 문제를 해결하고 데이터 패칭 로직 개선.

   • 작업방식:

     • MobX 기반의 전역 상태를 점진적으로 제거하고 Recoil 및 React Query로 교체.

     • 페이지 단위 데이터 패칭으로 성능 개선 및 상태 관리 간소화.

3. 번들러 전환 및 성능 개선

   • 주요작업:

     • Webpack에서 Vite로 번들러를 전환하여 빌드 및 배포 속도 향상.

   • 작업방식:

     • Vite 도입으로 빌드 속도를 크게 단축.

     • Lazy Loading 및 코드 스플리팅으로 초기 로드 시간 개선.

     • 빌드 시간 67% 감소 (288s → 93s).

4. 배포 프로세스 자동화

   • 주요작업:

     • Docker 기반 배포 및 CI/CD 파이프라인 작성.

   • 작업방식:

     • Docker로 빌드 환경 구성, 생성된 빌드 파일을 S3에 업로드.

     • Jenkins 파이프라인 작성으로 배포 자동화 및 효율성 강화.

프로젝트 개요

• 목표: GPS 기반 강의 출결 관리, 방문 기록 저장, 위치 데이터 처리 등 위치 기반 서비스 제공.

• 범위:

  • 사용자 신뢰도 및 데이터 정확성 강화를 위한 기능 개발.

  • 권한 관리 로직 최적화 및 성능 개선.

  • 구형 단말기와 최신 OS 간의 호환성 확보.

  • 사용자 경험 개선 및 CS 대응 방안 마련.

스킬

• React Native, TypeScript, Redux-Saga, Android, iOS 네이티브 개발

작업내용

• 권한 관리 강화:

  • Android/iOS 권한 변경 사항 대응으로 데이터 신뢰성과 보안성 향상.

• 구형 단말기 호환성 확보:

  • 메모리 최적화와 이미지 리소스 조정으로 앱 안정성 강화.

  • TLSv1.3 미지원 문제 해결

• 사용자 경험 향상:

  • UI/UX 리뉴얼 및 키보드 이벤트 개선으로 사용자 불편 해소.

프로젝트 개요

• 목표: 고객 대상의 관광지 추천 및 방문 인증을 제공하는 현대 제로원 PoC 프로젝트.

• 범위:

  • React Native 기반 Android 앱 개발.

  • 지오펜싱 및 백그라운드 페칭을 통해 위치 기반 관광지 추천 및 인증 시스템 구축.

  • 커뮤니티 기능을 통한 관광지 경험 공유.

스킬

• React Native, TypeScript, GPS, Geofencing, Push Notification

작업 내용

1. 지오펜싱 및 관광지 추천 기능 개발

   • Android 지오펜싱 API를 통해 백그라운드에서 위치 모니터링.

   • 사용자 프로필 데이터(연령, 성별 등)를 기반으로 개인화된 추천 서비스 제공.

   • 푸시 알림을 통해 사용자가 관광지에 접근하면 추천 정보를 실시간 제공.

2. 커뮤니티 기능 개발

   • 관광지 방문 인증 후 사용자 간 소통을 위한 커뮤니티 기능 개발.

프로젝트 개요

• 목표:

  • 빌딩 인증 기반의 직장인 커뮤니티 앱(MVP) 개발 및 고도화.

  • 빠른 시장 테스트와 사용자 반응을 확인하기 위한 서비스 출시.

• 범위:

  • React Native를 기반으로 한 모바일 앱과 React를 사용한 웹 개발.

  • 초기 MVP 개발 및 1차, 2차 서비스 고도화 작업 수행.

역할

• 앱 및 웹 개발 전반 주도.

• 주요 기능 설계 및 구현, 유지보수.

• CI/CD와 앱 배포 프로세스 개선.

스킬

• React Native, React, TypeScript, Redux, Redux-Saga, React Query

작업 내용

1. 앱 MVP 개발 (1차)

   • 주요작업:

     • 빌딩 인증 기반 커뮤니티 앱을 위한 핵심 기능 설계 및 구현.

   • 작업방식:

     • Geolocation API와 다음 주소 검색 API를 활용해 빌딩 인증 로직 구현.

     • 빌딩관리자/일반 사용자 구분 로직 개발.

     • Firebase Crashlytics를 통해 런타임 에러 로깅.

     • 앱 권한 요청 로직 개발:

2. 1차 고도화 및 개선 작업

   • 랜딩 페이지 및 딥링크 개발 및 웹뷰를 활용해 한 줄 게시판 기능 구현

   • Fastlane 도입

   • Redux-Saga를 React Query로 전환하여 데이터 페칭 상태 관리 효율화. 및

     • Optimistic Update 도입

3. 2차 고도화 및 추가 기능 개발

   • 채팅 기능:

     • PubNub SDK와 Reverse Flat List를 활용해 실시간 채팅 구현.

   • 회의실 예약 기능:

     • 30분 단위로 8~20시까지 예약 가능한 회의실 관리 기능 개발.

1. react-native-iphone-screen-helper

   • 프로젝트 개요:

     • React Native 애플리케이션에서 iPhone의 다양한 화면 크기 및 노치 디자인에 대응하기 위한 유틸리티 라이브러리.

     • Safe Area와 관련된 복잡한 처리를 간소화하여 개발자가 빠르게 화면을 구성할 수 있도록 지원.

   • 배경과 이유:

     • React Native로 개발하는 과정에서 iPhone의 화면 비율 차이로 발생하는 UI 왜곡 문제를 지속적으로 경험.

     • 기존 라이브러리를 활용하던 중, 유지보수가 중단된 것을 확인하고 이를 포크하여 업데이트와 개선 작업을 지속.

   • 성과:

     • 평균 주간 다운로드 수가 2.5만 이상으로 많은 개발자들에게 사용되며, 다양한 React Native 프로젝트에서 활용 중.

     • 기존 라이브러리를 포크한 뒤 업데이트와 유지보수를 통해 최신 디바이스 호환성을 지속적으로 보장.

2. react-native-simple-heic2jpg

   • 프로젝트 개요:

     • iOS의 HEIC 포맷 이미지를 JPG로 변환하며 메타데이터를 유지하는 React Native용 유틸리티 라이브러리.

   • 배경과 이유:

     • HEIC 포맷의 이미지를 업로드하거나 변환하는 과정에서 메타데이터(위도, 경도 등)가 손실되는 문제가 빈번히 발생.

     • 기존 라이브러리로는 이러한 문제를 해결하기 어렵다고 판단, React Native 네이티브 모듈로 직접 구현.

   • 성과:

     • 사용자들로부터 이슈와 피드백을 통해 꾸준히 개선점을 반영하며 기능을 고도화.

     • 이미지 업로드와 변환 문제를 겪는 개발자들에게 실질적인 도움을 제공하며 사용자들에게 긍정적인 반응.

3. @chlee1001/react-native-code-push

   • 프로젝트 개요:

     • 기존 Microsoft React Native CodePush 프로젝트 지원중단에 대비한 커스터마이징 라이브러리.

   • 배경과 이유:

     • 기존 CodePush 라이브러리를 활용하던 중, New Architecture 지원 및 버그 수정이 필요하다는 점을 인식.

     • 기존 레포를 포크하여 New Architecture 지원 및 여러 수정 사항을 취합해 프로젝트에 적합한 형태로 배포.

   • 성과:

     • React Native의 최신 구조(New Architecture)를 지원하며, 프로젝트와의 통합 및 배포 과정을 안정화 진행중

     • 여러 버그를 취합하고 수정하여, 기존 CodePush 사용자들에게도 개선된 선택지를 제공.