미리보기

주요 언어 및 라이브러리

react-native, typescript, jotai, react-query 등

주요 담당업무

• 차봇 앱 - 내 차 구매 서비스

  • 국산차/수입차 견적매칭, 즉시출고 개발 완료

  • 현재 고도화 및 프로모션 작업 등 내 차 구매 관련 모든 개발 담당

• 치봇 앱 - 이네오스 그레나디어 특별관 담당

  • 자동차 이미지 360도 이미지 회전 뷰어 작업

    • react-native Animated 를 활용하여 작업

    • https://youtube.com/shorts/hpN2eahYDLU?feature=share (시연영상)

주요 언어 및 라이브러리

react, typescript, jotai, recoil, leaflet, openlayers, react-query 등

주요 담당업무

• 제주시 주요 채소류 생산 정보 사업

  • 채소류 생산 정보 신고서 등록 및 관리 기능

  • 드론 관측 결과와 드론 촬영 사진으로 AI가 딥러닝한 내용을 지도상에 가시화

    • openlayers 사용

• DDrive

  • 드론 촬영 이미지와 영상을 업로드하고 관리하는 자사 클라우드 서비스

  • 이미지 및 영상 업로드 기능

  • 위치 데이터 기반 클러스터링 기능

    • leaflat 사용

주요 언어 및 라이브러리

react, javascript, redux, fabric.js 등

주요 담당업무

• 줍다 - 사내 서비스

  • 포토에디터 작업

    • fabric.js 사용

  • 이미지 최적화를 위해 압축

  • Iamport API 와 내부 API 를 사용하여 포인트 적용, 쿠폰 적용 시 결제 서비스 구현

• 브랜드비 (brandb.net) - 외주 서비스

  • 어드민 페이지에서 등록한 모든 로고와 로고 에이전시의 정보를 한눈에 볼 수 있는 서비스

  • 어드민 & 서비스 모두 개발

  • React-Quill 에디터를 사용하여 게시글 등록

서비스

차봇 모터스가 임포트 한 차량인 이네오스 그레나디어 특별관 화면 작업

주요 기능 및 작업

• 환경 분리 작업

  • dev, staging, release 버전에 따라 env를 설정해주는 script 를 만들어 효율성을 증대함

• 코드푸시 작업

  • 스플래쉬 화면에서 코드푸시 업데이트 체크 및 업데이트 작업

인원

프론트엔드 1명

주요 언어 및 라이브러리

React-Native Typescript Codepush

서비스

차봇 모터스가 임포트 한 차량인 이네오스 그레나디어 특별관 화면 작업

주요 기능 및 작업

• 차량 이미지 360도 Viewer 작업

  • React native Animated 를 이용하여 작업

• loop slider 작업

  • flatlist 를 이용하여 작업

인원

프론트엔드 1명, 백엔드 1명

주요 언어 및 라이브러리

React-Native Typescript React-Native-Video

서비스

즉시출고 가능한 차량을 신청할 수 있는 서비스

주요 기능 및 작업

• 차량 장기렌트/리스 , 일시부/할부 각 각 데이터 호출 및 화면 작업

• 위에서 선택한 데이터를 바탕으로 할부/일시불 금액, 보증금 등 정보 입력하여
  즉시출고 상담 신청 기능 및 화면 작업

• 즉시출고 상세 페이지 및 상담 후기 페이지 기능 및 화면 작업

• 개편 후 신청건수 50% 이상 증가

인원

프론트엔드 1명, 백엔드 1명

주요 언어 및 라이브러리

React-Native Typescript React-Query Jotai

서비스

차량 견적을 신청하여 딜러들이 보낸 견적을 받아볼 수 있고 원하는 견적이 매칭 되면 상담을 신청하여 차량을 구매할 수 있는 서비스

주요 기능 및 작업

• 차량 브랜드 / 모델 / 세부모델 데이터 호출 및 화면 작업

• 차량 옵션 화면 작업 및 필수 선택 / 필수 제외 / 제외 기능 작업

• 위에서 선택한 데이터를 바탕으로 금액 등 정보 입력하여 견적 신청 기능 및 화면 작업

• 견적 매칭 상세 및 상담 신청 페이지 기능 및 화면 작업

• 리텐션 상승 및 매출 상승에 기여

인원

프론트엔드 2명, 백엔드 1명

(견적 신청내용 화면 작업 외에 나머지 프론트엔드 작업은 제가 다 하였습니다. )

주요 언어 및 라이브러리

React-Native Typescript React-Query Jotai

서비스

현대해상 보험 이용자 대상 긴급출동 신청 서비스

주요 기능 및 작업

• 긴급출동 요청 기능 작업 및 화면 작업

• 현대해상 보험 등록 회원 대상 노출

인원

프론트엔드 1명, 백엔드 1명

주요 언어 및 라이브러리

React-Native Typescript React-Query Jotai

서비스

차량 구매·관리·판매 등 운전자 라이프사이클 전과정에서 필요한 모든 서비스를 제공하는 모빌리티 플랫폼

Flutter 에서 React-Native 로 개편 하였으며 사용자 편의성 및 향후 개발 환경을 고려하여 작업

주요 기능 및 작업

