이 글은 Mathias L이 Noodl 공식 슬랙 커뮤니티에서 2019년 9월 공개한「Noodl react library guide」의 화역이다.
※ 주: 일역에 의역+주석이 추가되었습니다.

Noodl React 라이브러리 가이드(및 번역)

이 설명서는 Noodl 작업공간에 라이브러리를 추가하는 방법에 대해 설명합니다.

작업공간 폴더가 올바르게 구성되었는지 확인합니다.

우선 Noodl CLI tool이 설치되어 있는지 확인합니다.
도구는 npm로 설치할 수 있습니다.

$ npm install -g noodl-lab-cli

그런 다음 빈 작업공간 폴더를 만듭니다.
이 폴더에는 모든 사용자 정의 구성 요소와 모듈이 포함되어 있습니다.

$ mkdir my-workspace-folder
$ cd my-workspace-folder

모든 것은 0에서 시작할 필요가 없다.
Noodl 이니시에이터 랩의 템플릿을 사용할 수 있습니다.

$ curl -O https://s3.amazonaws.com/updates.noodlcloud.com/lab
s/noodl-starter-lab.zip
$ unzip noodl-starter-lab.zip

작업공간 폴더를 비롯하여 이 작업공간을 Noodl 클라우드 작업공간에 연결합니다.
init 명령을 실행합니다.아래 XXX를 가져온 액세스 키로 교체하고 제공된 작업공간 이름으로 교체하십시오.

$ noodl-lab init --accessKey "XXX" --name "your-workspace-nam
e"

액세스 키는 작업공간 관리 페이지에 있습니다. (lab와 작업공간은 모두 사용할 수 있으며, 같은 액세스 키를 참조합니다.)
※ 참고: 이 방문 키는 Noodl 작업 영역의 관리자에게만 공개됩니다.안타깝게도 베타 테스트 프로그램 권한으로 접근 키를 확인할 수 없습니다.

꽃깃발을 클릭하여 관리 페이지에 들어갑니다.랩 이름이 사용자 이름 아래에 표시됩니다.

액세스 키는 관리 페이지 하단에 있습니다.
작업 영역의 내용을 변경할 때마다push가 필요합니다.
push를 통해 내용 폴더의 정확한 설정을 테스트할 수 있습니다.

$ noodl-lab push

위의 명령을 실행하면 작업공간 폴더가 올바르게 설정됩니다.Noodl 모듈을 공동으로 작업할 수 있기 때문에 이 폴더를 버전 제어에 두는 것이 가장 좋다.
참고: Noodl 관리자가 아니므로 이 안내서에 설명된 "noodl-lab"명령을 사용하여 Noodl 클라우드 작업 영역에 추가할 수 없습니다.
하지만 다음 React 모듈을 만들고 Noodl 프로젝트에 추가할 수 있습니다.

새 라이브러리 모듈 만들기

작업공간 폴더 유형에 새 라이브러리 모듈을 추가합니다.

$ cd library
$ curl -O https://s3.amazonaws.com/updates.noodlcloud.com/lab
s/react-module-template.zip
$ unzip react-module-template.zip

이제 작업공간 라이브러리 폴더에 두 개의 폴더와 아이콘 파일이 추가됩니다.

feed
library/
newmodule-project
newmodule
newmodule-icon.png

생성된 라이브러리 모듈에 따라 두 폴더와 아이콘의 이름을 변경합니다.
예를 들어 "mymodule-project"와 "mymodule"입니다.

$ mv newmodule mymodule
$ mv newmodule-project mymodule-project
$ mv newmodule-icon.png mymodule-icon.png

우선, 우리 "mymodule"폴더를 봅시다.
여기에는 모듈의 원본 코드가 포함되어 있습니다.
예를 들어 모든 React 코드와 Noodl이 결합된 코드, 웹 팩을 사용하는 구축 스크립트 등이다.
우선 패키지.json 파일의 모듈 이름을 변경합니다.

{
"name"︓ "com-your-domain-module-name"
...
}

모듈의 대표 이름으로 이름을 변경하고 계속 구축합니다.
모든 관련 모듈이 설치됩니다.
참고: "mymodule"폴더에서 npm install 을 실행하면 "node_modules "폴더가 만들어졌습니다, 패키지.json에서 쓴 의존 모듈은 자동으로 다운로드됩니다.

