AngularJS에서 ElasticSearch 데이터 조회(Select)하는 예제

AngularJS

회사에 오면 매일매일 앵귤러JS라는 놈과

싸우고 있습니다 ㅎ 네이버에서는 필요한

예제는 거의 찾을 수 없지만 구글에서는

넘쳐나고 있기 때문에 엄청난 구글링이

수반되는 작업이지요 ㅎ 요즘에는 저장된

Data를 읽어 와서 웹 화면에 뿌려주는

작업을 하고 있는데 서버나 DB에

저장된 data가 아니라 엘라스틱서치라는

놈에 저장된 data를 읽어와서 화면에

뿌려주어야 합니다~

ElasticSearch

해외에서는 AngularJS가 국내보다

훨씬 활성화 되어 있다고 느끼는게

아직 대중화 되지 않고 검증 중인

단계에 프레임워크나 오픈소스들도

어지간하면 다 AngularJS와 연동되는

예제는 있다는 것을 보면서 느낍니다.

아래 링크된 글은 제가 예전에 작성한

AngularJS와 ElasticSearch 관련

포스팅입니다~ 참고해 보세요

AngularJS에서 ElasticSearch 사용하기

앵귤러JS와 엘라스틱서치 연동 및 예제

계속 이야기를 하자면 naver에서 자바나

안드로이드를 검색하면 엄청나게 많은

자료가 조회되는 것처럼 구글에서

AngularJS나 ElasticSearch를 검색하면

정말 많은 결과들이 검색됩니다.

현재 대중화 되어 있고, 여기저기서 널리

사용되는 기술에 대해서는 네이버만

사용해도 원하는 결과를 쉽게 얻을 수 있지만

(Java나 Android 같은....)

제가 지금 다루고 있는 AngularJS나

ElasticSearch와 같이 아직 국내에서

널리 사용되고 있지 않은 기술에 대해서는

네이버에 자료가 거의 없다고 봐도

무방합니다 ㅠㅠㅠㅠ

말이 좀 샜네요 ㅎㅎ

여튼 AngularJS와 ElasticSearch 연동을 통해

data를 조회해온 화면부터 올려보겠습니다.

 

화면만 좋고 보면 크게 대단할 것도

없는 내용입니다 ㅎ 위에 검색된

데이터에 대한 설명을 하도록

하겠습니다. 일단 조회된 데이터는

우리나라 포탈에 뜬 최신 뉴스기사를

수집해온 결과들입니다. 제목과

기사내용, 기사작성일, 해당 기사의

URL 주소, 기사 제목, 카테고리 등의

내용들이 있겠지요~ 실제 위에 

화면에서도 보실 수 있습니다. 

 

그런데 해당 data의 총 크기는 위에서

보시는 것처럼 20g가 넘습니다.

그럴 수 밖에요 하루동안에만 나오는

뉴스만 해도 얼마나 많은데요 ㅎㅎ

여튼 저렇게 많은 data를 저장하는

건 기본이고 특정 조건에 대한

검색/분석 등이 가능해야 되는

상황입니다

(왜냐하면 빅데이터 프로젝트라서)

그러다 보니 기존에 널리 사용되고 있는

RDB(오라클, MySQL, MsSQL 등)로는

도저히 성능이 나올 수가 없습니다.

그래서 나온 대안이 저희는 엘라스틱서치

입니다~

일단 엘라스틱서치는 저장된 data의

대해서 자체적으로 Indexing 기능을

처리해 줍니다. 여기서 Indexing이란

저장된 Data에 대해 ElasticSearch

고유에 태깅이나 기법을 통해 사전에

미리 Data에 대한 정보를 가지고

있는 겁니다. 이렇게 함으로써

저와 같은 사용자 입장에서는 엄청나게

큰 Data에 대해서도 빠른 속도로

데이터의 조회 및 질의가 가능합니다.

물론 그냥 가져다 사용한다고

무조건 성능이 좋은 건 아니지만

방법을 찾고, 튜닝을 해가면 기존에

RDB에서는 나올 수 없는 퍼포먼스를

ElasticSearch에서 끌어낼 수 있습니다.

시작하세요! 엘라스틱서치 라는 책과

ElasticSearch 홈페이지에 나와 있는

설명을 기반으로 열심히 원하는 기능들을

구현하고 있습니다. 다양한 질의(오라클로

따지면 쿼리의 where절)를 AngularJS에서

날려 ElasticSearch에서 원하는 data를

가지고 와야 되는데 이 질의를 날리는

방법을 위주로 열심히 구글링 & 스터디

중입니다 ㅎㅎ 기본적인건 됐고, 이제