• 사내 디자인 시스템 공통 컴포넌트화 및 적용

  • 캘린더 시스템 작업 등

• codepush 적용

• 주행거리 기록 화면 및 기능

• 차계부 기록 화면 및 기능

  • 차계부 작성 시 고객의 현재 위치에서 가장 가까운 주유소 / 정비소 제공 및 검색 기능

• 정비항목 화면 및 기능

  • 정비항목 교체 추기 가시화

• 주변 서비스 찾기 검색 기능 개선

인원

프론트엔드 3명, 백엔드 2명

주요 언어 및 라이브러리

React-Native Typescript React-Query Jotai

서비스

딜러를 위한 차량 구매 고객 매칭 서비스

주요 기능 및 작업

• 고객이 요청한 차량 견적 제안 기능

• 고객 요청 견적을 48시간 안에 보내야 하므로 이에 필요한 초단위의 타이머 기능 작업

• 매칭 고객 관리 기능 ( 신규 / 상담 진행 / 출고 완료 등으로 나누어 관리 )

• 사내 디자인 시스템 구축 및 적용

• AWS Elastic Beanstalk 배포

인원

프론트엔드 1명, 백엔드 1명

주요 언어 및 라이브러리

React.js Typescript React-Remix AWS(Elastic Beanstalk)

서비스

드론 촬영 이미지와 영상을 업로드하고 해당 촬영 위치를 지도상에서 가시화하여 관리하는 자사 클라우드 서비스

주요 기능 및 작업

• 구글 로그인 SSO 기능

• 이미지 및 영상 업로드 기능

• 위치 데이터 기반 클러스터링 기능

• VAC 패턴 사용

• View 작업 시 TDD 적용

인원

프론트엔드 2명, 백엔드 3명

주요 언어 및 라이브러리

React.js Typescript React-Query Leaflet Styled-Components Material UI V5

서비스

채소류 생산 정보를 등록할 수 있고 채소류의 드론 관측 결과와 드론 촬영 사진으로 AI가 딥러닝한 내용을 지도상에 가시화 하는 서비스

주요 기능 및 작업

• 채소류 생산 정보 신고서 관리 기능

• Recoil 을 사용하여 상태관리

• OpenLayers 를 이용하여 데이터를 지도에 가시화

• Chart.js 를 사용하여 통계 가시화 및 이미지화하여 zip 파일로 다운로드

• socket 을 사용하여 대용량의 엑셀 파일 다운로드

인원

프론트엔드 1명, 백엔드 1명

주요 언어 및 라이브러리

Next.js Typescript Recoil useSWR Material UI V5 OpenLayers

서비스

버려진 종이컵을 재활용 하여 만든 재생종이로 이미지를 편집하여 사진인화, 포토북, 커스텀 문구류 등을 제작할 수 있는 서비스

주요 기능 및 작업

• Fabric.js를 이용한 포토 에디터 구현

• 이미지 최적화를 위해 압축

• Iamport API 와 내부 API 를 사용하고 포인트 적용, 쿠폰 적용 시 결제 서비스 구현

• Google Firebase 를 이용한 휴대번호 인증 작업

• 네이버, 구글, 페이스북(인스타그램) React-Helmet 을 사용하여 검색 최적화 작업

주요 언어 및 라이브러리

JavaScript React.js Fabric.js Axios Material UI Styled-Components Redux

인원

프론트엔드 2명, 백엔드 2명

특이사항

사업 철수

서비스 (brandb.net)

어드민 페이지에서 등록한 모든 로고와 로고 에이전시의 정보를 한눈에 볼 수 있는 서비스

주요 기능 및 작업

• 어드민에서 등록한 모든 데이터를 보여줌

• React-Quill 에디터를 사용하여 게시글 등록

• AWS

  • 가비아와 Route53를 이용하여 도메인 연결 및 서브도메인 적용

  • Cloudfront를 이용하여 https 적용

  • S3 버킷으로 배포

인원

프론트엔드 2명, 백엔드 2명

주요 언어 및 라이브러리

JavaScript React.js React-quill Axios Material UI Styled-Components Redux

활동내용

서울시에서 주관한 청년인턴 직무 캠프이며
웹 개발 관련한 전반전인 교육을 수강하고 개발하고 싶은 서비스가 같은 팀원들과 프로젝트를 진행하였습니다.

활동결과

Re:Book 📚

• 서비스 : 도서를 검색할 수 있고 사용자가 본 도서를 기록할 수 있으며 타 사용자와 서로 리뷰를 공유할 수 있는 도서 리뷰 웹 서비스

• 개발 기간 : 2021.6 ~ 2021.7

• 인원 : 프론트엔드 3명, 백엔드 3명

• 주요 기능 및 작업

  • Redux를 활용한 상태관리 및 데이터 패치

  • React-Infinite-Scroll-Component 를 활용한 무한 스크롤 기능

  • 이미지에서 가장 많은 영역을 차지하는 색상을 추출하여 이미지의 backgroundColor 로 적용하는 작업

• 주요 언어 및 라이브러리

  • TypeScript React.js Axios Material UI Styled-Component React-Infinite-Scroll-Component

• 배포 환경

  • AWS S3 AWS Cloudfront AWS Route53

• 수상

  • 코딩온 소프트웨어 대회 대상