Mithril.js 2 문서
Mithril.js란?
Mithril.js는 싱글 페이지 애플리케이션(SPA)을 구축하기 위한 현대적인 클라이언트 사이드 JavaScript 프레임워크입니다. 작고(gzip 압축 시 8.9KiB) 빠르며, 라우팅 및 XHR 유틸리티를 기본적으로 제공합니다.
다운로드 크기
Mithril.js (8.9 KiB)Vue + Vue-Router + Vuex + fetch (40 KiB)React + React-Router + Redux + fetch (64 KiB)Angular (135 KiB)성능
Mithril.js (6.4 ms)Vue (9.8 ms)React (12.1 ms)Angular (11.5 ms)Mithril.js는 Vimeo, Nike와 같은 회사와 Lichess와 같은 오픈 소스 플랫폼에서 사용되고 있습니다.
숙련된 개발자라면 Mithril.js가 다른 프레임워크와 어떻게 비교되는지 궁금할 수 있습니다. 프레임워크 비교 페이지를 참조하십시오.
Mithril.js는 IE11, Firefox ESR, 그리고 최신 두 버전의 Firefox, Edge, Safari, Chrome을 지원하며, 별도의 폴리필(polyfills)이 필요하지 않습니다.
v1 문서를 찾고 계십니까? 여기를 클릭하십시오.
시작하기
Mithril.js를 간편하게 사용해 보려면 CDN을 통해 포함하고 다음 튜토리얼을 따라 해 보세요. 이 튜토리얼은 주요 API 기능(라우팅 및 XHR 포함) 대부분을 다루며, 약 10분 정도 소요됩니다.
다음과 같은 HTML 파일을 만들어서 따라해 봅시다.
<body>
<script src="https://unpkg.com/mithril/mithril.js"></script>
<script>
var root = document.body;
// 여기에 코드를 작성하세요!
</script>
</body>Mithril.js를 더욱 간단하게 사용해 볼 수도 있습니다. 다음은 Mithril.js가 미리 로드된 라이브 플레이그라운드이며, Mithril로 만들어졌습니다.
var root = document.body;
// 여기에 코드를 작성하세요
m.mount(root, {
view: function () {
return m('h1', 'Try me out');
},
});
Hello world
가장 간단한 예제부터 시작해 보겠습니다. 화면에 텍스트를 렌더링합니다. 아래 코드를 파일에 복사하십시오(코드를 복사하는 대신 직접 입력하는 것을 권장합니다. 직접 입력하면 학습 효과가 더 좋습니다).
var root = document.body;
m.render(root, 'Hello world');이제 텍스트를 다른 내용으로 변경해 봅시다. 이전 코드 아래에 다음 코드 줄을 추가하십시오.
m.render(root, 'My first app');보시다시피 동일한 코드를 사용하여 HTML을 생성하고 업데이트합니다. Mithril.js는 텍스트를 처음부터 다시 생성하는 대신, 변경된 부분만 효율적으로 업데이트합니다.
라이브 예제
var root = document.body;
m.render(root, 'Hello World');
DOM 엘리먼트
텍스트를 <h1> 태그로 감싸 보겠습니다.
m.render(root, m('h1', 'My first app'));m() 함수를 사용하여 원하는 HTML 구조를 정의할 수 있습니다. 예를 들어 <h1>에 클래스를 추가해야 하는 경우:
m('h1', { class: 'title' }, 'My first app');여러 엘리먼트를 포함하려면:
[m('h1', { class: 'title' }, 'My first app'), m('button', 'A button')];더 복잡한 구조를 만들려면:
m('main', [
m('h1', { class: 'title' }, 'My first app'),
m('button', 'A button'),
]);라이브 예제
var root = document.body;
m.render(root, [
m('main', [
m('h1', { class: 'title' }, 'My first app'),
m('button', 'A button'),
]),
]);
참고: <html> 구문을 선호하는 경우 Babel 플러그인을 통해 사용할 수 있습니다.
// Babel의 JSX 플러그인을 통한 HTML 구문
<main>
<h1 class="title">My first app</h1>
<button>A button</button>
</main>컴포넌트
Mithril.js 컴포넌트는 view 함수를 가진 객체일 뿐입니다. 위의 코드를 컴포넌트로 표현하면 다음과 같습니다.
var Hello = {
view: function () {
return m('main', [
m('h1', { class: 'title' }, 'My first app'),
m('button', 'A button'),
]);
},
};컴포넌트를 활성화하려면 m.mount를 사용합니다.
m.mount(root, Hello);결과는 예상대로 다음과 같은 마크업이 생성됩니다.
<main>
<h1 class="title">My first app</h1>
<button>A button</button>
</main>m.mount 함수는 m.render와 유사하지만 HTML을 한 번만 렌더링하는 대신 Mithril.js의 자동 다시 그리기 시스템을 활성화합니다. 이것이 무엇을 의미하는지 이해하기 위해 몇 가지 이벤트를 추가해 봅시다.
var count = 0; // 변수 추가
var Hello = {
view: function () {
return m('main', [
m('h1', { class: 'title' }, 'My first app'),
// 다음 줄을 변경합니다.
m(
'button',
{
onclick: function () {
count++;
},
},
count + ' clicks'
),
]);
},
};
m.mount(root, Hello);버튼에 onclick 이벤트를 정의했으며, 이 이벤트는 count 변수(상단에 선언됨)를 증가시킵니다. 또한 버튼 레이블에 해당 변수의 값을 렌더링하고 있습니다.
이제 버튼을 클릭하여 버튼의 레이블을 업데이트할 수 있습니다. m.mount를 사용했으므로 count 변수의 변경 사항을 HTML에 적용하기 위해 m.render를 수동으로 호출할 필요가 없습니다. Mithril.js가 자동으로 처리합니다.
성능이 궁금하다면 Mithril.js는 DOM에서 필요한 부분만 업데이트하므로 업데이트 렌더링 속도가 매우 빠릅니다. 따라서 위의 예에서 버튼을 클릭하면 버튼의 텍스트만 Mithril.js가 실제로 업데이트하는 DOM 부분입니다.
라이브 예제
var root = document.body;
var count = 0; // 변수 추가
var Hello = {
view: function () {
return m('main', [
m(
'h1',
{
class: 'title',
},
'My first app'
),
m(
'button',
{
onclick: function () {
count++;
},
},
count + ' clicks'
),
]);
},
};
m.mount(root, Hello);
라우팅
라우팅은 다중 화면 애플리케이션에서 화면 간 전환을 관리하는 것을 의미합니다.
클릭 카운터 앞에 나타나는 스플래시 페이지를 추가해 보겠습니다. 먼저 스플래시 페이지에 대한 컴포넌트를 만듭니다.
var Splash = {
view: function () {
return m('a', { href: '#!/hello' }, 'Enter!');
},
};보시다시피 이 컴포넌트는 단순히 #!/hello에 대한 링크를 렌더링합니다. #! 부분은 해시뱅(hashbang)이라고 하며, 싱글 페이지 애플리케이션에서 그 뒤에 오는 내용(/hello 부분)이 경로(route)임을 나타내는 데 사용되는 일반적인 규칙입니다.
이제 두 개 이상의 화면을 갖게 되었으므로 m.mount 대신 m.route를 사용합니다.
m.route(root, '/splash', {
'/splash': Splash,
'/hello': Hello,
});m.route 함수는 m.mount와 동일한 자동 다시 그리기 기능을 제공하며 URL 인식 기능도 활성화합니다. 즉, URL에서 #!을 감지하면 Mithril.js가 수행해야 할 작업을 알 수 있습니다.
root 바로 뒤의 "/splash"는 기본 경로를 의미합니다. 즉, URL의 해시뱅이 정의된 경로(예: /splash, /hello)를 가리키지 않으면 Mithril.js는 기본 경로로 리디렉션됩니다. 따라서 브라우저에서 페이지를 열고 URL이 https://localhost이면 https://localhost/#!/splash로 리디렉션됩니다.
또한 예상대로 스플래시 페이지의 링크를 클릭하면 앞에서 만든 클릭 카운터 화면으로 이동합니다. 이제 URL이 https://localhost/#!/hello를 가리키게 됩니다. 브라우저의 뒤로 및 앞으로 버튼을 사용하여 스플래시 페이지로 앞뒤로 탐색할 수 있습니다.
라이브 예제
var root = document.body;
var count = 0;
var Hello = {
view: function () {
return m('main', [
m(
'h1',
{
class: 'title',
},
'My first app'
),
m(
'button',
{
onclick: function () {
count++;
},
},
count + ' clicks'
),
]);
},
};
var Splash = {
view: function () {
return m(
'a',
{
href: '#!/hello',
},
'Enter!'
);
},
};
m.route(root, '/splash', {
'/splash': Splash,
'/hello': Hello,
});
XHR
기본적으로 XHR은 서버와 통신하는 기술입니다.
클릭 카운터를 변경하여 서버에 데이터를 저장하도록 해 보겠습니다. 서버로는 이 튜토리얼과 같은 간단한 앱을 위해 설계된 모의 REST API인 REM을 사용합니다.
먼저 m.request를 호출하는 함수를 만듭니다. url은 리소스를 나타내는 엔드포인트를 지정하고, method는 수행하는 작업 유형을 지정합니다(일반적으로 PUT 메서드는 upsert 작업을 수행합니다). body는 엔드포인트로 보내는 페이로드이고, withCredentials는 쿠키를 활성화하는 것을 의미합니다(REM API가 작동하는 데 필요합니다).
var count = 0;
var increment = function () {
m.request({
method: 'PUT',
url: '//mithril-rem.fly.dev/api/tutorial/1',
body: { count: count + 1 },
withCredentials: true,
}).then(function (data) {
count = parseInt(data.count);
});
};increment 함수를 호출하면 {count: 1} 객체를 /api/tutorial/1 엔드포인트에 upserts 합니다. 이 엔드포인트는 전송된 것과 동일한 count 값을 가진 객체를 반환합니다. count 변수는 요청이 완료된 후에만 업데이트되고, 서버의 응답 값으로 설정됩니다.
컴포넌트의 이벤트 핸들러를 count 변수를 직접 증가시키는 대신 increment 함수를 호출하도록 변경해 보겠습니다.
var Hello = {
view: function () {
return m('main', [
m('h1', { class: 'title' }, 'My first app'),
m('button', { onclick: increment }, count + ' clicks'),
]);
},
};이제 버튼을 클릭하면 카운터가 업데이트됩니다.
라이브 예제
var root = document.body;
var count = 0;
var increment = function () {
m.request({
method: 'PUT',
url: '//mithril-rem.fly.dev/api/tutorial/1',
body: { count: count + 1 },
withCredentials: true,
}).then(function (data) {
count = parseInt(data.count);
});
};
var Hello = {
view: function () {
return m('main', [
m(
'h1',
{
class: 'title',
},
'My first app'
),
m(
'button',
{
onclick: increment,
},
count + ' clicks'
),
]);
},
};
m.mount(root, Hello);
지금까지 HTML을 생성하고 업데이트하는 방법, 컴포넌트를 만드는 방법, 싱글 페이지 애플리케이션에서 라우팅과 XHR을 사용하여 서버와 통신하는 방법을 살펴보았습니다.
이제 실제 애플리케이션의 프런트엔드를 작성하기 시작하기에 충분할 것입니다. Mithril.js API의 기본 사항에 익숙해졌으므로 간단한 애플리케이션 튜토리얼을 확인하여 실제 애플리케이션을 구축하는 과정을 살펴보십시오.