** 입사 9개월차 부터 팀 내의 1인 프론트엔드 개발자로서 프론트엔드 프로젝트 진행과 기존 대시보드 기능 개발 및 프론트엔드 관련 모든 대시보드의 버그 해결과 유지보수 담당 중. 1. 실시간 혼잡도 모니터링 솔루션 GS 인증 대시보드 웹 프론트엔드 개발 담당 및 GS인증(1등급) 획득 회사 특허 센서가 설치된 지역의 실시간 인구 밀도 데이터를 대시 보드 화면에 지도, 그래프, 표 등 다양하게 시각화하여 실시간 및 분 단위로 업데이트 합니다. 관리자와 사용자 모드로 로그인 할 수 있으며, 센서 관리 페이지와 사용자 등록, 삭제, 수정 기능 등을 이용할 수 있는 대시보드입니다. 센서는 싱가폴, 한국, 유럽, 이스라엘 등 다양한 국가에 설치되어 있으며, 그 중 GS 인증을 받기 위한 한국 건을 담당하여 진행하였으며, 팀 내 다국적의 개발자와 어울리며 한국어와 영어로 회의 및 문서 작성과 개발을 진행합니다. - GS 인증 신규 대시보드 UI, UX와 반응형 웹 개발 프론트엔드 개발 담당 - 로그인, 대시 보드 지도/그래프/표, 다국어적용, 센서 관리, 사용자 관리 페이지(CRUD) 개발, 에러처리 및 실시간 분 단위 렌더링 - React & ES6 문법, Redux Toolkit (RTK) 상태 관리, 컴포넌트 모듈화, Private Routes 등 사용 - Leaflet 지도, Recharts 그래프, Mui, Luxon, i18next 다국어 적용 등 다수 라이브러리 사용 2. GS Caltex 내곡점 주유소 전광판 스크린 UI, UX 담당 GS Caltex 주유소 세차장 무인화 프로젝트로 카메라 센서가 세차장으로 들어오는 차량 번호를 인식하면 전광판에 차량 번호와 GS 가입 고객 여부에 따른 메세지를 뿌리고 순차적으로 세차장 진입 문구와 카드 결제 안내를 뿌려주는 작업으로 UI, UX 담당. - GS Color Pallete 를 이용한 UI, UX 작업 및 스크린 가로 모드와 세로 모드 반응형 작업 - 전광판에 차량 번호와, 5초 간격으로 세차 안내 문구 뿌리는 작업 및 비디오 광고 영상 뿌리는 작업 3. 회사 내 대시보드 유지 보수 작업과 오프라인 지도 기능 적용 - React, Redux, Component Lifecycle 형식의 기존 작업 된 코드에 맞추어 개발 - 프로젝트 내의 중복되는 코드와 delete dialog modal 컴포넌트의 boilerplate를 만들어 적용 - 인터넷 시설이 열악한 환경에서도 한 번만 인터넷에 접속 되면, leaflet map tiles를 오프라인으로 IDB local storage 에 저장하여, 지도 타일 이미지를 불러와 marker와 tooltip과 줌 기능으로 센서의 위치를 파악할 수 있도록 기능 추가 4. Free Audit UI, UX - 유럽 자체 솔루션 신규 홈페이지의 Free audit UI, UX 기능 담당 - 모바일 사이즈 이용 시 useRef를 적용하여 스크롤 다운과 업 버튼 기능 적용과 스크린 사이즈에 따른 반응형 웹 적용 - 무료로 사용자가 테스트 받고 싶은 기기의 정보 입력 후 회사에서 제공하는 script를 다운로드 후 실행하면 결과를 화면에 표시하여 (성공 실패 등), 사용자가 결과 분석지를 받을 수 있도록 유저의 회원 가입 기능을 유도하는 페이지 작업 5. 창원시 재해 위험지역 스마트 대피 경보시스템 구축 사업 & 사천시 물놀이 안전관리 지능형 사업 대시보드의 UI와 자동 방송 설정 및 방송 오디오 기능 개발 - 대시보드 지도 위에 실시간 방송 생성/중단, 실시간 날씨, 수위, 미세먼지 측정 UI와 플로팅 기능 추가 - 방송 관리 페이지의 방송 오디오 설정과(추가, 삭제) 자동 방송 설정 부분 한글 오디오로 전환하는 기능 구현 6. 기존 대시보드 기능 추가 : Grafana 차트 임베딩 - 모듈에 맞추어 해당 교통 정보 데이터를 iframe 으로 보여주는 작업 임베딩 - 버스 지연과 승객 탑승률, 정거장의 탑승 승객량 예측 및 통계, 시간대별 버스 탑승 스케줄 추천을 담은 반응형 iframe 카드 - 한국어 & 영어 변환 작업 : react-intl - React & Redux component lifecycle - 배포 작업 7. 기존 대시보드 신규 모듈 기능 개발 Tourist analyzer - 그래프와 차트, 테이블로 지역 별 방문객을 여행자, 현지인, 밝혀지지 않음으로 대분류하여 소위 항목으로 국적별 방문객을 react google 차트와 그래프로 시각화 - React & Redux component lifecycle 8. NGI 프로젝트 유지 보수 및 기능 개발 - 상사 퇴사 후, 문서 없는 개발 코드 버그 유지 보수 작업 및 API 기능 추가 - 오픈 소스 Git 버전 관리 - Google analytics 각 페이지 마다 임베딩 작업 9. 김해시 공용 와이파이 관리 사이트 white labelling 개발 및 고양시 대시보드 업데이트 (10월 ~ 12월) - 기존 대시보드의 센서 관리 페이지를 공용 와이파이 데이터와 api로 대체하여 추가/ 삭제/ 수정 기능 - 대시보드 자동 로그인 등 해당 지역에 맞춘 UI 작업 10. 메인 대시보드 Realtime Calibration 기능 개발 - 10초 단위로 센서 별 실시간 RSSI 표 렌더링 기능 모듈 추가 및 개발 - 센서 아이디 별 하위 요소 지역 렌더링 작업 11. Angular & Typescript로 개발된 대시보드 유지 보수 작업 - 기본 Angular 원리와 Typescript 학습 후 필터링 및 렌더링 이슈 유지 보수 12. 국적 분석기 대시보드 데이터 세분화 기능 모듈 개발 - multi dates, multi regions, compact view & ratio view에 따른 동적 필터링 데이터 렌더링 stacked bar chart 모듈 개발

더보기

- 센서로 인구 밀도를 측정하여 실시간 인구 밀집도와 경로를 업데이트하여 정부 시스템에 비상 경보 알림을 전송하는 스마트 로케이션의 대시 보드 프론트엔드 개발자로 투입 - React Redux, 날씨, 지도 관련하여 7개의 오픈 소스 라이브러리 활용 - SI 미국 회사 : 영어(고급) & 한국어(원어민) 가능

더보기

- Figma 부터 시작하여 CSS모듈화, 반응형웹, 자바스크립트 활용하는 과정 9:30 - 4:30 비대면 교육 참여 중 - bitnara999.com 에 매일 배운 것 작성하며 github에 커밋 중 - 면접을 위한 수업 결강 가능

더보기

- Figma 부터 시작하는 웹퍼블리싱 과정 - 반응형을 고려한 HTML & CSS 마크업과 디자인 모듈화 - 자바스크립트 기초 문법 활용 비대면 강의 참여 중에 조기 취업

더보기