# POS 시스템 화면개발 # Sencha ExtJS # 당케 관리자페이지 화면개발 참여 # 모비북 # 관리자 페이지 개발 VueJS # 사용자 앱 부분참여 Flutter

더보기

웹디자이너 및 디자인 계열 취준생 대상으로 자바스크립트&jQuery 수업진행

# 웹서비스 React/NextJS개발,인프라구성및배포 운영중이던 앱서비스의 사용자들이 접근하기 위해서는 앱을 다운받고 서비스를 이용해야한다는 요구사항이 발생하여 심플한 컨텐츠 제공 사이트 및 관리자들의 운영 목적으로 인하여 개발 - React/NextJS 를 사용하여 SEO 최적화 및 OG태그를적용하여 사용자 경험에 기여 - TailwindCSS 를 적용하여 PC, Tablet, Mobile 반응형으로 제작 - Zustand 상태관리를 적용 : 리렌더링 이슈가 발생하여 최적화를 위하여 useShallow 적용 - 확장성과 가용성이 용이하여 AWS의 S3+CloudFront 환경으로 인프라 구성 - NextAuth 를 적용하여 앱서비스와 동일한 통합로그인 기능 제작 (구글,네이버, 카카오) - JWT 토큰만료 후, 갱신을 하기 위한 Interceptor 적용 - 관리자 페이지에 컨텐츠페이지 기능이 필요하여 React-Quill 에디터 반영 - 사용자 데이터를 수집하고 분석하여 서비스 개선 목적으로 GA(Google Analytics) 도입 - Github Action 으로 PR 을 등록하고, Merge 가 발생되면 빌드되어 S3 버킷에 배포되도록 환경구축 - 페이지 속도 테스트 도구를 이용하여 웹페이지 성능 개선 (권장사항, 검색엔진 최적화 100점) - XSS 공격이슈에 대응하기 위하여 dangerouslySetInnerHTML DOMPurify 대체 - 사용기술 : React/NextJS, TailwindCSS, Zustand # API 서버 구조 설계 및 개발 - 초기 개발단계로 개발인원 및 서비스 규모를 고려하여 모놀리틱 아키텍처를 적용 - 기획 및 요구사항을 토대로 DB 설계 및 테이블 구축 - Thumbnailator, Tika 라이브러리를 이용하여 업로드 이미지 약 90%로 압축하여 썸네일 이미지 생성 - 통합 로그인 API 개발 (이메일, 간편로그인 : 구글,네이버,카카오,애플) - FCM Push Notification Sender 구현 (Subscribe 포함) - 쿼리 복잡도에 따른 유연함을 적용하기 위하여 Spring Data JPA, QueryDSL, Mybatis 설정 - JWT Access Token, Refresh Token 설정 - Token 정보 및 인증번호와 같은 만료와 관련된 데이터의 정보를 저장/조회를 위한 목적으로 Redis 적용 - 이미지에서 사용자 얼굴이 노출되면 안되는 이슈로 인하여 얼굴 탐색 정보 API 응답데이터를 활용하여 OpenCV 를 적용하여 안면 모자이크 처리 후 이미지 업로드 되도록 구현 - 사용기술 : JAVA/SpringBoot, Spring Security, Spring Data JPA, QueryDSL, Mybatis # 앱 서비스 Dart/Flutter 구조 설계 및 공통 기능 개발 Flutter 로 개발하여 안드로이드/IOS 앱 서비스 출시 - Flutter와 상태관리 GetX 를 사용하여 구조 설계 - 이메일 및 간편로그인 기능 구현 (구글, 네이버, 카카오, 애플) - Background/Foreground PushNotification 기능 구현 - Header / Bottom Navigator 공통위젯 제작 - 초기 SplashScreen Animation 동작처리를 위하여 Lottie 파일 적용 - Naver Map Plugin에서는 Clustering 기능을 제공하지 않는 이유로 Clustering 기능을 커스텀 제작하여 적용 - Dynamic LInk 를 적용하여 앱 미설치시에는 웹 서비스 페이지로 이동하고 앱 설치시에는 앱 내 페이지로 이동하도록 처리 - 민감설정 파일 env 환경에 설정하도록 적용 - 사용기술 : Dart/Flutter, GetX # DBMS 변경 및 데이터 이관 통계,정산 및 배치 작업 등 대량 데이터 처리가 필요한 단계에 도달하여 Aurora PostgreSQL 로 DBMS 변경 및 기존 데이터 이관 작업 진행 - 기존 컬럼 형태들도 구성되어있던 데이터 중, 검색 기능과 무관한 컬럼들을 JSON Column 으로 묶어 이관작업 진행 - 위와 같은 변경이 발생되어 일부 테이블 재설계 진행 후, 데이터 이관 작업 진행