$ npm install

템플릿 모듈은 예시 코드를 포함하기 때문에 계속 구축할 수 있습니다.

$ npm run build

이 단계는 읽기 모듈을 구축하여 다른 폴더로 복사하는 mymodule-project입니다.이 폴더에는 Noodl에서 열고 편집하고 테스트할 수 있는 Noodl 항목이 포함되어 있습니다.
주의: npm run bulid 생산 모드에서 웹팩을 실행합니다.이렇게 하면 자체 제작 모듈에 필요한 파일 index를요약은 js입니다.
또한 mymodule-project 폴더에서 Noodl에 필요한 "noodl_modules"폴더를 만듭니다.
노드를 시작하고 [프로젝트] 탭으로 이동한 다음 페이지 하단에서 [분리된 항목 가져오기]를 선택합니다.

항목 페이지 하단에 있는 "분리된 항목 가져오기"단추를 누르십시오
중요 저장 확인란이 선택되어 있는지 확인합니다.가져올 항목이 로컬 컴퓨터에 저장됨
소스 위치에서 편집합니다.예제에서는 작업공간 폴더의 항목을 편집합니다.

"로컬에 저장"이 선택되었는지 확인하십시오.
항목의 이름을 지정한 다음 Pick project folder 단추를 누릅니다.

항목 이름을 지정하고 선택 항목folder 를 누르십시오
작업공간 디렉터리 (압축을 풀고 위 템플릿을 만드는 디렉터리)'mymodule-project'폴더를 찾은 다음'열기'를 누르십시오.
열린 항목은 제3자 React 구성 요소와 같은 사용자 정의 React 구성 요소를 보여 줍니다.이 구성 요소를 사용하거나 속성을 볼 수 있습니다.그럼 모듈의 코드를 자세히 알아보겠습니다.
"mymodule"폴더로 돌아가면 src 폴더의 하위 index에 있습니다.이것은 js를 포함한다

mymodule/
  assets/
  node_modules/
  src/
    index.js
  package.json
  package-lock.json
  webpack.config.json

모든 바인딩 코드를 포함하는 파일입니다. React 구성 요소를 Noodl로 가져옵니다.
모듈에 새 구성 요소를 추가하면 npm를 통해 패키지를 설치하거나 코드를 모듈 폴더에 복사하여 코드 index를 결합합니다.js 파일에 추가하십시오.
내 사용자 정의 ReactComponent 및 타사 구성 요소 FieldRange 의 두 가지 예시를 살펴보여 어떻게 실행되는지 알아보는 것이 좋습니다.
주: 견본 프로그램도 이 문장의 밑부분에 실렸다.
모듈의 소스 코드를 변경한 경우 재구성해야 합니다.
개발 모드에서 구축 절차를 시작할 수 있습니다.
$ npm run dev
이것은 변경 사항을 감시하고 동적으로 새 모듈을 구축하여 노드 프로젝트로 복사합니다.
변경되면 Ctrl/cmd-R을 사용하여 Noodl 뷰어를 업데이트하면 됩니다.

라이브러리에 모듈 추가

자체 제작 모듈에 만족하면 모듈을 자신의 작업 공간 라이브러리에 추가할 수 있을 뿐만 아니라 다른 Noodl 사용자 프로젝트에도 포함할 수 있습니다.
이를 위해 라이브러리 폴더에서 index를 사용합니다.모듈에 따라 json 파일을 편집하십시오.

[
   {
      "label":"My React Module",
      "desc":"I made this myself!",
      "thumb":"mymodule-icon.png",
      "project":"mymodule-project"
 }
]

label: 라이브러리 모듈 레이블

desc: 간략한 설명

thumb: 라이브러리 패널에 아이콘으로 표시된 이미지

항목: 프로젝트 폴더의 이름입니다.항목의 이름이어야 합니다.모듈 폴더가 아니라 프로젝트 폴더입니다.

작업이 완료되면 작업공간 폴더의 루트 디렉터리로 돌아가십시오
새로운 내용을 Noodl 클라우드 작업 영역으로 전송합니다.

$ noodl-lab push

