웹에서 동작하는 HDFS 탐색기 HTML 예제 소스(AngularJS와 WebHDFS 이용한 빅데이터 프로젝트)

HDFS 탐색기

예전에도 만들었던건데 그 때는 올리지

않고 있다가 이 번에 다시 한 번 만들 일이

있어서 구현한 웹에서 돌아가는 HDFS 탐색기입니다.

하둡을 이용해서 빅데이터 프로젝트를 하고 있는데

HDFS에 저장된 데이터를 윈도우 탐색기와 같은

형태로 볼 수 있는 HDFS 탐색기입니다.

AngularJS를 이용해서 개발하였으며,

웹 브라우저에서 돌아가고 회사 서버에 저장된

HDFS 디렉톹리와 파일을 읽어와서 웹에

테이블 형태로 보여줍니다. 모든 디렉토리와

파일을 JSON 형태로 받아오는데 WebHDFS라는

AngularJS 모듈을 이용했습니다.

밑에 나오는 글자들은 파일을 선택했을 때

해당 파일의 내용을 보여주고 있는 겁니다.

테스트 용이라 디자인은 고려하지 않고,

결과만 얼른 확인할 목적으로 만든 거이니

조잡해 보이는 점은 이해 부탁드리겠습니다.

HTML 소스

테이블 소스입니다. 일반적인

테이블 소스와 크게 다르지는

않지만 요소요소에 AngularJS

를 이용했기 때문에 이게 뭐지?

싶은 게 있을 수도 있습니다.

위의 영상으로 HDFS 웹 탐색기를

소셨으면 아시겠지만 경로를 선택하고

파일과 디렉토리를 구분해서 파일

선택 시에 해당 파일의 내용을 화면에

실시간으로 보여주고 있었고, 또

다른 파일을 선택하면 그 파일의

내용으로 화면이 바로 갱신되었습니다.

탐색기의 가장 핵심적인 기능을

위와 같이 간단하게 구현할 수

있다는 점이 AngularJS의 큰

장점 중에 하나일 겁니다.

물론 위에 view에 해당하는

화면 소스 말고 Controller에

해당하는 javascript 파일도

존재합니다~ 하지만 말 그대로

MVC 중에 C에 해당하는 Controller

부분이므로 디자인이나 UI 쪽은

관여하지 않으며, 위의 영상에서

보이는 여러 기능들에 해당하는

function들이 구현되어 있습니다.

Controller

그 함수 중에 하나를 올렸습니다.

read_file이라는 이름의 function으로

이름 그대로 탐색기에서 선택된 파일의

내용을 읽어오는 함수입니다.

마찬가지로 AngularJS 문법이므로

조금은 익숙하지 않으실 수 있습니다.

하지만 알고 나면 정말 편하다는 건~

NodeJS

AngularJS와 NodeJS 간 HTTP 통신

전에 AngularJS와 NodeJS 예제를

올린 적이 있어서 올려 봅니다.

AngularJS를 사용하다 보면 NodeJS는

필연적으로 한 번은 거쳐가야 하는

내용입니다. NodeJS 기반으로

AngularJS가 돌아가기 때문이기도

하지만 AngularJS 모듈 중에는

NodeJS에서 바로 실행하는 것들도

있기 때문에 AngularJS와 문법 자체가

다른 NodeJS도 조금은 공부를 해야됩니다.

특히 위의 링크된 포스트에도 있고,

캡처한 이미지에도 나오지만

NodeJS와 AngularJS 간 통신을

위해 HTTP 통신을 하는데 정말

방법 모르면 사람 돌아가십니다 ㅠ

위의 예제에서는 NodeJS가 서버로,

AngularJS로 구현한 화면이 클라이언트

역할을 하며, 둘 간에 HTTP 통신을

하고 있습니다. 

이 AngularJS로 인해 자바스크립트로도

서버단을 구현할 수 있다는 점은

엄청난 장점 중의 하나라고 합니다.

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 부트스트랩(bootstrap) 모달(Modal) 창 예제

Modal

제가 작업하고 있는 프로젝트가