더보기

# 롯데타워 식당가 프로젝트 프론트엔드 개발 리딩 외부 프로젝트로 롯데타워 내 입점해있는 식당가에 테이블오더를 제공하기 위하여 진행되었던 프로젝트로 기획단계부터 참여하여 계약된 일정안에 성공적으로 마무리가 되어 회사 매출에 기여하였습니다. - 식당용 BackOffice 구축 - 메뉴, 웨이팅, 주문예약, 테이크아웃 등을 관리할 수 있는 관리자 웹 어플리케이션 개발 - 기존 운영되고 있는 프로젝트에 추가로 개발진행이 되어야 하는 관계로 관련 프로젝트 개발경험이 유일하게 있어 1인 100% 개발 → 시스템 특성상, 유사화면이 존재하여 템플릿화하여 각 페이지 개발 → 운영되고 있는 프로젝트 규칙에 맞춰 개발진행이 되어야 하는 관계로 빠르게 구조를 파악하여 개발참여 - 롯데타워 웹 내 식당가 사용자 페이지 개발 - 운영중인 프로젝트에 메뉴를 추가하여 사용자에게 제공할 페이지 → 메뉴/웨이팅/주문/테이크아웃 4가지를 제공하는 페이지로 조건별 로직처리 및 템플릿화하여 페이지 개발 → 식당 내 QR Code 를 인식하여 주문페이지 제공을 위하여 QR Code Scanner 기능 적용 - 웨이팅, 식당용 앱 프론트엔드 개발리딩 → Flutter 기술을 도입하여 구조 설계 및 공통기능 개발 → 일정관리 및 업무배분 - 검수 대응 및 인수인계 → 고객사에서 검수 진행을 하면서 노션페이지에 올라오는 이슈사항을 실시간 대응 → 검수 완료 후, 문서 작성 및 인수인계 진행 # 모비북 프론트엔드 개발 리딩 자동차 명세서를 업로드하면 앱내에서 정비이력을 관리해주고 포인트를 지급해주는 서비스 - 모빌리티 서비스 모비북의 배너, 쿠폰, 명세서, 키워드, 포인트, 푸시알림 등을 관리 할 수 있는 관리자 웹 어플리케이션 개발 - 관리자, 운영자 권한 구분을 통하여 페이지별 기능 및 화면처리 - 모비북 이벤트 페이지를 템플릿화 하여 이벤트 페이지를 매번 생성하는 반복작업을 줄임 - 실명인증 도입(PASS) 이 필요하여 모듈화 작업진행 - 유튜브의 모빌리티 관련 영상을 서비스 페이지에 제공하기 위하여 Youtube 플레이어 커스텀 작업 (Webview + Bridge 활용) - 사용기술 : Dart/Flutter, GetX, Vue, Vuex, html/css, javascript # 모비북 앱 서비스 리팩토링 및 UI 개선 초기에 앱 개발자 없이 개발자들간 학습하며, 결과 위주의 개발이 진행되어 리팩토링 진행 - 각 페이지에 기능구현, widget method 작성등으로 1천 라인이 넘어가는 코드를 역할별로 분기화 하여 View 페이지 평균 100~200 라인 이내로 작성할 수 있도록 구조 개선 진행 - Header, BottomNavigator 등 대부분의 페이지에 들어가는 공통페이지를 위젯화하여 전체 페이지 적용 - Sliver 위젯들을 활용하여 더 많은 정보를 한화면에 제공될 수 있도록 시각화 개선 # 당.케 프로젝트 개발 외부 프로젝트로 당뇨 환우들이 개별적으로 수집한 혈당데이터들을 통합하기 위하여 진행되었던 프로젝트로 담당 개발자의 퇴사로 인계받아 성공적으로 마무리가 되어 회사 매출에 기여하였습니다. - 환우들의 혈당데이터들을 차트로 구현하여 시각화처리 - 인계받은 프로젝트로 빠르게 Codeigniter 구조를 파악 후, 개발시작 - 기존 구현된 기능부분에 오류발생으로 인하여 관련 이슈 해결 및 남은 기능 개발 - 사용기술 : PHP, Codeigniter, html/css, javascript, jQuery, Heroku # 자동차 부품 통합검색 + 정비이력 시스템 개발 - 부품 통합 검색 : 제조사, 차량/차대번호, 부품명/부품코드를 입력을 받아 차량정보 및 부품상세 정보를 조회 할 수 있는 검색시스템 개발 - 정비이력 검색 : 제조사, 차량/차대번호를 입력을 받아 차량정보 및 수리이력을 조회 할 수 있는 시스템 개발 - MVVM 아키텍처 패턴으로 구조 설계 - Desktop/Mobile 2가지 버전으로 개발 하여 사용자에게 제공 - 사용기술 : Sencha ExtJS, html/css # 자동차 부품관리 시스템 개발 리딩 - 사용자 권한, 매입/매출, 부품분류, 사업장, 거래처, 배송, 수발주, 미수금, 부품, 부품단가, 부품회수 등을 관리 할 수 있는 웹 어플리케이션 개발 - MVVM 아키텍처 패턴으로 구조 설계 - 공통 컴포넌트 제작 - 관리자, 유통사, 정비소 권한에 따른 페이지 구분 - Drag&Drop 및 메뉴 비활성화,단축키 기능을 도입하여 사용자의 업무처리 속도를 높이는데 기여 - 거래명세서 페이지 제작 및 별도의 html/css 코드를 작성하여 인쇄용 거래명세서 템플릿 제작하여 페이지 수 관계 없이 일정한 페이지로 명세서 출력하여 사용자에게 제공 - 사용기술 : Sencha ExtJS, html/css, javascript, WebSocket

