콘텐츠로 건너뛰기
Home » mithril

mithril

(연재) m.route – 단일페이지 애플리케이션을 위한 라우팅 – Mithril

mithril은 단일 페이지 애플리케이션(Single Page Application, SPA)을 만들 수 있게 해주는 시스템으로 개별 페이지에 대한 북마크 및 브라우저의 히스토리 메카니즘을 그대로 사용할 수 있게도 해준다. m.route()는 라우팅 시스템을 총괄하는 함수로 , 현재 페이지에서 사용가능한 URL을 정의하고, 특정 URL로 리다이렉팅하거나 현재 경로를 리턴하는 등의 기능을 수행한다. m.route(rootElement, defaultRoute, routes) – 각 루트를 정의하고 루트의 URL 패턴별 대응하는 앱을 지정한다. m.route(path) – 특정한 경로로 리다이렉트한다. m.route.set(path)으로 변경되었다. m.route() – 현재 경로를 리턴하는 함수 m.route.get()으로 변경 라우팅 규칙 정의 단일 페이지 애플리케이션에서는 단일 페이지를… 더 보기 »(연재) m.route – 단일페이지 애플리케이션을 위한 라우팅 – Mithril

예제 – Todo 앱 만들어보기

mithril 프레임 워크를 사용해서 간단한 Todo 앱을 만들어 보겠습니다. 입력필드와 Add버튼이 있어서, 할일을 입력하고 Add 버튼을 클릭하면 새 할일이 생성됩니다. 할일들은 목록으로 표시되며, 각각의 할일은 체크 박스를 포함합니다. 체크박스에 체크하면 완료한 항목이 되어 취소선이 그어지게 됩니다. 앱을 크게 세 개의 컴포넌트로 구성하고자 합니다. App – 메인 앱 컴포넌트로 할일의 배열과 새 일의 제목이 될 텍스트 값을 가지고 있습니다. Inputs – 입력 필드 부분을 표현합니다. Lists – 할일 목록 부분을 표현합니다. 먼저 개별 작업을 표현할 클래스를 정의합니다. 제목과 완료 여부 정도만… 더 보기 »예제 – Todo 앱 만들어보기

컴포넌트와 가상노드 – mithril

mithril 앱은 기본적으로 가상 DOM을 사용하여 웹페이지 상의 UI를 생성합니다. 기본적으로 m.render() 함수를 사용해서 페이지 내의 DOM Element 내에 어떤 UI를 그려내거나, m.mount()를 사용해서 해당 DOM Element가 가상 DOM으로 구성되는 UI를 관리할 수 있도록 합니다. 이 두 함수는 UI를 구성하는 방법으로 사용되지만, 그 기능이나 용도가 조금 다릅니다.

더 보기 »컴포넌트와 가상노드 – mithril

(연재) m.render – 가상 DOM 렌더링하기 – Mithril

m.render vs m.mount 미스릴은 virtual dom node를 생성하고, 이 가상 노드를 문서내의 특정 요소에 렌더링하거나 마운트한다. 가상 노드를 생성하는 컴포넌트를 작성하고, 해당 컴포넌트의 내용을 화면에 표시하기 위해서는 이미 존재하는 HTML 문서 내의 특정 DOM의 내부를 가상 노드로 채워주게 된다. 이 때 사용하는 함수로 m.render() 와 m.mount()가 있다. m.render()는 1회성으로 가상 노드를 렌더링하며, m.mount()는 특정 DOM에 가상 노드 컴포넌트를 마운트하는데, mithril은 마운트된 DOM 내에서 발생하는 이벤트를 체크하여 내부적으로 m.render()를 다시 호출해서 이벤트에 의해서 변경된 데이터가 UI에 반영될 수 있도록 자동으로 다시… 더 보기 »(연재) m.render – 가상 DOM 렌더링하기 – Mithril

(Javascript | mithril ) m.component – 앱을 컴포넌트화하기

본격 mithril 탐구. 가독성을 위해서 본 문서에서는 LiveScript로 예제를 작성합니다.

mithril 관련 글

  1. mithril 앱의 기본 구성 및 m()
  2. m.render – 가상 DOM 렌더링하기
  3. m.mount – mithril을 이용한 양방향 바인딩 & 템플릿 렌더링
  4. m.prop 양방향 바인딩을 위한 데이터 래퍼
  5. m.withAttr 양방향 바인딩을 위한 이벤트 매퍼
  6. * m.component – mithril 앱을 컴포넌트화하기
  7. Todo 앱
  8. m.route – 단일페이지 애플리케이션 및 라우팅 규칙
  9. m.request – 서버 API와 통신하기

m.component는 controller + view로 이루어진 컴포넌트를 다른 컴포넌트 내에 임베드할 수 있게 하는 기능이다. 페이지마다 반복되거나, 페이지 내에서 반복되는 요소에 대해서 컴포넌트를 작성하여 재사용한다.
컴포넌트는 그 자체로 하나의 인스턴스가 아니라 컴포넌트를 사용할 때 그 사본이 생성되므로, 각각의 컴포넌트 인스턴스 간의 컨트롤러는 이벤트나 데이터가 간섭을 일으키지 않는다.
더 보기 »(Javascript | mithril ) m.component – 앱을 컴포넌트화하기

정규식을 사용한 비밀번호 유효성 검사

정규식의 그룹 패턴 중에 Look-around라는 게 있는데, 특정 패턴의 앞/뒤로 만족하는 패턴이 있는 경우에만 해당 패턴을 만족시키는 케이스를 말한다. 예를 들어 apple(?=s)는 apples의 apple만 매칭되고 apple이나 appled는 매칭되지 않도록 하는 것이다. 이를 활용하여 비밀번호 유효성 검사에 정규식을 활용할 수 있다. 예를 들어,

  1. 6자리 이상
  2. 1개 이상의 영어 대문자
  3. 1개 이상의 숫자

라는 조건을 만족해야 한다면 저 전진 검색 패턴을 활용하면 된다.
더 보기 »정규식을 사용한 비밀번호 유효성 검사

초경량 MVC 자바스크립트 프레임워크 Mithril

Mithril

Mithril은 경량 웹 프론트엔드용 MVC 프레임워크이다. 이 분야에서 가장 인기있는 프레임워크 중 하나인 AngularJS의 경우 JS소스코드의 용량도 만만치 않고, 템플릿을 컴파일하여 렌더링하는 초기 로딩 시간이 상당한데, Mithril의 경우 gzipped로 압축 전송되는 용량이 4kb에 불과하며, HTML마크업상에서 템플릿을 컴파일하지 않고 스크립트 레벨에서 프론트엔드 객체를 생성하거나, 엘레멘트를 그냥 가져오는 방식이라 동작 속도 또한 매우 빠르다.
더 보기 »초경량 MVC 자바스크립트 프레임워크 Mithril