아니고 또 AngularJS를 사용하지 않는다고

해도 아래와 같은 모달창은 웹 페이지 작업

에서 많이 사용이 됩니다. 일회성 정보나

설정 값 입력 등의 작업을 화면에서 할 때

현재 화면에 이동이나 큰 변화 없이

별도의 창을 하나 띄워 그 창에서 작업을

완료하면 다시 창을 닫는 형태의 작업에서

이 Modal 창을 참 유용하죠~

AngularJS에서 모달창을 띄울 때

bootstrap 모듈을 이용해서 띄우고

있는데 모달창을 띄워야 되는 페이지의

html 파일에서 아래와 같이 모달 페이지에

해당하는 html의 경로를 ng-include를

이용해서 아래와 같이 입력합니다.

그리고 위에 경로를 입력해준

html의 컨트롤러에서 아래와 같이

해당 모달 창을 띄워 줍니다.

주석으로 처리되어 있는 이유는 위에

방법을 사용하지 않기 때문입니다.

이유는 지금부터 설명하겠습니다.

Modal로 파라미터 보내기

프로젝트를 해오면서 지금까지는 모달창에

보이는 내용은 모달 자체의 controller에서

처리한 값이나 박힌 값들로 구성이 되어

있었습니다. 그런데 이번에는 모달창을

호출했던 페이지에서 특정 값을 모달창으로

넘겨야 하는 경우가 생겼습니다.

일단 위에서 사용한 ng-include는 동일하게

사용합니다. 그리고 모달창을 띄우기 위한

태그에 angularjs에서 제공하는 ng-click으로

아래와 같이 search()라는 함수를

호출하게 했습니다.

위에 상황을 대략 설명 드리자면

컨트롤러에 있는 search 함수를

호출해서 모달창을 띄우려고 하는데

이 모달창으로 특정 값을 보내고

싶은데 그 값이 vm.page + $index

이 값입니다. 단순 정수 값인데

이 값을 알아야 모달창에 작업을

진행할 수 있습니다. 그리고 GET_SOURCE

값은 컨트롤러에서 분기를 위한 값입니다.

아래의 코드를 보시면 이해가 되실 겁니다.

if문에서 condition 값이 GET_SOURCE 인 경우

즉 지금 제가 하고 있는 작업이 저 else if 문에서

실행되는 겁니다. 안에 내용도 설명을 드리겠습니다.

내용은 두 줄이 전부입니다.

첫 번째 라이은 제가 필요로 하던 값(param)을

모달 창의 특정 태그에 set 하는 부분이고,

두 번째 라인은 그 modal창을 띄우는 부분입니다.

첫 번째 라인은 form-group이라는 값을

클래스로 갖는 태그에서 result_index라는

name 값을 가지는 태그에 param 변수에

담긴 값을 set 하라는 내용입니다.

모달 창에서 위에 값이 set 되는 부분은

아래와 같습니다.

그래서 결과는 아래와 같이 나왔습니다.

정말 간단한 숫자 값 하나이지만

저 하나를 얻기 위해 엄청난 시간을

허비했습니다. 몰라서...

방법을 가르켜준 다나양에게

다시 한 번 감사의 인사를...

꾸벅~

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입니다~

[앵귤러JS] 플로우차트(워크플로우) 동적으로 생성하는 AngularJS 예제 소스

FlowChart(WorkFlow)

회사 내부 프로젝트 중 BPMN이라는

것에 UI적인 표현을 위해 워크플로우

라는 것을 이용하려고 하고 있습니다.

워크플로우(WorkFlow) 라는 용어는

저희 회사 내부적으로만 사용하는

용어로 대략적으로 특정 비즈니스나 작업의 

흐름을 표준화된 형태로 파일로 기록하면

그 것을 기반으로 UI 적으로 표현을

해주는 기능을 의미하고 있습니다.

그리고 동적으로 추가/삭제/수정이

화면에서 수행되어야 합니다.

그러다가 연휴 전 날에 하나 재미있는

예제를 찾았습니다. 실행한 예제는

아래와 같습니다. 아! 예제는 카페에

올려 놓았습니다~~!