더보기

# 포인트 충전기능 개발 - 통장으로 금액이 입금되는 것을 확인하고 관리자에서 포인트를 입금해주던 방식에서 PG 모듈을 적용하여 결제시 자동으로 결제 계정에 포인트를 입금해주는 기능 개발 # 고객사별 시스템 커스터마이징 고객사의 요청에 따라 계정별 커스터 마이징을 진행하였고, 성공적으로 마무리 되어 매출 발생에 기여하였습니다. - 업무처리 현황을 한눈에 확인 할 수 있는 전광판 대시보드 기능 개발 - 고객사 별 요구사항에 따른 맞춤기능 추가개발 # 관제 모니터링 시스템 구축 - WebSocket 을 연동하여 실시간 차량의 위치를 지도상으로 확인 할 수 있도록 기능 제작 - 차량별, 화물별로 대상을 나누어서 조회 가능한 기능 제작 - 맵에 출력되어있는 차량/화물 마커를 선택하면 관련 정보들을 제공 - 국내용으로만 제공되었던 NaverMap 과 해외 수출입용을 위하여 GoogleMap 을 추가로 제공 # 스마트로 운송관리 시스템 개발 - 주문,배차,차량,기사,매입매출 등을 관리 할 수 있는 웹 어플리케이션 개발 - 운송사에서 개별로 주문을 등록해야 하는 번거로움이 발생하는 니즈발생으로 엑셀 기본양식을 제공하여 일괄로 주문을 등록할 수 있는 엑셀 업로드 및 다운로드 기능을 개발하여 사용자 업무 편의성 개선 - 사용기술 : Sencha ExtJS, WebSocket, JavaScript, html/css

더보기

- 운송관리시스템(TMS) 기간 : 2015.12 ~2018.08 역할 : 프론트앤드 개발(Sencha ExtJS 6를 이용한 서비스 및 실시간 관제 페이지 구축)

더보기

