[Node-red] Custom node 중복사용 불가 해결

2022. 12. 28. 16:42개발/Node-red

2022.12.22 - [기록/개발 노트] - [Node-red] Custom node 오류 - 중복사용 불가

 

[Node-red] Custom node 오류 - 중복사용 불가

2022.11.21 - [기록/개발 노트] - [Node-red] Schedule node 수정 - 4 [Node-red] Schedule node 수정 - 4 2022.11.21 - [기록/개발 노트] - [Node-red] Custom node 수정 - 3 [Node-red] Custom node 수정 - 3 마지막 수정 후 보완할 점들 mq

iruk.tistory.com

위와 같이 Custom node 중에서

중복사용이 불가능했던 노드가 있었다.

 

딱히 분명한 원인을 찾지 못한 채

주기적으로 조금씩 손보고 있었다.

 

하늘색 노드( 라이트토크 ) 는 MQTT를 사용하고

보라색 노드( 스케쥴노드 ) 는 MQTT 없이 동작해서

처음에는 MQTT 관련 오류라고 생각했다. 유일한 차이점이었기 때문이다.

 

하지만 또 다른, MQTT를 사용하지 않는

Custom node로 테스트해본 결과

같은 오류가 발생했다.

 

즉 MQTT는 원인이 아니었다.

 

멀쩡한 노드는 새로 사용할때마다

노드의 id가 자동 부여된다.

 

하지만 오류발생하는 노드는

노드의 id가 " " 인 채로 반환된다.

이 부분이 수상해서

무조건 HTML에 원인이 있을거라고 생각했다.


HTML이 원인

MQTT가 원인이 아니라는 사실을 알게된 뒤

딱 한가지에만 집중했다.

 

무조건 HTML이 문제일거라고 생각했다.

.js 파일은 동작처리를 하기위한 소스 이므로

 

아무 동작도 일어나지 않은 상태에서

노드 중복사용이 불가능한거면 

config적인 부분이 오류라고 생각했다.

        defaults: {
	    	name: {value:""},
			id : {value : "", required: true},
            startTime : {value : ""},
            endTime : {value : ""},
            heat : {value : ""},
            cool : {value : ""},
            exha : {value : ""},
            led : {value : ""}
        },
        inputs:1,
        outputs:4,
        icon: "file.png",
        label: function() {
            return this.name||"라이트토크";
        },
        oneditsave: function() {
            var id = $("#node-config-input-id").val();
            var node = this;
            node.id = id;
        },
        oneditprepare : function() {
            $("#node-config-input-id").show();
            var node = this;
        }
    });

오류가 발생한 노드의 .html 일부분이다.

        defaults: {
            name: {value:""},
            startTime : {value : ""},
            endTime : {value : ""}
        },
        inputs:1,
        outputs:1,
        icon: "file.png",
        label: function() {
            return this.name||"스케쥴노드";
        }
    });

그리고 오류가 없이

중복사용이 가능한 노드의 .html 일부분이다.

 

큰 차이점이 두가지 있었다.

 

1. defaults: {} 내부 요소

2. function() 함수

 

1. defaults: {} 내부 요소

<!-- 오류발생 노드 -->

defaults: {
	name: {value:""},
	id : {value : "", required: true},
	startTime : {value : ""},
	endTime : {value : ""},
	heat : {value : ""},
	cool : {value : ""},
	exha : {value : ""},
	led : {value : ""}
},

오류발생한 노드는

id 요소를 갖고있다. value를 ""로 지정한 뒤

required: true 로 설정을 했다.

 

required:true 가 설정되면 

위와 같이 노드가 완전히 설정되지 않았을 때

삼각형으로 상태를 나타낸다.

내부 설정 창에서도

MAC 주소에 빨갛게 표시된다.

 

<!-- 정상 노드 -->

defaults: {
	name: {value:""},
	startTime : {value : ""},
	endTime : {value : ""}
    <!-- id 요소가 없음 -->
}

반면 오류가 발생하지 않는 노드는

id 요소가 없다.

 

의심스러워서

오류발생한 노드의 id 요소를 제거했다.

 

id 요소 제거 후 오류

잘 동작할 줄 알았지만

해당 노드에 MAC 을 입력하면

노드 아래에 접속됨 문구가 생겨야 하는데

노드가 동작하지 않는다.

 

또한 MAC을 입력하면 노드의 id ( 91d83221... )가

undefined로 변하는 것을 볼 수 있다.

 

이 오류를 수정하기 위해

HTML 파일의 function() 부분을 수정했다.

 

2. function() 함수

        oneditsave: function() {
            var id = $("#node-config-input-id").val();
            var node = this;
            node.id = id;
        },
        oneditprepare : function() {
            $("#node-config-input-id").show();
            var node = this;
        }

oneditsave, oneditprepare 가 문제일 것 같았다.

위 프로퍼티들은 Node-red forum에 자세하게 나와있다.

 

https://nodered.org/docs/creating-nodes/node-html

 

HTML File : Node-RED

HTML File The node .html file defines how the node appears with the editor. It contains three distinct part, each wrapped in its own tag: the main node definition that is registered with the editor. This defines things such as the palette category, the edi

nodered.org

oneditprepare 와 oneditsave는 각각

노드 수정중인 상태일 때와

노드를 수정하고 완료를 누른 상태를 나타낸다.

 

즉 내가 MAC을 입력하고

완료를 눌렀을 때

오류가 발생했으니

이 두 부분을 수정하면 될 것 같다.

.

.

.

.

중복 오류는 해결했지만

또 다른 문제가 생겼다.