미리보기

교육 서비스 플랫폼 H-CUBE 퍼블리싱 및 프론트엔드 개발

• H-CUBE 프로젝트에서 공통으로 사용되는 컴포넌트 모듈을 개발

• Intersection Observer와 Vanilla JavaScript를 이용하여 스크롤에 따른 인터렉티브 웹 구현

• UploadCare 라이브러리를 활용해 업로드 한 이미지를 원하는 해상도로 리사이징하여 CDN 주소 발급 및 이미지 다운로드 기능 구현

기술스택:Html,Css,Scss,Jsp,Vanilla Javascript,Jquery

소방시설 통합관제 시스템 이지365 대쉬보드 개발

• MQTT를 이용하여 화재 경보 알림을 실시간으로 확인할 수 있는 대쉬보드 개발 담당

• 함수형 코드로 작성된 mqttSocket을 클래스형으로 리팩토링하여 소켓 연결 및 관리를 별도의 객체로 분리하여
  재사용성을 향상 및

  useEffect의 의존성 변화로 인한 불필요한 렌더링 문제를 해결

• window.confirm을 지원하지 않는 브라우저에 대응하기 위한 커스텀 훅 작성

• MUI 컴포넌트를 커스텀 하여 다양한 형태의 재사용 컴포넌트 개발 (alert, confirm, modal)

• Docker와 Github Action을 활용하여 다양한 환경에서 안정적인 배포 프로세스 구축

• 리액트 CRA로 되어있던 파일을 vite의 esbuild 번들러로 마이그레이션 함으로써 빌드 시간 약 85% 개선

  • 개선 전: 평균 100s

  • 개선 후 : 평균 15s

  기술스택: React,Javascript,Gatsby,Github-action,Vite,Material UI,Mqtt,Docker

회원수 5천명 전국민 헌혈참여 플랫폼 피플

• 웹과 앱 서비스 기획/개발/배포/운영을 담당하였으며, 주로 앱 내 사용되는 웹뷰와 웹 서비스 개발 담당

• 기존의 react로 작업된 코드를 Next js로 마이그레이션 하여 SSG,SSR 방식으로 랜더링 하여 SEO 개선

• AWS Amplify에서 정적 이미지 로딩 지연 이슈가 존재하여 배포 방식을 AWS Elastic Beanstalk으로 변경하여 문제 해결

• iOS 환경에서 Webview 로드 지연 문제를 해결하기 위해 코드 스플리팅을 적용하고 SSR 방식으로 전환하여 초기 로드 속도를 개선 및

  이를 통해 첫 진입 로딩 시간을 평균 4초에서 1.8초로 단축해 성능 문제를 해결

• Google analytics의 이벤트를 이용하여 사용자들의 이벤트 및 페이지 전환 감지 이벤트 삽입하여 데이터 측정

• 프론트엔드 모니터링, 에러 로그를 좀 더 쉽게 보기 위해 Sentry를 도입하여 보다 편리한 에러 모니터링 툴 도입
  기술스택: React,Typescript,Next js(v12),React-query,Google-analytics,Facebook-meta,AWS Elastic Beanstalk,Recoil,Flutter Webview

SI프로젝트로 다양한 도메인의 프로젝트 진행

• 상품을 코드로 발급하여 누구나 편리하게 상품을 주고받을 수 있는 자사 쇼핑몰 디톡스 개발

  • 프론트엔드

    • 혼자서 쇼핑몰에 필요한 모든 관리자 기능 개발 (약 24개의 페이지 구현)

    • 상품 업로드 시간을 단축하기 위해 엑셀데이터를 파싱하여 JSON 형태의 데이터로 가공하여
      다중 업로드 기능 구현

    • 상품 검색 과정 속에서 사용자의 생산성 향상을 위해 검색창 자동완성, Tab, Enter,방향키 등 키 입력에 대한 동작 개선

  • 백엔드 (.Net Framework)

    • 주문결제 시 슬랙 알림 봇 연동 기능 구현

    • 상품 질의 응답 인터페이스 구현

    • SNS 소셜 로그인 기능 구현

