개발자

마르코 자바스크립트 프레임워크 실사용기

Matthew Tyson  | InfoWorld 2021.12.20
전체 스택 서버 측 렌더링 자바스크립트 프레임워크의 혁신이 계속해서 빠른 속도로 진행 중이다. 마르코(Marko)는 이베이의 후원을 받아 개발되고 있는데, 이베이는 자체 전자상거래 사이트에 이 프레임워크를 사용 중이다. 마르코는 배우기 쉬운 고성능 프레임워크를 지향한다.
 
솔리드JS(SolidJS)를 만들었으며 마르코 개발에 관여해온 라이언 카니아토는 마르코에 대해 “이베이 플랫폼의 고성능 요구사항에 대처하도록 만들어졌다”고 말했다. 이베이의 월 사용자 수가 3억 700만 명에 달한다는 점을 감안하면 마르코가 처리 못할 사용례는 거의 없다고 볼 수 있다.
 
ⓒ Getty Images Bank
 

마르코 구성요소

마르코의 구성요소 시스템부터 살펴보자. 마르코의 구성요소 정의 및 검색 시스템은 현재까지 만들어진 가장 단순한 형태다. 여기서 간단한 색상 선택 구성요소 정의를 볼 수 있다. 주 index.marko 파일에 <color-picker>라는 HTML 요소와 함께 16진수 색 배열이 포함된 속성이 있다. 마르코는 <color-picker> 구성요소를 어떻게 찾을까?
 
구성요소 사용이 발견된 디렉터리부터 시작한 다음 인접 디렉터리를 거쳐 위로 올라가면서 필요한 구성요소 정의가 포함된 /component 디렉터리를 찾는다. 앱 코드에서 구성요소를 찾을 수 없으면 설치된 종속 항목도 스캔한다.
 
마르코는 위로 올라가며 검색하므로 별개 브랜치의 디렉터리가 상호 인식하지 않는다. 이것이 일종의 구성요소 범위 지정 기능을 제공한다.
 
예시에서는 /components/color-picker/index.marko 파일이 있으므로 멀리까지 찾을 필요가 없다(마르코는 components 디렉터리의 구성요소 이름을 가진 파일, 또는 구성요소 디렉터리 내에 있으며 폴더 및 파일이 구성요소 이름으로 된 파일에서도 구성요소를 로드한다.)
 
/components/color-picker/index.marko 파일에서는 예시 1의 색상 선택 구성요소 정의를 볼 수 있다.
 

예시 1. color-picker.marko

import getDefaultColors from '../../util/getDefaultColors.js'

class {
  onInput(input) {
    var colors = input.colors || getDefaultColors();

    this.state = {
      selectedColor: colors[0],
      colors
    };
  }

  handleColorSelected(color) {
    this.state.selectedColor = color;
  }
}

<div>
  <color-picker-header color=state.selectedColor/>
  <color-picker-footer colors=state.colors on-color-selected("handleColorSelected")/>
</div>
 
예시 1에는 구성요소의 주 요소가 포함된다. 먼저 import 문으로 다른 JS 파일에서 가져오는 작업부터 시작한다(전달된 색상이 없는 경우 사용되는 간단한 자바스크립트 함수). 그 다음 필요한 자바스크립트 구조를 정의하는데, 여기서 구조는 클래스와 함수다. 마지막 부분은 실제 템플릿 마크업으로 두 가지 다른 구성요소인 header와 footer를 불러온다.
 
클래스 정의를 더 자세히 보면 두 가지 메소드를 정의한다.
 

속성 입력

첫 번째 메소드는 onInput()이다. 입력 인수를 받고 구성요소 상태 수정을 허용하는 라이프사이클 메소드다(상태에 대해서는 아래에서 더 자세히 다룸).
 
input 변수는 마르코에서 예약된 식별자로, 상위 항목에서 전달된 속성으로 확인된다. 주 구성요소에는 하드코딩된 16진수 색상 목록을 가리키는 colors 요소의 속성이 포함된다. 이제 input.colors 속성을 통해 하위 구성요소에서 이러한 색상에 액세스할 수 있다. 속성은 완전히 대응적이다. 즉, 시스템은 이 속성에 의존하는 모든 요소가 업데이트되도록 한다.
 

이벤트 처리

이 클래스의 두 번째 메소드는 맞춤형 이벤트 처리기인 handleColorSelected다. 다음과 같이 예시 1에서 footer가 있는 곳에 이 처리기가 사용된 것을 볼 수 있다.
<color-picker-footer colors=state.colors on-color-selected("handleColorSelected")/>

해석 : on-color-selected 이벤트가 트리거되면 handleColorSelected 메소드를 호출하고 인수가 있으면 모두 전달한다.
 

마르코의 상태

마르코의 상태는 원칙적으로 불변성이라는 측면에서 리액트(React)와 비슷하다. 즉, 새 상태를 할당해서 하나의 속성을 업데이트한다. 마르코는 다음과 같이 상태 업데이트를 강제 트리거하는 방법을 제공한다.
this.setStateDirty(property);
 
다른 반응형 프레임워크와 마찬가지로 마르코의 상태는 구성요소의 내부 상태를 모델링한다. 반응형 시스템은 이 상태에 의존하는 UI 및 기타 값을 업데이트하는 작업을 담당한다.
 

마르코에서 이벤트 반복 및 발생

