솔리드JS(SolidJS)를 만들었으며 마르코 개발에 관여해온 라이언 카니아토는 마르코에 대해 “이베이 플랫폼의 고성능 요구사항에 대처하도록 만들어졌다”고 말했다. 이베이의 월 사용자 수가 3억 700만 명에 달한다는 점을 감안하면 마르코가 처리 못할 사용례는 거의 없다고 볼 수 있다.
마르코 구성요소
마르코의 구성요소 시스템부터 살펴보자. 마르코의 구성요소 정의 및 검색 시스템은 현재까지 만들어진 가장 단순한 형태다. 여기서 간단한 색상 선택 구성요소 정의를 볼 수 있다. 주 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
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가 있는 곳에 이 처리기가 사용된 것을 볼 수 있다.해석 : on-color-selected 이벤트가 트리거되면 handleColorSelected 메소드를 호출하고 인수가 있으면 모두 전달한다.
마르코의 상태
마르코의 상태는 원칙적으로 불변성이라는 측면에서 리액트(React)와 비슷하다. 즉, 새 상태를 할당해서 하나의 속성을 업데이트한다. 마르코는 다음과 같이 상태 업데이트를 강제 트리거하는 방법을 제공한다.다른 반응형 프레임워크와 마찬가지로 마르코의 상태는 구성요소의 내부 상태를 모델링한다. 반응형 시스템은 이 상태에 의존하는 UI 및 기타 값을 업데이트하는 작업을 담당한다.
마르코에서 이벤트 반복 및 발생
이제 footer 구성요소가 색상 속성을 반복하고 on-color-selected 이벤트를 트리거하는 두 가지 작업을 어떻게 실행하는지 살펴보자.color-picker-footer/index.marko의 코드는 예시 2에서 볼 수 있다
예시 2. 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 구성요소
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
함께 보면 좋은 콘텐츠
Sponsored
Surfshark
“유료 VPN, 분명한 가치 있다” VPN 선택 가이드
ⓒ Surfshark VPN(가상 사설 네트워크, Virtual Private Network)은 인터넷 사용자에게 개인 정보 보호와 보안을 제공하는 중요한 도구로 널리 인정받고 있다. VPN은 공공 와이파이 환경에서도 데이터를 안전하게 전송할 수 있고, 개인 정보를 보호하는 데 도움을 준다. VPN 서비스의 수요가 증가하는 것도 같은 이유에서다. 동시에 유료와 무료 중 어떤 VPN을 선택해야 할지 많은 관심을 가지고 살펴보는 사용자가 많다. 가장 먼저 사용자의 관심을 끄는 것은 별도의 예산 부담이 없는 무료 VPN이지만, 그만큼의 한계도 있다. 무료 VPN, 정말 괜찮을까? 무료 VPN 서비스는 편리하고 경제적 부담도 없지만 고려할 점이 아예 없는 것은 아니다. 보안 우려 대부분의 무료 VPN 서비스는 유료 서비스에 비해 보안 수준이 낮을 수 있다. 일부 무료 VPN은 사용자 데이터를 수집해 광고주나 서드파티 업체에 판매하는 경우도 있다. 이러한 상황에서 개인 정보가 유출될 우려가 있다. 속도와 대역폭 제한 무료 VPN 서비스는 종종 속도와 대역폭에 제한을 생긴다. 따라서 사용자는 느린 인터넷 속도를 경험할 수 있으며, 높은 대역폭이 필요한 작업을 수행하는 데 제약을 받을 수 있다. 서비스 제한 무료 VPN 서비스는 종종 서버 위치가 적거나 특정 서비스 또는 웹사이트에 액세스하지 못하는 경우가 생긴다. 또한 사용자 수가 늘어나 서버 부하가 증가하면 서비스의 안정성이 저하될 수 있다. 광고 및 추적 위험 일부 무료 VPN은 광고를 삽입하거나 사용자의 온라인 활동을 추적하여 광고주에게 판매할 수 있다. 이 경우 사용자가 광고를 보아야 하거나 개인 정보를 노출해야 할 수도 있다. 제한된 기능 무료 VPN은 유료 버전에 비해 기능이 제한될 수 있다. 예를 들어, 특정 프로토콜이나 고급 보안 기능을 지원하지 않는 경우가 그렇다. 유료 VPN의 필요성 최근 유행하는 로맨스 스캠은 인터넷 사기의 일종으로, 온라인 데이트나 소셜 미디어를 통해 가짜 프로필을 만들어 상대를 속이는 행위다. 이러한 상황에서 VPN은 사용자가 안전한 연결을 유지하고 사기 행위를 방지하는 데 도움이 된다. VPN을 통해 사용자는 상대방의 신원을 확인하고 의심스러운 활동을 감지할 수 있다. 서프샤크 VPN은 구독 요금제 가입 후 7일간의 무료 체험을 제공하고 있다. ⓒ Surfshark 그 외에도 유료 VPN만의 강점을 적극 이용해야 하는 이유는 다음 3가지로 요약할 수 있다. 보안 강화 해외 여행객이 증가함에 따라 공공 와이파이를 사용하는 경우가 늘어나고 있다. 그러나 공공 와이파이는 보안이 취약해 개인 정보를 노출할 위험이 있다. 따라서 VPN을 사용하여 데이터를 암호화하고 개인 정보를 보호하는 것이 중요하다. 서프샤크 VPN은 사용자의 개인 정보를 안전하게 유지하고 해킹을 방지하는 데 유용하다. 개인정보 보호 인터넷 사용자의 검색 기록과 콘텐츠 소비 패턴은 플랫폼에 의해 추적될 수 있다. VPN을 사용하면 사용자의 IP 주소와 로그를 숨길 수 있으며, 개인 정보를 보호할 수 있다. 또한 VPN은 사용자의 위치를 숨기고 인터넷 활동을 익명으로 유지하는 데 도움이 된다. 지역 제한 해제 해외 여행 중에도 한국에서 송금이 필요한 경우가 생길 수 있다. 그러나 IP가 해외 주소이므로 은행 앱에 접근하는 것이 제한될 수 있다. VPN을 사용하면 지역 제한을 해제해 해외에서도 한국 인터넷 서비스를 이용할 수 있다. 따라서 해외에서도 안전하고 편리하게 인터넷을 이용할 수 있다. 빠르고 안전한 유료 VPN, 서프샤크 VPN ⓒ Surfshark 뛰어난 보안 서프샤크 VPN은 강력한 암호화 기술을 사용하여 사용자의 인터넷 연결을 안전하게 보호한다. 이는 사용자의 개인 정보와 데이터를 보호하고 외부 공격으로부터 사용자를 보호하는 데 도움이 된다. 다양한 서버 위치 서프샤크 VPN은 전 세계 곳곳에 여러 서버가 위치하고 있어, 사용자가 지역 제한된 콘텐츠에 액세스할 수 있다. 해외에서도 로컬 콘텐츠에 손쉽게 접근할 수 있음은 물론이다. 속도와 대역폭 서프샤크 VPN은 빠른 속도와 무제한 대역폭을 제공하여 사용자가 원활한 인터넷 경험을 누릴 수 있도록 지원한다. 온라인 게임, 스트리밍, 다운로드 등 대역폭이 필요한 활동에 이상적이다. 다양한 플랫폼 지원 서프샤크 VPN은 다양한 플랫폼 및 디바이스에서 사용할 수 있다. 윈도우, 맥OS, iOS, 안드로이드 등 다양한 운영체제 및 디바이스에서 호환되어 사용자가 어디서나 안전한 인터넷을 즐길 수 있다. 디바이스 무제한 연결 서프샤크 VPN은 무제한 연결을 제공하여 사용자가 필요할 때 언제든지 디바이스의 갯수에 상관없이 VPN을 사용할 수 있다.