AngularJS로 멋지게 화면을 구성도

해야 됩니다~

AngularJS에서 ElasticSearch 사용하기(데이터 검색 및 저장)

ElasticSearch

현재 참여하고 있는 빅데이터 프로젝트에서

수집된 data를 DB에 저장하지 않고

엘라스틱서치에 저장하고 있습니다.

수집된 data를 elasticsearch에 저장하면

어느 정도 선까지는 자동으로 indexing을

해주고 그럼으로 인해 검색에도 유리하다고

합니다. 그리고 무엇보다 좋았던 건 저희가

사용하고 있던 다른 오픈소스보다 설치나

실행이 쉬웠습니다 ㅎㅎㅎ

하지만 역시 문제는 사용 방법을 알아야

되고, 최종적으로는 ElasticSearch에서

제공되는 기능을 AngularJS에서 사용해서

화면에 결과로 보여줘야 한다는 점입니다.

위에 책을 보면서 study를 하고 있는데

어제 ElasticSearch에 data가 저장되는

구조에 대해 이해하는데 결정적인 역할을

해서 올려 봤습니다 ㅎㅎ 필요한 내용 딱

두 장만 읽은게 다입니다 ㅎㅎ

앞으로도 많이 참고해야겠지요~

그리고 구글링을 통해 찾은 AngularJS

예제를 통해 웹 화면에서 ElasticSearch에

붙어 data를 저장하고 검색하는 예제도

수행을 해봤습니다~ ElasticSearch

명령어 체계를 좀 더 이해할 필요가

있을 거 같습니다.

AngularJS

앵귤러JS에서 ElasticSearch를

호출할 때 사용하는 함수입니다.

검색과 data 저장하는 함수입니다.

data를 엘라스틱서치에 저장하는

함수입니다. 일단 하드코딩으로

했지만 최종적으로 웹 화면에서

해당 값들을 입력 받을 겁니다.

그리고 위에 저장된 값을 조회하는

함수는 아래에 있습니다.

먼저 위에 예제는 EalsticSearch에

저장된 data를 조회할 때 특정 조건을

주는 예제입니다. ElasticSearch에

데이터가 저장되면 index, type, id의

값들이 생성되는데 사용자가 직접

입력할 수도 있고, 저장할 때 입력해 주지

않으면 엘라스틱서치에서 자동으로

생성을 해줍니다. 그럼 이 때 생성된

값들로 data를 조회하려고 할 때

AngularJS에서는 위의 주석처리된

내용들처럼 index를 조회할 때는

index : 조회하려는 index값

​타입으로 조회를 하시려면

type : 조회하려는 type 값

형식으로 지정을 해줘야 됩니다.

그리고 실질적인 data는 _source

키 밑에 저장이 되는데 이 값으로

data 조회를 하기 위해서는

q: 검색어

형태로 주면 _source 키 밑에

data를 대상으로 검색이 됩니다.

그리고 최종 결관는 위에 소스

에서 정상처리 기준으로 

resp.hits.hits 로 접근하면 됩니다~

위에 화면이 elasticsearch에

저장된 data를 조회한 결과입니다.

indexrk 값이 2014-12-31 인 값이

처음에 저장한 data입니다~

[빅데이터프로젝트] AngularJS + ElasticSearch 연동 방법 및 검색 예제

빅데이터

여전히 빅데이터 프로젝트에 참여 중입니다.

그리고 여전히 이 기술, 저 기술 설치해 보고

구동해 보고, 예제 실행해 보고 있습니다.

하지만 이제 시간이 지나감에 따라 결과도

내야 되는 시점이 오고 있다는 걸 느낍니다

점점 압박이 들어 오네요 ㅠㅠㅠㅠ

요 며칠 계속 붙자고 있었던

ElasticSearch

형태소 분석기를 조사해 보니 수집, 인덱싱,

분석 등의 단계를 거치는데 각각의 단계를

어떻게 처리할 것인가 영어이냐 한글이냐에

따라 다양한 방법들이 존재했습니다.

그런데 형태소 분석을 함에 있어서

한글을 분석해 주는 api는 영어에

비해 맞지 않았고, 정확도도 떨어지는

거 같았습니다. 그래도 다행히

방법이 전혀 없지는 않았습니다.

카이스트에서 만든 java/python/R

버전에의 형태소 분석기가 일단

1차 후보로 뽑혔었는데 하둡을 통한

분산처리와 인덱싱 작업을 고려하면서

ElasticSearch 쪽으로 많이 기운 상태입니다.

ElasticSearch 자체에서 인덱싱을 해주고

검색 기능까지 제공을 해주더라구요