푸시 후 Noodl을 다시 시작해야 합니다.다시 시작하면 새 모듈이 편집기의 LIBRARY 탭에 표시됩니다.
주의: 여기서도 noodl-lab 명령을 사용할 수 없기 때문에 수동으로 추가해야 합니다.
“noodl_모듈 폴더 Noodl 프로젝트의 자원 폴더(왼쪽 표시줄에서 ProjectSetting>Open Project folder 단추를 누르면 표시되는 폴더입니다. Windows에서는 "C:\Users_ser\Documents\Noodl"의 프로젝트 폴더입니다.)에서 기술한 장면은 다음과 같은 절차를 이용하여 명세표를 작성하여 개념 디자인에서 체량의 부피를 분석하도록 한다.

왼쪽 열에서 LIBRARY 탭을 선택하면 새 모듈이 표시됩니다.
이제 사용자는 ADD 버튼을 클릭하여 프로젝트에 모듈을 추가할 수 있습니다.

(추가) 예제 코드

마지막으로 위의 예시에서 설명한 사용자 정의 React 구성 요소의 예시 코드는 ISC 라이센스 (GNU GPL과 호환되는 자유 라이센스) 에서 제공되므로 일본어로 번역됩니다.
index.js

import FieldRange from '@atlaskit/range'; // https://atlaskit.atlassian.com/packages/core/range

//サードパーティReactコンポーネントの例
//Third party react component example

const AtlasKitRange = {
    //ノード名、Noodlで呼ばれるもの。必須
    name: 'Atlas Range', //name of the node, this is what it'll be called in Noodl. Mandatory
    //カテゴリも必須
    category: 'Atlas', //A category is also mandatory.

    //ここでReactコンポーネントを返す必要があります
    //Here we need to return the React Component.
    getReactComponent() {
        return FieldRange;
    },

    //Reactコンポーネントに転送されるすべての入力リスト
    //A list of all inputs that will be forwarded to the react component
    inputProps: {
        isDisabled: {type: 'boolean', default: false},
        max: {type: 'number', default: 100},
        min: {type: 'number', default: 0},
        value: {type: 'number'}
    },
    //出力プロパティはNoodlノードの出力で生成される以外、inputPropsと非常に似ています
    //これらは通常Reactのコールバックで、Noodlは値をキャッチして出力として送信します
    //these props are very similar to the inputProps, except that they will generate outputs on the Noodl node
    //these are typically callbacks in React, and Noodl will catch the value and and send it as an output
    outputProps: {
        onChange: {
            type: 'number',
            displayName: 'New Value',
            // Reactコンポーネントに送信されるカスタムコールバックを定義できます。Noodlはここで出力で送信する値が返ってくることを期待しています
            // この例は非常に単純なので、カスタムの「getValue」関数を定義する必要はありません。
            // Noodlが自動的に判断しgetValu関数を補完します 
            // You can define a custom callback that's sent to the React component. Noodl expect you to return a value here
            // that Noodl will send on the output. In this case its so simple that we don't need to define a custom 'getValue' function.
            // Noodl will automatically figure it out 
            // getValue: sliderValue => sliderValue
        }
    }
}

//カスタムReactコンポーネントの例
//Custom react component example

function MyCustomReactComponent(props) {
    const style = {
        color: props.textColor,
        backgroundColor: props.backgroundColor,
        borderRadius: '10px',
        padding: '20px',
        marginBottom: props.marginBottom
    };

    return <div style={style} onClick={props.onClick} >{props.children}</div>
}

const MyCustomReactComponentNode = {
    name: 'Custom React Component',
    category: 'Tutorial',
    getReactComponent() {
        return MyCustomReactComponent;
    },
    inputProps: {
        backgroundColor: {type: 'color', default: 'white'},
        marginBottom: {type: {name: 'number', units: ['px'], defaultUnit: 'px'}, default: 10}
    },
    outputProps: {
        onClick: {type: 'signal', displayName: 'Click'}
    }
}


Noodl.defineModule({
    reactNodes: [
        AtlasKitRange,
        MyCustomReactComponentNode
    ],
    nodes:[
    ],
    setup() {
        //起動時に一度呼び出されます
        //this is called once on startup
    }
});

그림 Noodl의 자체 제작 노드

총결산

Noodl을 위해 React 구성 요소를 직접 만들고 Noodl 노드로 등록하고 싶어서 일련의 절차를 보았습니다.
자체 제작 또는 외부 React 구성 요소를 노드화할 수 있다면, Noodl의 가능성도 커질 것입니다.