LS에서 함수는 일반 문법 편에서 잠깐 언급했듯이 화살표를 써서 간단히 정의할 수 있다. 이 함수 표현에서 중요한 점 두 가지는 첫 째 우변은 하나 이상의 표현식이라는 점과 표현식이 순서대로 나열되는 경우 맨 마지막 표현식의 결과가 자동으로 리턴된다는 것이다. 함수 LS는 함수형 프로그래밍 언어의 스타일을 많이 도입했다고 하였다. 비록 LS가 진짜 순수한 함수형 언어는 아니지만, 함수형 언어의 스타일을 도입한다는 것은 LS내의 함수라는 것은 가급적 아래와 같은 특징을 갖도록 디자인되어야 한다는 것이다. 순수성 : 함수의 결과값이 순수하게 파라미터에만 의존할 것. 따라서 입력된… 더 보기 »LiveScript 살펴보기 – 03 함수
LiveScript(이하LS)는 자바스크립트로 컴파일되는 스크립트 언어로 함수형 언어의 스타일과 기능을 많이 도입하여 간결하고 불필요한 보일러 플레이트를 최대한 배제한 코드를 작성할 수 있는 언어이다. 커피스크립트의 간접적인 방언이며 (창시자가 역시 커피스크립트를 만든 사람이다.) 객체 지향 및 절차 지향적인 코드를 작성함에 있어서도 많은 잇점을 누릴 수 있는 언어이다.
더 보기 »LiveScript 살펴보기 – 01 : 기본 문법에 대해
mithril에서 비동기 통신을 사용하여 서버로부터 데이터를 받아와서 처리하는 방법에 대하여 알아보자
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
mithril 프레임 워크를 사용해서 간단한 Todo 앱을 만들어 보겠습니다. 입력필드와 Add버튼이 있어서, 할일을 입력하고 Add 버튼을 클릭하면 새 할일이 생성됩니다. 할일들은 목록으로 표시되며, 각각의 할일은 체크 박스를 포함합니다. 체크박스에 체크하면 완료한 항목이 되어 취소선이 그어지게 됩니다. 앱을 크게 세 개의 컴포넌트로 구성하고자 합니다. App – 메인 앱 컴포넌트로 할일의 배열과 새 일의 제목이 될 텍스트 값을 가지고 있습니다. Inputs – 입력 필드 부분을 표현합니다. Lists – 할일 목록 부분을 표현합니다. 먼저 개별 작업을 표현할 클래스를 정의합니다. 제목과 완료 여부 정도만… 더 보기 »예제 – Todo 앱 만들어보기
mithril 앱은 기본적으로 가상 DOM을 사용하여 웹페이지 상의 UI를 생성합니다. 기본적으로 m.render() 함수를 사용해서 페이지 내의 DOM Element 내에 어떤 UI를 그려내거나, m.mount()를 사용해서 해당 DOM Element가 가상 DOM으로 구성되는 UI를 관리할 수 있도록 합니다. 이 두 함수는 UI를 구성하는 방법으로 사용되지만, 그 기능이나 용도가 조금 다릅니다.
javascrip는 개인적으로 참 마음에 안드는 부분이 많은데, 그 중에서도 배열의 sort() 메소드는 좀 좌절스러운 것이… a = [0 to 10].map -> parseInt Math.random! * 100 # [ 74, 7, 45, 41, 43, 85, 84, 66, 41, 91 ] a.sort! # [ 41, 41, 43, 45, 66, 7, 74, 84, 85, 91 ] 숫자로 된 배열을 정렬할 때도 사전식으로 비교해서 어이없는 결과를 만들어낸다…. sort() 메소드는 비교 함수를 받긴하므로, 정수 크기별로 비교하려면, 다음과 같이 각 값을 정수형으로 계산한 결과를 던져주는 비교함수를 넣어준다.… 더 보기 »자바스크립트 배열의 정렬
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
좀 뒤늦게 jquery 기본 사용법(?)에 대해서 정리. 처음에는 JS문법으로 예제를 썼지만, 뒤로 갈 수록 LS문법을 씁니다.(괄호라든지 괄호라든지 괄호때문에…) jQuery Object jQuery 객체는 DOM 요소(단일요소 혹은 집합)에 대해 $()를 이용하여 생성한 객체를 의미한다. 이는 내부적으로 DOM 요소를 참조하면서 jQuery에 의해 제공되는 공통 API를 적용받게 된다. 속성들 .attr() 메소드는 getter/setter로 동작하며, 해당 DOM요소의 속성을 얻거나 변경할 수 있다. $('a').attr('href', 'allMyHrefsAreTheSameNow.html'); $('a').attr({ title: 'all titles are the same too!', href: 'somethingnew.html' }); $('a').attr('href'); //=> 첫 A 요소의 'href' 값을 리턴한다. 요소 선택 요소… 더 보기 »jquery 기본