Skip to content

Home

Jump to bottom
최현준 edited this page Aug 1, 2021 · 2 revisions

DOMino

ICON-small

DOMino 는 Web Component를 기반으로한 Web Component 구현체입니다. Web Component 웹 표준을 따르고 있기 때문에 어떤 Browser에서도 안정된 동작과 최적화된 성능을 보여 줍니다.

How to start?

DOMino는 Project 초기화를 위해 create-domino-app 이라는 tool을 지원합니다.

npx @sshrik/create-domino-app ${DIR}
cd ${DIR}
npm i
npm start

DOMino는 Web-App 개발을 도와주기 위한 서버로 Express를 사용하며, 기본으로 3000 port를 사용하여 수행됩니다.

물론, 여러분만의 폴더 구조와 더욱 가벼운 서버를 위해 DOMino 자체의 다운로드도 지원합니다.

npm i @sshrik/domino

How to use?

Define Component

DOMino는 Web-Component 표준을 따르기 때문에 register하는 과정이 필요합니다. 따라서 다음처럼 Component들을 정의하면서 실행됩니다.

import {Component, Dobee} from '@sshrik/domino';
import Descriptor from '@/src/Descriptor';
import Header from '@/src/Header';
import Footer from '@/src/Footer';
import LinkText from '@/src/LinkText';
import './app.css';
Dobee.registerComponent("domino-desc", Descriptor);
Dobee.registerComponent("domino-footer", Footer);
Dobee.registerComponent("domino-header", Header);
Dobee.registerComponent("domino-link-text", LinkText);

Dobee 는 Domino의 Helper 역할을 해 주는 Class입니다. Dobee에게 Component 등록을 맞기게 되면, 우리는 Domino Component 로 App을 만드는것에 집중하면 됩니다. Domino에서는 파일 구조를 어떻게 잡는지에 대한 강요는 없습니다. registerComponent를 import하는 파일 안에서 해도 좋습니다. 그러나 사용 관계의 명확성과 사용 할 때 Tag 이름을 어떻게 사용하겠다는 정의를 위해서 Component를 사용하는 파일에서 정의하는것을 추천드립니다.

Define render

Domino에서 App을 만들면서 할 유일한 작업은 render를 정의하는 것입니다. render는 여러가지 함수를 제공합니다.

useProps

먼저 useProps 는 준비된 객체를 Domino Component 에게 넘겨주기 위한 함수입니다.

export default class App extends Component {
  render() {
    const firstLinkIfno = {
      plainText: ["Follow this", "to learn more."],
      linkText: ["link"],
      link: ["https://github.com/sshrik/DOMino/wiki"],
    }

    const secondLinkInfo = {
      plainText: ["Edit app/script.js to modify."],
      linkText: [],
      link: [],
    }

    return `
    <div class="app-container">
      <domino-desc></domino-desc>
      <domino-header>Now you can use Domino!</domino-header>
      <domino-link-text props='${this.useProps(firstLinkIfno)}'></domino-link-text>
      <domino-link-text props='${this.useProps(secondLinkInfo)}'></domino-link-text>
    </div>
    <domino-footer></domino-footer>
    `;
  }
}

하위 객체에서는 그저 this.props로 받아 사용하기만 하면 됩니다.

❗️this.props 는 immutable한 객체입니다. 해당 객체에 값을 바꾸는 것은 금지되어있습니다.

useEvent

useEvent 는 해당 객체 내부의 특정 요소에 대한 이벤트를 설정합니다.앞에서부터 query, type, callback을 받습니다.

  • query : 해당 component 내부에서 해당하는 첫 대상에 대한 이벤트를 설정합니다.
  • type : click, mouseon 과 같은 이벤트의 type에 대한 설정입니다.
  • callback : 해당 이벤트가 일어났을 때 발생시킬 Callback입니다.
render() {
  this.useEvent('img', 'click', () => {
    console.log(this.props);
    this.props.onPictureClick();
  });

  return `
  <div class="picture-info-container">
    <img src="${guitar}" />
    <p>${this.props.infoText}</p>
  </div>`;
}

domino에서는 on으로 시작하는 props를 모두 함수로 취급합니다. 그러나 이를 사용하기 위해서는 그냥 함수를 useProps로 넘기면 안됩니다.

setCallback

Web-Component에 함수 객체를 넘기기 위한 방식으로 domino는 setCallback을 사용합니다. 다음처럼 사용합니다.

render() {
  const infoObject = {
    infoText: "hello",
    onPictureClick: Dobee.setCallback('onPictureClick', () => {
      console.log(this);
    })
  }

  return `
  <div class="app-container">
    <picture-info props=${this.useProps(infoObject)}></picture-info>
  </div>
  `;
}

setCallback의 경우 Dobee Class내에 정의되어있으며, key값에 대해서 callback을 등록하는 로직으로 진행됩니다.

Clone this wiki locally