>카페가기<

대략적으로 설명을 해보겠습니다.

일단 오른쪽에 차트가 그려져 있고,

차트 위에 네 개의 버튼이 있습니다.

그리고 왼쪽에는 뭔가 단어들이

나열되어 있는데 JSON 형태로

작성된 내용입니다.

일단 차트에는 두 개의 노드가 존재하고

있습니다. 이 때 Node1은 A,B,C 라는

Input과 A,B,C라는 아웃풋이 존재하고,

Node2 역시 A,B,C라는 인풋과 아웃풋이

존재합니다. 

(Input, output, node 명은 수정이 가능합니다)

그리고 Node1의 B라는 output이 Node2의

C라는 Input으로 연결되어 있습니다.

위에 내용과 같은 형식으로 표현될 수 있는

작업(Work)이나 비즈니스(business)가

실무에서 존재할 것이며, 위와 같이 길게

말로 설명할 수도 있겠지만 한 눈에

볼 수 있는 즉 가독성이 좋은 형태는

역시 UI 적으로 보여주는 겁니다.

그래서 위에 긴 내용이 그림으로 표현된 것이

오른쪽에 차트 형식으로 그려진 겁니다.

그리고 오른쪽 상단에 버튼 네 개 중

Add Node 라는 버튼을 누르면

위와 같이 새로운 노드를 추가할 수

있고 확인 버튼을 누르면 어플의

재시작 없이 바로 아래처럼

웹 브라우저에 새로운 노트가 추가되며,

마우스 드래그를 통해 원하는 위치로

이동도 가능합니다.

그리고 Add Input Connector,

Add Output Connector 버튼을

통해 아래 이미지처럼 원하는 노드의

input, output 값도 수정이 가능합니다.

input(왼쪽)에 원래 X, Y, Z 라는 

인풋만 존재했는데 1이라는 인풋을

추가해 준 모습니다.

그리고 화면에서 추가된 사항은

바로바로 위와 같이 왼쪽의

JSON에 반영이 됩니다~

생성된 Node3의 3 output을

기존에 존재하던 Node2의

C Output으로 연결해 주었습니다.

실제에서는 output에서 다른 노드의

output으로 가는 케이스가 많을까?

라는 의심이 들지만 단순 예제이니

그냥 넘어가도록 하겠습니다~

여기서 중요한 건 화면에서 동적으로

이러한 내용들을 실시간으로

표현해주고 반영이 바로 된다는

사실이니깐요~

위와 같이 화면에서 적용을 하면

당연히 왼쪽의 JSON에도 반영이

되어야 하겠지요~!?

위에 내용이 JSON 내용 중 노드 간

연결 정보를 표현하고 있는 부분입니다.

출발지(source) 정보와 도착지(dest)

라는 각각의 key에 node명과 connection라는

value를 가지고 있습니다.

AngularJS에서 통신을 하거나 어떤 

값/상태를 표시할 때 JSON을

사용하는데 잘 알지 못할 때는

음.. 뭐 이런 것도 있나보구나 하고

넘어갔었는데 AngularJS에서 자주

사용하다 보니 참 괜찮은 놈이구나란

생각이 듭니다~

이 녀석을 있는 그대로 사용할 순 없고,

좀 더 프로젝트에 맞게 다듬어야 하겠지만

정말 이런 예제가 있다라는 것만으로도

엄청난 시간을 절약한 셈입니다.

AngularJS 짱~ㅎㅎㅎㅎ

AngularJS2.0 사용 위한 환경 설정 및 프로젝트 생성

타입스크립트 설치

npm installl -g typescript

인텔리J 설정

angularjs2.0 프로젝트를 생성하기 위해서는

아래의 방법대로 직접 파일을 생성해주거나

>클릭<

github에 있는 angularjs2.0 프로젝트를

다운 받아서 사용해야 되는 거 같다.

app디렉토리, index.html,

package.json, tsconfig.json,

typings.json 모두 직접 생성

app 디렉토리 밑에도 위와 같이

app.component.js, main.js 직접 생성

npm install 한 후

npm start 하면 화면 뜬다