시작하기 — $mol

시작하기

React나 Vue에서 왔는데 무엇 하나 이해되지 않나요?

멘탈 모델을 먼저 읽으세요. computed, watch, 라이프사이클 훅, 데이터 로딩이 어디로 갔는지 5분이면 됩니다.이 페이지는 빈 폴더에서 실행되는 리액티브 $mol 앱까지 안내합니다. 약 15분 정도 걸립니다. 아래의 모든 코드 조각은 실제로 동작하는 코드입니다 — 그대로 복사하세요.컴포넌트는 평범한 TypeScript로 작성합니다. $mol에는 컴포넌트를 기술하는 더 짧은 형식인 view.tree도 있고, 다음 페이지에서 만나게 됩니다. 여기서는 필요 없습니다. 어느 쪽으로 쓰든 $mol 컴포넌트는 평범한 클래스입니다.

필요한 것

Node.js 18+ 와 git. 목록은 이게 전부입니다.전역 CLI를 설치하거나 나중에 이해해야 할 보일러플레이트를 생성할 필요가 없습니다. $mol 앱은 MAM 워크스페이스 안에서 살아가며, 이 워크스페이스는 이미 빌드하고 서빙하는 방법을 알고 있습니다.

1. 워크스페이스 받기

MAM은 $mol의 빌드 도구이자 모듈 레지스트리입니다. 한 번 클론하고 설치하세요.1git clone https://github.com/hyoo-ru/mam.git ./mam2cd mam3npm install4npm startnpm start는 http://localhost:9080/에서 개발 서버를 띄웁니다. 파일을 감시하며 자동으로 다시 빌드하니, 전용 터미널에서 계속 돌아가게 두세요.

2. 모듈 만들기

$mol 앱은 그냥 폴더 하나입니다. 네임스페이스(당신의 것, 예를 들어 my)와 이름(hello)을 정하세요.1mkdir -p my/hello기억해 둘 규칙 하나: 컴포넌트 이름의 밑줄은 폴더 구분자입니다. $my_hello는 my/hello/에, $my_hello_form이라면 my/hello/form/에 놓입니다. 모듈 폴더 이름에는 밑줄이 절대 들어가지 않습니다.이제 my/hello/ 안에 파일 두 개를 추가하세요.

index.html — 진입점

1<!doctype html>2<html mol_view_root>3 <head>4 <meta charset="utf-8" />5 <meta name="viewport" content="width=device-width, initial-scale=1" />6 </head>7 <body mol_view_root>8 <div mol_view_root="$my_hello"></div>9 <script src="web.js"></script>10 </body>11</html>mol_view_root="$my_hello" 속성이 페이지 로드 시 컴포넌트를 마운트합니다.

hello.view.ts — 컴포넌트

1namespace $ {2 3 export class $my_hello extends $mol_page {4 5 title() {6 return 'Greeting'7 }8 9 body() {10 return [ this.Name(), this.Message() ]11 }12 13 @ $mol_mem14 Name() {15 const obj = new this.$.$mol_string16 obj.hint = () => 'Enter your name'17 obj.value = ( next?: string ) => this.name( next )18 return obj19 }20 21 @ $mol_mem22 name( next?: string ) {23 return next ?? ''24 }25 26 @ $mol_mem27 Message() {28 const obj = new this.$.$mol_view29 obj.sub = () => [ this.greeting() ]30 return obj31 }32 33 greeting() {34 const name = this.name()35 return name ? `Hello, ${ name }!` : 'Please enter your name'36 }37 38 }39 40}GitHub에서 이 페이지 편집도움이 되었나요?예아니요이전멘탈 모델 다음TypeScript에서 view.tree로이 페이지에서필요한 것 1. 워크스페이스 받기 2. 모듈 만들기 index.html — 진입점 hello.view.ts — 컴포넌트 3. 실행하기 4. 두 번째 리액티브 값 더하기 5. 빌드 확인하기 $mol 앱을 만들었습니다