이제 footer 구성요소가 색상 속성을 반복하고 on-color-selected 이벤트를 트리거하는 두 가지 작업을 어떻게 실행하는지 살펴보자.
 
color-picker-footer/index.marko의 코드는 예시 2에서 볼 수 있다
 

예시 2. color-picker-footer

  <div.color-picker-footer>
  <div.color-picker-selection-container>
    <for|color| of=input.colors>
      <div>
        <color-picker-selection
          color=color
          on-color-selected("handleColorSelected", color)/>
      </div>
    </for>
    <input key="hexInput" placeholder="Hex value" on-input("handleHexInput")/>
  </div>
</div>
 
위에서 볼 수 있듯이 반복 작업은 <for> 태그로 수행된다. <for> 태그는 | 기호 안에 이름을 배치한 반복자 변수를 지정할 수 있다. 여기서 반복자의 이름은 color다. 반복할 대상 컬렉션은 of 속성으로 식별되며, 여기서는 상위 항목에서 전달되는 input.colors를 참조한다.
 
input.colors 변수의 각 멤버는 div로 출력되며 color 변수에 액세스할 수 있다. 리액트와 같은 다른 프레임워크와 비슷한 구문이다.
 

마르코의 이벤트 방출

클릭을 통한 색상 선택 작업의 대부분은 color 속성 및 on-color-selected의 처리기와 함께 for 반복자 내에서 출력되는 color-picker-selection 구성요소에 의해 처리된다.
 
예시 3은 color-picker-selection 구성요소를 보여준다.
 

예시 3. color-picker-selection 구성요소

class {
  handleColorSelected() {
    this.emit("color-selected");
  }
}

style {
  .color-picker-selection {
    width: 25px;
    height: 25px;
    border-radius: 5px 5px 5px 5px;
    display: flex;
    flex-direction: column;
    margin: 5px 0px 0px 5px;
    float: left;
  }
}

<div.color-picker-selection
  on-click("handleColorSelected")
  on-touchstart("handleColorSelected")
  style={
    backgroundColor: input.color
  }/>
 
color-picker-selection의 대부분은 레이아웃(색상을 클릭할 수 있는 작은 사각형)을 정의하기 위한 것이다. 구성요소 구조에서 style 블록 내에 CSS가 포함되어 모서리가 둥근 작은 사각형을 정의하는 것을 볼 수 있다. style.css라는 이름으로 별도의 .css 파일에 CSS를 정의하는 방법도 있는데 이 방법은 /color-picker-selection 디렉터리에서 볼 수 있다.
 
템플릿 마크업에서 input.color에 설정된 16진수 색으로 배경색을 설정하는 데 사용되는 인라인 스타일을 볼 수 있다.
 
또한 사용자의 색상 사각형 상호작용을 캡처하는 데 on-click과 on- touchstart 이벤트가 어떻게 사용되는지도 볼 수 있다. 이벤트는 파일 앞부분에 정의된 handleColorSelected로 전달된다. this.emit("color-selected")를 사용하여 custom color-selected 이벤트를 방출한다.
 
앞서 살펴봤듯이 color-picker-footer는 on-color-selected("handleColorSelected", color)로 맞춤형 이벤트를 주시한다. 처리기는 handleColorSelected를 호출하고 color 변수를 전달한다. 그런데 이 함수는 어디에 정의될까?
 

구성요소 정의의 유연함

그 질문에 답하자면 함수는 같은 디렉터리에 있는 별도의 component.js 파일에 정의돼 있다. 앞서 본 별도의 style.css 파일과 비슷한 경우다. 구성요소의 개별 부분을 하나의 파일에 두거나 별도의 파일(또는 두 가지 조합)에 둘 수 있는 기능은 구성요소를 정의하는 방법 측면에서 높은 유연성을 제공한다. 단순했던 구성요소가 차츰 복잡해질 때 유용하다.
 

마르코의 await 태그

마르코에는 비동기 렌더링을 처리하기 위한 <await> 태그도 포함된다. <await> 태그를 사용하면 프로미스를 전달할 수 있고, 프레임워크는 결과를 기다리다가 결과가 나오면 표시한다. (스벨트(Svelte)의 이름이 비슷한 구성요소와 유사함)
 
<await> 태그는 비동기 출력 처리를 간소화해준다.
 

간단하고 돌발 상황이 없는 프레임워크

마르코는 배우기 쉽다는 약속을 잘 지켜 나가고 있다. 무엇보다 소수의 필수 태그만 익히면 된다. 게다가 이러한 태그도 매우 단순하고 최소 돌발(least surprise) 원칙에 잘 부합한다. 또한 마르코는 전체 스택 프레임워크이므로 기본적으로 서버 측 렌더링도 제공되며 익스프레스(Express)와 같은 서버와 통합된다.
 
직관적인 구성요소 정의 체계, 웹팩(Webpack) 및 롤업(Rollup)을 위한 번들, 최상급 성능이 결합된 마르코는 다음 번에 사용할 자바스크립트 프레임워크로 충분히 고려할 만하다. editor@itworld.co.kr 

회사명 : 한국IDG | 제호: ITWorld | 주소 : 서울시 중구 세종대로 23, 4층 우)04512
| 등록번호 : 서울 아00743 등록발행일자 : 2009년 01월 19일

발행인 : 박형미 | 편집인 : 박재곤 | 청소년보호책임자 : 한정규
| 사업자 등록번호 : 214-87-22467 Tel : 02-558-6950

Copyright © 2024 International Data Group. All rights reserved.