포트폴리오

2019-02-10

1. 공통 UI 컴포넌트

1) 컴포넌트 가이드 사이드 제공 : 예제 , 속성 제공

▲ 컴포넌트 가이드 ( 예제, 속성 )

2) 컴포넌트 개발 및 안정화, 고도화를 위한 유지보수
-input 관련 컴포넌트: 자동완성 컴포넌트(debouncing을 사용한 검색어 처리), select 컴포넌트
-provider 컴포넌트: app.js 상단에 제공(다이얼로그, 액션바)
-interaction 컴포넌트: 알람 컴포넌트(css transition 속성을 통한 애니메이션 처리, immutable 라이브러리를 사용한 배열 처리)
-virtualbox 컴포넌트: 스크롤 위치를 계산하여 dom에 렌더링 처리
-그 외 12건 (subheader, pagenation, chatbot, button, radio button, checkbox, toggle)
-회계 페이지 특화 포커싱 처리 컴포넌트 개발 (자동완성 컴포넌트, input, swtich 컴포넌트)

▲ Input 관련 컴포넌트 (select 컴포넌트, 자동완성 컴포넌트)

▲ Provider 컴포넌트 (다이얼로그, 액션바 컴포넌트)

▲ 인터렉션 컴포넌트 (알람, 팝오버 컴포넌트)

▲ virtutalBox 컴포넌트

▲ subHeader 컴포넌트

▲ Switch 관련 컴포넌트(북마크, 체크박스, 라디오, 토글)

▲ 회계 페이지 특화 포커싱 처리 컴포넌트 개발

3) 차트 컴포넌트

- 타임라인 컴포넌트 - timeline.js를 커스텀(스타일, 이벤트 속성)하여 타임라인 컴포넌트 구현
- 트리맵 컴포넌트 - d3라이브러리를 커스텀(툴팁기능추가, 길이 및 색상 속성) 하여 treemap차트 구현

▲ 타임라인 컴포넌트

▲ 트리맵 컴포넌트


2. API 모니터링

실시간 데이터를 반영한 API 모니터링툴
실시간으로 움직이는 동적 그래프 제공
시간별 조회 및 드래그 기능을 통한 구간 검색 기능
각종 외부 라이브러리 차트를 커스텀하여 구현(echart, d3, rickshaw)

▲ 메인화면 ( echart 라이브러리 사용 및 실시간 데이터 배열 처리)

▲ 각 서비스별 세부 화면 ( rickshaw 차트 소스 커스텀 및 드래그 기능 추가, 스타일 커스텀 )

▲ 그 외 세부페이지 구현 (d3 라이브러리를 사용한 세부페이지 구현)


3. 화상대화

webRTC 를 사용한 화상대화 기능 구현
채팅, 문서 공유 및 화면공유, 문서뷰어 등 기능
참여한 부분: 사용자간 통신 및 문서뷰어 기능

▲ 사용자간 통신

▲ 문서 뷰어 기능


4. 파일뷰어

문서 뷰어 어플리케이션 구현
다양한 보기모드(한페이지, 여러 페이지, 페이지 맞춤기능) 및 확대,축소,프린트 기능
파일간 이동 기능 (키보드 좌우 나 좌우 네비게이션을 통한 탐색가능)
pdfjs라이브러리를 사용하여 PDF 변환 및 그 외 파일은 한컴 서버로 변환
virtual scroll 기능 구현을 통한 페이징 처리

▲ 파일 뷰어


6. 웹 쇼핑몰 구현

자바기반으로 쇼핑몰 구현 (웹/앱)
사용자의 개성에 맞게 코디기능 (드래그앤 드랍), 날씨에 따른 코디 추천(알고리즘), SNS 기능(앱)
참여한 부분: 프로젝트 설계 및 서버구축(스프링 90%, DB연동 100%)

▲ 코디하기 기능