개요

다른 팀에서 작업하던 MES 개발을 하던 중 인력이 부족하여 인력 추가 요청이 들어와, 추가 투입이 되었다. 다른 팀에서 요청을 한 내용은 프린터기에서 바코드 출력, 바코드 리더기를 통한 입력 라우팅, 기존 시스템에서 멀티 페이지 시스템 구현이였다. 바코드 출력은 프린트 API를 통하여 간단하게 구현 할 수 있었다. 그리고 바코드 리더기는 키보드 형식으로 인식을 하기 때문에 웹 페이지에서 키보드 후킹을 통하여 쉽게 구현 할 수 있었다. [관련 자료는 이와 같다.] 바코드 입력 및 출력 시스템을 라이브러리화 하여 간편하게 쓸 수 있도록 하였다. 그 중 가장 어려운 작업은 “기존 시스템”에서 “새로운 기능”을 추가하는 것 인 멀티 페이지 시스템 구현 이였다. 추가 임금이 적었기 때문에 적은 시간안에 최대의 효율을 낼 수 있는 방법을 고안해야 했다. 그래서 생각 해 낸것이 iframe을 이용하여 멀티 페이지를 구현 하였다.

기존 시스템 및 통합 과정

멀티 페이지란 개념은 초기설계 단계 부터 존재 하지 않던 내용이였다. 그렇다 보니 멀티 페이지 구현을 하기 위한 구현이 되어 있지 않아 어려움이 있었다. 그래서 기존 페이지의 라우팅을 iframe 형식으로 변경한 뒤 상단에 버튼을 만들어 구현하였다. 구현 방식을 최대한 간단하게 만들어야 했다. 구현 방식으로는 아래와 같다.

1. Menu 버튼을 누르면 넘어가던 라우팅을 iframe 생성 하는 코드로 변경함.
2. iframe 생성과 동시에 상단에 버튼을 추가함.
3. 상단에 있는 버튼을 클릭시, 해당 iframe을 최 상단으로 옮김 (간단하게 모두 hidden 한 뒤, 특정 인덱스만 visible 하는 방식)

이러한 방식을 채택한 덕에 엄청 간편하게 구현 할 수 있었으며, 기존 시스템을 쉽게 통합 할 수 있었다.

결과

결과물은 아래와 같다.

마무리

히히 응가뿡뿡 나이쓰띠 >< 외주나, 기업 연계 연구과제는 최대한 심플이 쵝오!