Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Offcanvas
1111Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
개발자

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

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 
 Tags Marko 자바스크립트
Sponsored

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

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

Copyright © 2022 International Data Group. All rights reserved.