• 반려동물을 위한 커뮤니티 및 관련매장 소개 플랫폼 편안하개 개발

  • 프론트엔드

    • Angular를 이용하여 React-native Webview를 이용하여 페이지 UI/UX 개발

    • React-native Webview를 이용하여 뒤로가기 이벤트 핸들링 기능 구현

    • WebView의 postMessage로 전달된 데이터를 수신하고, 데이터 타입에 따라
      사진 다운로드, 사진 공유 등의 기능을 처리하는 로직 구현

    • Husky, Git Hooks, Prettier를 활용해 개발자별 코드 스타일 차이를 해결하고 코드 컨벤션의 일관성을 유지. 특히, 탭 간격 등 사소한 포맷팅 차이로 인해 불필요한 커밋 내역이 생성되지 않도록 자동화된 코드 정리를 구현.

  • 백엔드 (Express)

    • 커뮤니티 CRUD api 개발

    • Expo-notifications를 활용하여 푸시 알림 기능 구현

• 오프라인에서 즐길 수 있는 레이저 사격 시스템 프론트엔드 개발

  • Media query와 User-agent 기능을 이용하여 디바이스 별 반응형 웹 구현

  • Rxjs를 이용하여 Socket.io의 실시간 데이터 구독 및 데이터 전송 인터페이스 구현

• 여러개의 네이버 스마트스토어를 관리 할 수 있는 구매대행 통합관리 시스템 개발

  • 각 스토어별로 분리된 함수 로직을 하나의 순수 함수로 통합하여, 재사용성과 코드 가독성 개선

  • 크롤링과 풀링 방식으로 동작하던 방식에서 커머스 API 호출 방식으로 개선하여 효율성을 향상

  기술스택: Typescript,Angular,React,React-native Webview,Node js,Express,Rxjs,Socket.io

빠르고 확실한 반려견 출장 목욕 서비스

• 웹페이지 및 iOS 앱 내 Webview 개발

• 팀장으로서 팀 내 개발 가이드 및 문서를 작성해 팀원들의 학습과 프로젝트 적응을 지원 담당

• 서비스가 확장 될 수록 컴포넌트의 props가 계속 추가되는 문제를 해결하기 위해

  컴파운드 컴포넌트 패턴을 적용하여 기능을 분리하고, 확장성과 유지보수성 개선

• 사이드 프로젝트인만큼 개발자들의 작업시간대가 각각 달랐기 때문에 MSW를 이용하여 개발되지 않은 API를 Mocking하여 연동에 필요한 시간을 단축

• TurboRepo를 활용해 분산된 프론트엔드 레포지토리를 Monorepo로 통합하고, 공통 모듈 중복 문제를 해결 및
  기존 Yarn 환경에서 발생했던 유령 의존성 문제를 Pnpm으로 전환하여 해결

• Webview 기반 프로젝트인 만큼, 가벼운 사용자 경험 제공을 목표로 최적화에 집중

  • vite에서 Next js로 마이그레이션 하여 코드 스플리팅 적용 및 LightHouse 성능 점수 78점에서 99점으로 개선

  • Recoil대신 Zustand 라이브러리를 사용하여 패키지 크기 감소

  • Provider를 사용하지 않기 때문에 필요한 부분만 리렌더링 가능

기술스택: React,Typescript,Next js(v14), Gatsby,github-action,vite,pwa,react-query ,zustand,turboRepo

• 피플 서비스를 주제로 참가하여
  기술을 이용해 사회문제를 해결하는 사이드 임팩트에 참가하여 약 1200만원의 지원금을 확보 하였습니다.

• 언론보도
  

• 신한금융그룹에서 주관하는 스타트업 육성 프로그램인 '신한 스퀘어 브릿지'에서 대학생 트랙 우수상 수상

• 유튜브 발표 링크

• Python Django를 메인으로 웹개발 교육

• 해커톤 및 아이디어톤 ,협업중심의 개발교육