Enjoy Life~~

회사내에 흩어진 정보들(체계적으로 정리할 정도로 중요하진 않지만, 회사생활에 가끔씩 찾게되는 사소한 정보들)을 한 곳에 모아서 볼 수 있게 해야겠다는 생각으로 만들어봐야겠다는 생각을 하고 만들게 됬다. 

내 첫번째 코딩 과제로서, 충분한 연습상대였다. 

아래와 같이 디자인적인 요소도 좀 들어갔고, 커서가 올라가면 본문이 색깔도 변하게 했다. 

여기서 관건은 검색 기능. 

앞선 1차 버젼에서는 findIndex메소드(메소드? 그냥 함수라고 생각해버리자)로 입력값과 일치하는 배열의 위치를 찾고, 그 배열의 값을 보여주는 식으로 검색 흉내를 냈다. 

이번에는 JQuery라는 천국을 알게됬다. 

jQuery(제이쿼리)는 자바스크립트 라이브러리다. ......... jQuery는 오늘날 가장 인기있는 자바스크립트 라이브러리 중 하나이다.  (출처 : 위키백과)

간단히말해, 자바스크립트에서 사용할 수 있는 유용한 명령어의 덩어리이다. 필요한 기능이 있으면, 불러다가 쓰면 되는거다. 물론 그 부르는 방법도 인터넷의 선지자들이 알려주는대로 하면 된다.

그 중에서 filter 기능을 발견했다. 

https://demos.jquerymobile.com/1.4.5/filterable/#&ui-state=dialog

여러가지 filter방법중에서 내가 선택한 건, Filter Anything. 

데이터에서 입력 내용으로 필터를 거는건데, 결국 검색하는 것과 동일한 효과다.

소스를 보면,

id로 'divOfPs-input을 지정하는 것만으로 필터 기능을 사용할 수 있고, 

그 아래의 <div></div> 사이의 내용에서 필터 걸리는 <p>의 내용만 보여진다.  원더풀!!

이렇게하고보니, 너무 쉽게 목적했던 기능이 구현됬다.

이대로는 심심해서 CSS에 두 가지 데코레이션을 넣었다. 

위와 같은 간단한 CSS 효과만으로도 결과물의 격이 올라간다. 

그리고, 이후에 app으로도 만들 수 있게, 휴대폰의 해상도에서도 볼 수 있게 했다.

이후에 웹페이지나 app에서 회사내의 자잘한 정보들을 한 곳에서 바로바로 검색할 수 있게되면, 그 정보를 찾는데에 걸리는 시간과 수고를 아낄 수 있을 것이다. 

회사내에서만 쓰는 용어, 업무상 자주 필요한 사이트, 업무 문서 양식, 조직정보, 복지정보 등등.... 

-------------------------------------------------------------------------------------------------------------

내 아이디어를 현실화하는 데에는 내가 최고의 프로그래머가 될 필요는 없다.

훌륭한 분들이 만들어놓은 것을 잘 구성하기만 하면 된다.

Webview app을 제작하기로 했으니, 이제 HTML,CSS,Javascript만 공부하면 된다.

app으로 구현하려는 idea는 있으나, 그건 한참 배움이 필요한 내용이겠고,

첫번째 app으로 '회사내 사전'을 만들기로 했다.
회사의 모든 정보를 한 곳에 모아놓고 그걸 검색해서 보여줄 수 있는 기능이다.

실제로 회사 내부의 수많은 정보들이 곳곳에 흩어져있어서 참고가 안되거나, 찾는데에 많은 시간을 소비하는 경우가 많다. 휴가,복지와 같은 규정들, 문서 양식, 업무 담당자 목록 등 관련은 없지만 그런 내용들을 한 곳에서 참고할 수 있으면 좋을 것이다.
물론 대기업들은 '챗봇'이라는 인공지능까지 결합된 서비스를 사용하지만, 작은 기업에 그럴 필요까지 있겠나. 그래서 내가 만들어보기로 했다.

현대모비스, AI 챗봇 도입 ‘1000만 사내 정보’ 업무 활용

기능은 간단하다.  찾을 정보들의 리스트를 만들고, 그 안에서 제목을 검색하고 그에 맞는 내용들을 보여주면 된다. 즉 검색 기능만 javascript로 구현하면 되겠다.

첫번째 version의 모습.

간단한 기능이지만, 코딩 초보자에게는 절대 쉽지 않다.

] 첫번째 난관 : html input창에 입력한 값을 어떻게 javascript로 보내고, 그 결과를 어떻게 html에 다시 표시할까?

] 두번째 난관 : 검색 기능을 어떻게 구현할까?

아래에 하나씩 설명하겠다.

  html에 검색창을 넣고, enter키(keyCode 13번)가 눌리거나 검색버튼이 클릭되면 javascript의 search()라는 함수를 실행한다.

javascrit에 dic이라는 배열함수를 설정하고, 그 배열 안에 검색할 항목(name)과 그 내용(desc)들을 다 입력했다. 

검색할 데이터들을 javascript 코딩 내용에 다 때려넣었다는 말이다. 엄~청 무식한 방법이다.  초보때는 이런 것도 과정이다. 

여기서 이해가 어려운 부분은, index라는 변수에 들어가는게, 1개 값이 들어가는게 아니라(사실, 이게 변수의 상식적인 의미잖아!) ,

배열의 1개 항목이 통째로 들어간다. (이게 자바스크립트의 '객체'님이라고 한다)

index변수의 내용이, "name : 어쩌고, catego : 저쩌고, desc1: 이것저것" 이렇게 다 들어간다.

그것에서 output1,2,3에 각각의 항목을 나눠서 넣어주는 것이다.

이제 html에 script의 내용들이 표시될 곳에 id를 입력해준다. 

이렇게 완성이다. 

아래와 같이 디자인이라고는 찾아볼 수 없게 결과물을 만들어냈다. 

뭐든지 해놓고나면 간단하지만, 모를때는 깜깜하다. 

더 효율적인 방법으로 version up을 하게된다. 다음 포스트에...