# 성남시청 사이트 리뉴얼 프로젝트 외부 프로젝트로 기존 운영하고 있던 사이트 리뉴얼 프로젝트로 프로젝트가 성공적으로 마무리가 되어 회사 매출에 기여하였습니다. - 페이스북, 트위터 oAuth 인증 개발 - 네이버 블로그 RSS 연동 - 카카오 스토리 공유기능 개발 - 전자정부 프레임워크 구조 설계 - 사용기술 : JAVA/Spring, Mybatis, html/css, javascript, jQuery # 여의디지털 도서관 프로젝트 외부 프로젝트로 여의도의 신규도서관을 개설하면서 도서관내 키오스크 및 DID 에 들어갈 어플리케이션 및 앱서비스를 제공하기 위한 프로젝트가 성공적으로 마무리가 되어 회사 매출에 기여하였습니다. - DB 설계 및 테이블 생성작업 진행 - 하이브리드 앱으로 개발을 진행하였으며, 네이티브 개발자와 웹뷰와의 통신을 위한 bridge 작업 연동 진행 - 윈도우 기반 세로형 DID에 전자책 미리보기 페이지 개발을 하였으며, 재부팅시, 자동으로 실행 할 수 있도록 배치파일 제작 - 안드로이드 기반 가로형 키오스크에는 e-book 모듈을 연동하여 전자책을 볼 수 있는 어플리케이션 개발 - 사용기술 : JAVA/Spring, Mybatis, html/css, javascript, jQuery # 종로시설관리공단 리뉴얼 프로젝트 외부 프로젝트로 기존 운영하고 있던 사이트 리뉴얼 프로젝트로 DB 설계부터 개발/배포를 담당하였고, 프로젝트가 성공적으로 마무리가 되어 회사 매출에 기여하였습니다. - DB 설계 및 기존 데이터 이관 작업진행 - 시설에서 운영하고 있는 교육과정의 예약 및 결제시스템 제작 - 조회성능 개선을 위한 쿼리 및 인덱스 튜닝작업 진행 - 사용기술 : JAVA/Spring, Mybatis, html/css, javascript, jQuery

더보기

# 현대오토에버 LBS 프로젝트 네이버 지도와 유사한 프로젝트로 개발부분을 담당하였고, 장기간 대규모 인력이 투입되어 진행된 프로젝트 - 지도 웹 서비스 페이지 개발 참여 - 조회성능 개선을 위한 쿼리 튜닝 진행 - 사용기술 : JAVA/Spring, ibatis, Hibernate, html/css, javascript, jQuery # 씨네21 리뉴얼 프로젝트 기존 운영되고 있던 영화포털 사이트 리뉴얼하는 프로젝트로 관리자 BackOffice 부분을 담당하였으며, 프로젝트가 성공적으로 마무리 되어 회사 매출에 기여하였습니다. - 영화컨텐츠, 매입/매출, 통계, 정산 등을 제공하는 웹 어플리케이션 개발 - VOD 인코딩/스트리밍 솔루션을 적용하여 다시보기 플레이어 기능개발 - 사용기술 : JAVA/Spring, ibatis, html/css, javascript, jQuery # 위포트 프로젝트 대기업 직무적성 검사 기출문제를 제공 사이트 리뉴얼하는 프로젝트로 관리자 BackOffice 부분을 담당하였으며, 프로젝트가 성공적으로 마무리 되어 회사 매출에 기여하였습니다. - 대기업별 직무적성 검사 관련 기능들을 제공하는 웹 어플리케이션 개발 - 자동채점 및 검사결과 시스템 개발 - 사용기술 : JAVA/Spring, ibatis, html/css, javascript, jQuery

더보기

# 농협인 커뮤니티 프로젝트 아이폰이 보급이 되면서 농협직원들 간 커뮤니티를 위하여 제작된 프로젝트 - PBX 솔루션과 하이브리드 앱을 연동하여 인터넷 통화가 가능하도록 기능 개발 - 모바일 페이지를 개발하여 하이브리드앱으로 빌드/배포 - 대기업별 직무적성 검사 관련 기능들을 제공하는 웹 어플리케이션 개발 - 사용기술 : JAVA/Struts2, ibatis, html/css, javascript, jQuery, jqTouch # 한국풋살연맹 프로젝트 풋살관련 정보를 제공하는 포털사이트 - 풋살구단별 페이지 공통 템플릿 제작 - 관리자 BackOffice 개발 - 사용기술 : JAVA/Struts2, ibatis, html/css, javascript, jQuery, jqTouch

더보기