그리고 무엇보다 ElasticSearch 전용

한글 형태소 분석기도 있었구요~

무엇보다 현재 R언어는 되도록 사용하지

않으려고 하고 있고, 현재까지 정해진

아키텍처에서도 ElasticSearch가

잘 맞는 걸로 생각되고 있습니다.

엘라스틱서치 다운

위에 링크된 사이트로 가면 엘라스틱서치를

내려 받을 수 있습니다. 압축 풀고 bin 디렉토리에

있는 ealasticsearch.bat를 실행하니 윈도우에서도

바로 실행 됐습니다!!!! 리눅스에서도 tar 압축을 푸니

리눅스에서도 한 번에 정상적으로 실행됐습니다!!!

이렇게 고마울 수가 ㅠㅠㅠㅠ

하지만 전 한글 형태소 분석기인 은전한닢을

엘라스틱서치에 연동해야 되서 좀 더 추가적인

작업을 했습니다.

링크1

링크2

참고한 사이트 두 개 입니다.

위의 내용대로 설치한 후

bin 디렉토리에 가서

./elasticsearch -Djava.library.path=/usr/local/lib

위에 명령어를 쳐주면 정상 구동 됩니다~

정상적으로 구동되면 위와 같은 내용이 뜨고,

엘라스틱서치 서버가 하나 뜨는데 9200 포트를

사용합니다! 9300 포트도 있는 거 같은데

정확한 기능은 아직은 모르겠습니다 ㅠㅠ

참고로 전 elasticsearch 1.6 버전을 설치했습니다.

(현재 최신 버전은 2.x.x)

이유는 한글형태소분석기 은전한닢이 엘라스틱서치

1.6에서 돌아가는 거 같더라구요...

굳이 은전한닢을 설치하지 않아도 엘라스틱서치

내부적인 명령어로 한글 저장이나 검색은 되지만

여러 제약사항이 있어서 깔끔하게 은전한닢

설치했습니다~

Angular JS

리눅스 터미널 상에서 엘라스틱서치 명령어가

정상적으로 돌아가는 것까지 확인은 했지만

저희는 이 기능을 웹 화면에서 서버에 호출해야

됩니다~! 그리고 더 문제는 이 화면 개발 작업을

기존에는 사용하지 않던 AngularJS라는 놈을

사용해서 개발해야 됩니다.

그래서 요즘 좀 공부하고 있는 녀석이죠...

저는 자바스크립트를 이용해서 개발해 본적이

없어서 이 angularJS라는 놈의 장점을

확연하게 느낄 순 없지만 JavaScript 를 사용했던

분한테 물어보니 이 AngularJS라는 놈이 좀

신기한 놈이긴 한 거 같습니다 ㅎㅎㅎ

AngularJS를 공부해 보셨던 분이라면 아시겠지만

scope, controller, 지시자, directives, module 등

새로운 개념들이 많이 나옵니다.

위에 사진이 현재 저희의 AngularJS

프로젝트의 구성입니다.

확실하게 MVC 패턴으로 나뉘어 있고,

HTML5과 JavaScript 언어를 사용하고

이클립스가 아닌 인텔리J라는 IDE를

사용하고 있습니다.

완전히 저희 회사에서 저희 프로젝트만

이단아가 되어 가고 있습니다 ㅎㅎㅎ

하지만 분명히 신기하고 배울 가치가

있는 녀석입니다!!!!

확실히 기술이란 건 대단한 거 같습니다!

어찌 되었든 위에 캡처한 사진이 서버에 떠있는

ElasticSearch 서버와 웹이 통신해서

얻어낸 결과를 화면에 출력한 결과입니다.

이틀 동안 삽질해서 얻은 결과입니다 ㅠㅠ

전체적으로 두 개의 단락이 있는데 

첫 번째 단락은 ElasticSearch에

저장되어 있는 내용을 출력한 결과이고

마지막 한 줄은 웹과 엘라스틱서치 서버가

최초 연결 시 통신한 결과입니다~~~

이제 과제는 은전한닢의 결과도 얻어오는

겁니다... 그리고 화면에서 데이터를 저장하고

더 나아가서는 HDFS에 저장된 내용을 읽어와

동일한 작업을 수행한 후 화면에 결과를

보여주는 겁니다... 정말 끝이 없네요 ㅎㅎ

그러다 보니 벌써 이번 주도 끝이 나고

있습니다 ㅎㄷㄷㄷㄷㄷ

디테일한 내용은 다음에 시간이 되면

올려 보도록 하겠습니다!

일단 퇴근 ㅋㅋㅋㅋㅋ