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 예제를
올린 적이 있어서 올려 봅니다.
AngularJS를 사용하다 보면 NodeJS는
필연적으로 한 번은 거쳐가야 하는
내용입니다. NodeJS 기반으로
AngularJS가 돌아가기 때문이기도
하지만 AngularJS 모듈 중에는
NodeJS에서 바로 실행하는 것들도
있기 때문에 AngularJS와 문법 자체가
다른 NodeJS도 조금은 공부를 해야됩니다.
특히 위의 링크된 포스트에도 있고,
캡처한 이미지에도 나오지만
NodeJS와 AngularJS 간 통신을
위해 HTTP 통신을 하는데 정말
방법 모르면 사람 돌아가십니다 ㅠ
위의 예제에서는 NodeJS가 서버로,
AngularJS로 구현한 화면이 클라이언트
역할을 하며, 둘 간에 HTTP 통신을
하고 있습니다.
이 AngularJS로 인해 자바스크립트로도
서버단을 구현할 수 있다는 점은
엄청난 장점 중의 하나라고 합니다.
No comments:
Post a Comment