콘텐츠로 건너뛰기
Home » LiveScript

LiveScript

LiveScript 살펴보기 – 03 함수

LS에서 함수는 일반 문법 편에서 잠깐 언급했듯이 화살표를 써서 간단히 정의할 수 있다. 이 함수 표현에서 중요한 점 두 가지는 첫 째 우변은 하나 이상의 표현식이라는 점과 표현식이 순서대로 나열되는 경우 맨 마지막 표현식의 결과가 자동으로 리턴된다는 것이다. 함수 LS는 함수형 프로그래밍 언어의 스타일을 많이 도입했다고 하였다. 비록 LS가 진짜 순수한 함수형 언어는 아니지만, 함수형 언어의 스타일을 도입한다는 것은 LS내의 함수라는 것은 가급적 아래와 같은 특징을 갖도록 디자인되어야 한다는 것이다. 순수성 : 함수의 결과값이 순수하게 파라미터에만 의존할 것. 따라서 입력된… 더 보기 »LiveScript 살펴보기 – 03 함수

LiveScript 살펴보기 – 02 연산자

이번 글에서는 LiveScript의 연산자에 대해서 살펴보겠다. 함수형 언어 스타일을 도입하면서 코드가 간결해지는 대신에 기본적인 사칙/비교 연산외의 여러 연산자들이 많이 사용된다. 연산자 기본적인 연산자는 JS와 동일하다. 단 모듈로 연산자가 추가되었다 (%%) -3 % 4 : -3 -3 %% 4 : 1 제곱연산자는 오른쪽 연관이며, 다른 단항 연산자보다 높은 우선순위를 가진다. ^ 와 ** 를 같이 쓸 수 있다. 그리고 증감연산자도 있다. (함수형 언어에서 증감 연산자는 가급적 안쓰는게 좋으며, LS 코드에서는 for 문도 순회의 개념이기 때문에 별로 쓸 일이 없다.) 비트연산 비트… 더 보기 »LiveScript 살펴보기 – 02 연산자

LiveScript 살펴보기 – 01 : 기본 문법에 대해

LiveScript(이하LS)는 자바스크립트로 컴파일되는 스크립트 언어로 함수형 언어의 스타일과 기능을 많이 도입하여 간결하고 불필요한 보일러 플레이트를 최대한 배제한 코드를 작성할 수 있는 언어이다. 커피스크립트의 간접적인 방언이며 (창시자가 역시 커피스크립트를 만든 사람이다.) 객체 지향 및 절차 지향적인 코드를 작성함에 있어서도 많은 잇점을 누릴 수 있는 언어이다.
더 보기 »LiveScript 살펴보기 – 01 : 기본 문법에 대해

(연재) 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 앱 만들어보기

(연재) 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 – 앱을 컴포넌트화하기