Home » javascript

javascript

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

자바스크립트 배열의 정렬

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() 메소드는 비교 함수를 받긴하므로, 정수 크기별로 비교하려면, 다음과 같이 각 값을 정수형으로 계산한 결과를 던져주는 비교함수를 넣어준다.… 더 보기 »자바스크립트 배열의 정렬

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

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

mithril 관련 글

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

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

자바스크립트의 프로토타입에 대해

객체지향 프로그래밍 언어하면 떠올리는 단어가 바로 “클래스”이고, 실제로 대부분의 객체 지향 성격을 갖는 언어들은 대부분 클래스를 지원한다. 그런데 자바스크립트는 클래스가 아닌 프로토타입 기반의 OOP를 사용한다. 오늘은 이 프로토타입에 대하여 살펴보도록 하겠다.

더 보기 »자바스크립트의 프로토타입에 대해

Javacript – constructor

constructor Object.prototype.constructor constructor는 특정 객체 인스턴스를 생성한 함수 객체를 리턴한다. 나역시 prototype이니, constructor니 하는 것이 보이는 것이 그리 탐탁치는 않지만, 객체 인스턴스를 대량으로 생성해야 하는 상황이라면 이에 대한 기본 지식을 조금 알고 있는 것이 여러 모로 도움이 될 수 있다. var o = {}; o.constructor === Object; // true var a = []; a.constructor === Array; // true var n = new Number(3); n.constructor === Number; // true 컨스트럭터와 프로토타입 다음은 매우 평이한 컨스트럭터 예제이다. 객체가 새롭게 호출되면, 객체는 name이라는… 더 보기 »Javacript – constructor

LiveScript + NodeJS

back call

livescript는 자바스크립트로 컴파일되는 스크립트 언어로, 그 문법적 특징이 하스켈
의 것을 많이 참고하고 있다. 예를 들면 괄호없이 함수를 호출한다거나, 함수 파라미
터간의 컴마를 생략할 수 있다거나 하는 것들이 있다.
한 때 흥미삼아서 조금 만져보다가 관뒀었는데, 갑자기 모 사이트에서 NodeJS 튜토리얼을 몇 개 따라해보려다가1 생각이나서 그 사이트의 튜토리얼 코드들을 라이브스크립트로 코딩해봤더니 이거 썩 괜찮더라.
특히 화살표(->)를 이용한 익명함수 정의 문법2을 이용해서 함수를 인자로 전달하거나 함수가 함수를 리턴하는 것을 좀 더 간단하게 표기할 수 있게 한다.
예를 들어 이벤트핸들러를 등록하는 코드를 생각해보자.

var xhr = new XMLHttpRequest();
...
xhr.addEventListenser('onload', function(complete){
    console.log(complete.target.responseText);
});

더 보기 »LiveScript + NodeJS

오일러 프로젝트 009

둘레의 길이가 1000이고 각 변의 길이가 자연수인 직각삼각형 찾기 세 자연수 a, b, c 가 피타고라스 정리 를 만족하면 피타고라스 수라고 부릅니다 (여기서 ). 예를 들면 이므로 3, 4, 5는 피타고라스 수입니다. a + b + c = 1000 인 피타고라스 수 a, b, c는 한 가지 뿐입니다. 이 때, a × b × c 는 얼마입니까? 삼각형의 세 변의 길이를 짧은 것 부터 a, b, c 라하자. ( ) 이 때 a 가 가장 커질 수 있는 경우는 ,… 더 보기 »오일러 프로젝트 009