smalljs$mol검색⌘ K문서플레이그라운드비교에코시스템소개KO
설치Getting Started소개멘탈 모델시작하기TypeScript에서 view.tree로프로젝트 구조도구Essentials설치뷰상태와 반응성라우팅렌더링테스트배포문제 해결Data데이터 가져오기데이터 스키마Giper BazaMore쇼케이스React, Vue, Svelte에서쿡북Advanced플러그인모듈 메타데이터오프라인고스트 뷰About자주 묻는 질문팀릴리스API$mol_button_major$mol_button_minor$mol_string$mol_number$mol_text$mol_paragraph$mol_list$mol_row$mol_link$mol_check$mol_switch$mol_select$mol_scroll$mol_page$mol_pick

설치

시작하기 는 첫 앱을 단계별로 안내합니다. 이 페이지는 레퍼런스입니다. $mol 프로젝트가 어떻게 구성되고 빌드가 어떻게 동작하는지 설명합니다.

요구 사항

Node.js 24+ 와 git. 그 외에 전역으로 설치할 것은 없습니다.

MAM 워크스페이스

$mol 앱은 빌드 도구이자 모듈 레지스트리인 MAM 안에서 동작합니다. 한 번 클론한 뒤 그 안에서 모듈을 개발합니다.1git clone https://github.com/hyoo-ru/mam.git ./mam2cd mam3npm install4npm startnpm start 는 http://localhost:9080/ 에서 감시(watch) 개발 서버를 실행합니다. 저장할 때마다 다시 빌드하고 의존성을 자동으로 해석합니다. 번들러 설정을 유지 관리할 필요가 전혀 없습니다.클론 없이 쓰는 MAM README의 공식 빠른 시작도 있습니다.1mkdir mam && cd mam2npm exec mam@latest빈 폴더에서 같은 개발 서버를 띄웁니다. 그래도 클론을 권합니다. 어차피 모든 작업은 MAM 안에서 이루어지고, 클론에는 에디터 설정(.vscode)과 .npmrc가 처음부터 들어 있습니다.

브라우저에서

컴퓨터에 아무것도 설치하지 않았나요? GitHub Codespaces에서 워크스페이스를 여세요: codespaces.new/hyoo-ru/mam. GitHub 머신에서 도는 브라우저 속 VS Code이고, Node.js가 이미 설치되어 있습니다. 터미널에서 npm install과 npm start를 실행하고 포워딩된 9080 포트를 여세요.

모듈 이름 규칙

모든 컴포넌트 이름은 폴더 경로에 대응하며, 각 밑줄은 폴더 구분자입니다.1$my_app → my/app/2$my_app_header → my/app/header/모듈 폴더 이름에는 밑줄이 들어가지 않습니다. 여러 단어로 된 이름에는 중첩 폴더를 사용하세요. 사용하는 컴포넌트가 번들에 나타나지 않는다면 거의 항상 폴더 경로가 클래스 이름과 맞지 않는 것입니다.

모듈의 구조

컴포넌트는 파일이 든 폴더입니다. 주요 파일:파일용도앱의 index.html 은 루트 컴포넌트를 마운트합니다.1<body mol_view_root>2 <div mol_view_root="$my_app"></div>3 <script src="web.js"></script>4</body>

프로덕션 빌드

개발 서버는 즉석에서 빌드하지만, 워크스페이스 루트에서 임의의 모듈을 명시적으로 빌드할 수도 있습니다.1npm start my/app
GitHub에서 이 페이지 편집도움이 되었나요?예아니요이전도구다음뷰
이 페이지에서요구 사항MAM 워크스페이스브라우저에서모듈 이름 규칙모듈의 구조프로덕션 빌드npm 패키지 추가런타임에 패키지 불러오기다음
Type to search the documentation.