【Node-RED #①】노드 레드의 시작! / Start of Node-RED! ①

지난 시간에는  노드레드를 라즈베리파이 또는 윈도에 설치하는 것에 대해 다루었습니다.  이와 관련하여서는 아래 게시물을 참고해 주세요.
▶【Node-RED #1】라즈베리파이(Raspberry pi)에 Node-RED 설치하기

 이번 시간부터는 본격적으로 노드레드에 대해 알아보고 활용해 보도록 시작해 보겠습니다. 

1. Node-RED의 개념

 노드레드는 플로우(Flow) 즉, 흐름 기반의 프로그래밍으로써 시각적 표현에 매우 적합하고, 복잡하고 어려운 프로그래밍 사용을 자제하고, 사용자가 보다 쉽게 접근할 수 있도록 설계된 모듈입니다.   노드레드에서의 각 노드는 마치 블록코딩의 대명사인 스크래치의 블록과 유사한 개념으로  노드레드는 다수의 노드를 이용하여 각 노드별 원하는 요구사항에 맞는 플로우를 만들 수 있으며 이를 아두이노, 라즈베리파이 및 각종 센서, 디스플레이 등 제어모듈과 같은 하드웨어와 연결하여 시각적으로 보여주거나 제어가능하도록 ioT 시스템을 쉽게 구축할 수 있는 특징이 있습니다. 

아래는 노드레드 Flow 구성 및 편집 예시입니다.

이미지 출처 : nodered.org

아래는 노드레드 UI 예시입니다.

이미지 출처 : hackaday.com

아래는 노드레드 UI 예시입니다.

이미지 출처 : Yaser Ali Husen

아래는 노드레드 UI 예시입니다.

이미지 출처 : Yaser Ali Husen

 

기본 화면 구성은 아래 이미지와 같습니다.

① 노드레드 편집기 화면 구성

 

노드레드는 크게 4개의 영역으로 구성되는데요,,

→ ① 상단(Header) 영역에는 배포(Deploy) 메뉴와(Deploy) 팔레트관리와 같은 설정 메뉴가 배치되어 있습니다.

→ ② 팔레트(Palette) 영역은 각종 기능 구현해 주는 노드 블록들로 배치되어 있습니다.

→ ③ 측면(Sidebar) 영역은 노드에 대한“정보/도움말/디버그/노드설정”에 대한 메뉴로 구성되어 있습니다.

→ ④ 작업공간(Workspace) 영역은 노드들을 배치하고 이어주며 함수 노드에 프로그래밍을 하는 영역입니다.

 

① 상단(Header) 영역에 있는 배포(Deploy) 메뉴는 작업공간영역에서 완성된 노드들의 플로우를 실행시키는 역할을 합니다. 만약 UI(User Interface)가 있는 플로우라면 “http://localhost:1880/ui” 주소를 통해서 UI를 확인하거나 실행할 수 있습니다. 그리고 배포하기 옆에 세줄로 표시된 부분을 클릭하면, 라이브러리 추가 등 팔레트관리와 같은 설정 메뉴가 있는데, 제세한 내용은 이후 계속 설명이 됩니다.

② 팔레트(Palette) 영역은 작업영역 좌측에 있으며, 기본적으로 6개 그룹(카테고리)의 메뉴로 구성되어 있습니다. 여기에서 필요한 노드 블록을 선택하여 작업영역으로 끌어다 놓는 식으로 작업합니다. 기본 그룹 외에 추가적으로 팔레트관리 메뉴에 있는 라이브러리 추가를 통해 대시보드(dashboard)나 라즈베리파이(Raspberry Pi) 노드 그룹 같은 것들을 추가해서 사용할 수 있습니다.  
대략 2,700개 이상의 모듈을 추가 설치가 가능하며, 사용자 정의로 직접 모듈을 등록하고 관리할 수 있습니다.

 

③ 측면(Sidebar) 영역은 노드 편집기 내의 유용한 도구를 제공하는 패널로 구성되어 있는데요, Information탭/Help탭/Debug탭/Configuration nodes탭/Context Data탭/Dashboard탭 , 6개의 탭으로 구성되어 있습니다.

주로 Debug탭을 많이 활용하게 되는데요, 작업공간에서 사용한 디버그 노드의 출력을 확인할 수 있습니다. 측면영역은 작업영역 확보를 위해 숨김/보이기 처리할 수 있으며, (Ctrl+Space) 단축키도 할당되어 있습니다. 가령,  "Hello world!"와 같은 

 

