사용기술은 Next, react, sass입니다. 화면은 크게 4가지이고 메인, 상품목록 상품정보, 분석 화면입니다. 상품목록은 카테고리를 선택하거나 검색했을 때 해당하는 상품을 보여줍니다. 상품 정보는 상품을 선택했을 때 이미지와 가격 표시, 평점과 리뷰 정보, 리뷰 작성 기능 의 정보들을 표시합니다. 분석은 여러 파라미터를 선택하여 날짜별로 키워드에 대한 검색어 추이를 그래프로 시각화하여 보여줍니다. 그래프는 상대 값으로, 최댓값 100을 기준으로 어떤 상품을 많이 검색했는지 비교할 때 유용합니다.

실시간 디지털 트윈을 구현한 프로젝트입니다. 기술스택은 react, js, mapbox, three.js를 이용했습니다. 버스, 정류장, cctv, 건물, 차량, 사람등의 데이터를 지도에 3D 객체로 시각화해서 보여줍니다. 호버/클릭시 툴팁이나 팝업창을 띄워 관련 정보를 보여주고 차량은 이동처리 기능이 있습니다. 건물 클릭 시 층 정보가 있을 경우 인도어로 진입할 수 있으며 cctv와 사람 정보를 확인할 수 있습니다. 사람, 차량 데이터를 소켓 통신하여 받아왔습니다. 실시간으로 소켓의 위치 변화를 계산하여 이동 처리했습니다.

실제 엔지니어들이 작업할 네트워크 장비 선들을 ui 상에서 변경할 수 있는 기능입니다. 기능으로는 재배치, 추가, 검증기능을 개발했습니다. 실제 네트워크 엔지니어들이 작업을 하기 전에 미리 UI상에서 포트재배치를 할 수 있는 기능입니다. ui는 전,후 영역으로 나뉘어져있고 drag&drop으로 전에서 후 영역으로 포트를 옮길 수 있습니다. 포트를 옮길 때 검증기능이 포함되어 있고 작업대기 및 작업완료 영역이 있습니다. 작업 대기는 옮길 때 임시 공간이고, 작업 완료는 재배치된 포트 리스트들을 보여줍니다.

개인 프로젝트로 게시판을 구현했습니다. 이 프로젝트의 목표는 새로운 기술을 사용해보는 것이었습니다. 백엔드는 springboot 와 jpa 를 사용했고 프론트엔드는 react.js 로 세 달 동안 구현했습니다. css 로는 styled-components 를 사용했습니다. 게시판 기능은 로그인, 파일 업로드, 다운로드, 댓글, 조회, 추천, 비추천 기능이 있습니다. 특히 일반 게시판과 차별점은 글쓰기란에 이미지도 올리면서 함께 글쓰기를 할 수 있는 기능입니다.

통신데이터를 감시, 통계 및 분석하는 웹 사이트를 개발했습니다. 감시 기능은 실시간으로 통신데이터를 보여주는 기능입니다. 조회를 위해 필요한 컬럼을 선택해서 조회합니다. 이 때 컬럼이 트리구조로 되어있는데 트리구조로 체크박스를 선택하고 검색할 수 있는 기능을 개발했습니다. 분석기능에서는 UI에서 쿼리를 만들어서 자체 DB로 보낼 수 있습니다. ui에서 쿼리를 만들 수 있는 기능을 개발하여 쿼리를 원하는 대로 조합할 수 있도록 했습니다. 이렇게 만들어진 쿼리는 자체 db로 쿼리를 전송하여 원하는 값을 가져올 수 있습니다.