④ 작업공간(Workspace) 영역은 필요한 노드 블록을 끌어다 놓고 블록들 사이의 플로우(Flow)를 연결하며, 함수 노드의 경우 Javascript로 프로그래밍을 추가해 넣을 수 있는 작업 공간입니다. 노드들을 클릭하면 세부 설정을 변경하거나 코드를 입력할 수 있는 메뉴가 표시됩니다.  노드레드에서 노드는 플로우를 작성하는 기본 구성단위 요소입니다. 

작업공간 상단 우측에 보면 + 표시와 서브메뉴가 보이는데요,  이를 클릭하면 플로우 페이지를 추가하거나 보이기 감추기 등을 할 수 있습니다. 

또한, 불필요한 플로우 삭제는 아래처럼,  플로우를 더블클릭 후 나타나는 메뉴에서 플로우를 삭제할 수 있습니다.

 

그럼, 사용법을 익히기 위해 먼저 간단한 플로우를 작성해 볼게요.

▶ Hello world ! 문자 출력해 보기

프로그래밍을 배울 때 제일 처음 출력해 보는 것이 “Hello world!”인 것은 이제 국룰? 인데요, 여기서도 그 문장을 출력해 볼게요.

먼저 위 이미지처럼, 공통노드(common node) 그룹에서 inject(타임스탬프)를 플로우 작업화면으로 끌어다 놓으세요.   
그리고, 타임스탬프노드를 더블 클릭하면 설정창이 열리는데, 아래 ②번 부분을 클릭하여 전달할 메시지 타입을 String(문자열)으로 선택합니다. 

그런 다음, 아래 ④번과 같이 "Hello world !" 메시지를 입력하고 완료 버튼을 눌러주세요.

 

 이제 공통그룹에서 debug 노드를 ⑤ 위치에 끌어다 놓으세요. 

그리고 "Hello world! " 노드 끝에 있는 포인트를 마우스로 드래그하면 연결할 수 있는 주황색 선이 나오는데요,  이를 debug노드의 연결점에 이어 붙여주세요.  (아래 이미지 참조)

각각의 노드 오른쪽에 보면, 파란색 점이 있는 것을 볼 수 있는데요, 이는 현재 새로운 노드가 삽입되었거나, 변경 사항이 발생한 표시이며, 아직 배포(적용)되기 전이라는 뜻입니다.     그럼,  이 상태에서 상단메뉴에 보이는 "베포하기" 버튼을 눌러주세요. 

 

그럼, 아래처럼 파란색 점이 사라진 것을 볼 수 있습니다.     이제 "Hello world!"라는 전달 내용(payload)을 가진 타임스탬프 노드의 왼쪽 버튼 부분(Inject)을 클릭하면 디버그 노드로 전달이 이루어집니다.   이윽고 우측 Sidebar의 디버그 창으로 "Hello world !"가 출력되는 것을 볼 수 있게 됩니다.    또한, Inject 버튼을 여러 번 클릭하는 만큼 출력이 됩니다.

 

참고로,  노드레드의 언어 설정은 기본적으로  영어, 독일어, 일본어, 러시아어를 지원하며, 한글도 지원하지만 간혹 한글 표현이 조금 어색한 경우도 있습니다.  
언어 설정 메뉴는 상단메뉴의 "배포하기" 버튼 오른쪽에 있는 삼선을 클릭 후,  창 탭을 클릭하면 나옵니다.

그리고 디버그 창에 출력된 내용이 지저분하거나 하여 삭제하고 싶을 때는 아래 휴지통 버튼을 클릭하면 됩니다. 

 

참고로 디버그(debug) 노드를 클릭 후 보이는 설정메뉴 하단에 "ㅇ사용가능" 표시가 있는데요, 이를 클릭하면 "Ø사용불가능"으로 표시가 바뀌며,  해당 디버그 노드는 실행을 시켜도 디버그 창으로 메시지 출력이 되지 않도록 사용이 중단됩니다. 

아래 이미지처럼,  해당 노드는 점선으로 처리되며,  Inject 버튼을 눌러도 아무것도 출력되지 않게 됩니다.

 노드의 삭제는 삭제하고자 하는 개별 노드를 선택한 다음 Delete 키로 쉽게 삭제 가능합니다.
노드간 연결된 선도 마우스로 선택 후 Delete 키로 삭제할 수 있습니다. 

그럼  "Node-RED의 시작!" 첫 글은 여기까지 하고,  다음 게시글에서 계속 이어가도록 하겠습니다.