preactjs - react의 subset, simple, lightweight library

Fast 3kB alternative to React with the same modern API

관련 자료

https://preactjs.com/

https://github.com/developit/preact/

https://www.slant.co/versus/10513/15409/~react_vs_preact

A different kind of library.

Closer to the Metal

Preact provides the thinnest possible Virtual DOM abstraction on top of the DOM. The web is a stable platform, it's time we stopped reimplementing it in the name of safety.

Preact is also a first-class citizen of the web platform. It diffs Virtual DOM against the DOM itself, registers real event handlers, and plays nicely with other libraries.

Small Size

Most UI frameworks are large enough to be the majority of an app's JavaScript size. Preact is different: it's small enough that your code is the largest part of your application.

That means less JavaScript to download, parse and execute - leaving more time for your code, so you can build an experience you define without fighting to keep a framework under control.

Big Performance

Preact is fast, and not just because of its size. It's one of the fastest Virtual DOM libraries out there, thanks to a simple and predictable diff implementation.

It even includes extra performance features like customizable update batching, optional async rendering, DOM recycling, and optimized event handling via Linked State.

Portable & Embeddable

Preact's tiny footprint means you can take the powerful Virtual DOM Component paradigm to new places it couldn't otherwise go.

Use Preact to build parts of an app without complex integration. Embed Preact into a widget and apply the same tools and techniques that you would to build a full app.

Instantly Productive

Lightweight is a lot more fun when you don't have to sacrifice productivity to get there. Preact gets you productive right away. It even has a few bonus features:

• props, state and context are passed to render()
• Use standard HTML attributes like class and for
• Works with React DevTools right out of the box

Ecosystem Compatible

Virtual DOM Components make it easy to share reusable things - everything from buttons to data providers. Preact's design means you can seamlessly use thousands of Components available in the React ecosystem.

Adding a simple preact-compat alias to your bundler provides a compatibility layer that enables even the most complex React components to be used in your application.

preact의 목표

Preact는 몇 가지 주요 목표를 달성하는 것을 목표로합니다.

성능 : 빨리고 효율적으로 렌더링
크기 : 작은 크기, (3.5kb 약) 경량
효율성 : 효과적인 메모리 사용 (재활용, GC 쓰레기 방지)
이해 : 코드베이스를 이해하는 데 몇 시간 이상 걸리지 않아야합니다.
호환성 : Preact는 반작용 API와 대부분 호환되도록하는 것을 목표로하고있다. preact-compat은 가능한 한 React와 많은 호환성을 달성하려고 시도합니다.

브라우저에서 NTLM으로 로그인 하기

NTLM.js 라이브러리의 핵심은 UserName과 Password를 Base64로 인코딩하여 헤더에 추가하여 보내는 로직이다. 

ntlm.js 파일의 "Msg.prototype.toBase64 = function()" 통해서 인코딩하는 로직으로 확인할 수 있으며 "setCredentials"와 "authenticate"를 통해서 사용하면 된다.

Usage

Ntlm.setCredentials('domain', 'username', 'password');
var url = 'http://myserver.com/secret.txt';

if (Ntlm.authenticate(url)) {
    var request = new XMLHttpRequest();
    request.open('GET', url, false);
    request.send(null);
    console.log(request.responseText);
    // => My super secret message stored on server.
}

Setup

On the server side, the following CORS HTTP Response headers are required:

• Access-Control-Allow-Headers: Authorization
• Access-Control-Allow-Methods: GET, OPTIONS
• Access-Control-Allow-Origin: *
• Access-Control-Expose-Headers: WWW-Authenticate

isArray

 자바스크립트를 개발하다가 보면 객체를 반별할 때 넘어온 객체가 일반적인 객체인지 배열인지를 판단하여 다르게 수행해야 할 때가 있다. 다음과 같은 코드로 알아내 보도록 해보자.

[코드1] 잘못된 방법으로 Array 인지 판단

 위 코드를 의도한 바와 다르게 판단하고 있다. 그래서 아래와 같이 Array객체에 추가 프로퍼티를 추가해서 확인하는 코드를 작성 하였다.

 위와 같이 웹 페이지에서 추가하여 실행하면 정상적으로 판단을 할 것이다.

HTMl에서 Console, Html Element, jQuery Dialog를 통해 로그 보여주는 모듈을 만들었습니다.

(TypeScript 소스 포함)

예제 파일

javascript_Log.rar

Default.html을 실행하면 실행 화면을 볼 수 있습니다.

실행 화면.

값이 인자에 따라 Html Element, Console, jQuery Dialog로 보여 주도록 했으며

마지막 show()를 호출할 때 보여 주도록 되어 있습니다.

<script>
    $(function () {
        var log = new Af.LogWrite.Log('info', 'htmlTag|console|messageDialog', undefined);    //htmlTag|console|messageDialog
        //var log = new Af.LogWrite.Log('error', 'htmlTag');
        log.write('test #1');
        log.write('test #2');
        log.write('test #3');
                
        log.show();
    });
</script>

내부적으로는 

Factory를 만들어서 Console, Element, Dialog를 사용하는 클래스를 반환하도록 하였습니다.

더 추가하거나 개선해야 하는 부분은

Mode(warning, info, error, ..)에 따른 행동과 서버로 로그 정보를 보내주는 기능을 LogWriter를 상속받아 구현하는 것으로 방향을 잡을 수 있습니다.

그리고 RequireJS를 통해서 동적으로 해당 클래스를 불러 오도록 Refactoring 진행하는것도 남았습니다.

Javascript Link를 SkyDrive의 OneNote를 통해서 공유 하도록 하겠습니다.

OneNote Link : Javascript Link 공유(새창 링크)

RequireJS를 사용하여 MVC App 만들기

RequireJS : http://requirejs.org/

원문 : http://verekia.com/requirejs/build-simple-client-side-mvc-app-require-js

한글 : http://zziuni.pe.kr/zziuni/587

RequireJS는 

간단하게 한문장으로 설명하자면 "모듈화와 동적 로딩을 지원하는 프레임웍"입니다.

여기에서 모둘화와 동적 로딩은 왜 이슈가 되는 것일까?

1. 모듈화
   
• - 문제점

1. .서로 호환되는 표준 라이브러리가 없다.
2. .데이터베이스에 연결할 수 있는 표준 인터페이스가 없다. - Server side
3. .다른 모듈을 삽입하는 표준적인 방법이 없다.
4. .코드를 패키징해서 배포하고 설치하는 방법이 필요하다.
5. .의존성 문제까지 해결하는 공통 패키지 모듈 저장소가 필요하다.
   
   
• - 해결책은?  -> 모듈화가 답

1. 동적로딩
• - 문제점
1. 하나의 HTML 파일에서 용량이 많고 여러가지 Library를 로딩 하는 시간이 많이 갈려 최초 실행 진입이 늦다.
   
   
• - 해결책
1. 동적으로 필요한 js파일을 로딩하여 최초 실행 진입을 빠르게 한다.
   위 방법은 IE 옛날 버전에서는 상당한 속도 향상을 기대할 수 있지만 최신 브라우저에서는 성능 향상 별로 없다.

위 문제점을 해결하기 위하여 RequireJS 프레임웍이 개발되었다.

그렇지만 RequireJS는 다른 많은 기능들을 함께 제공하고 있다.

(이 기능들에 대해서는 차차 알아 가도록 하겠다.)

RequireJS 링크 : http://requirejs.org/

----------------------------------------------------------------------------------------

위 사항은 RequireJS를 살펴 보면서 개인적으로 알아보고 느꼈던 사항에 대해서 한정됨을 알려 드리며 보다 자세한 사항을 알아 보려면 밑의 "자세한 링크"를 따라가 보시면 보다 많고 정확한 정보를 알 수 있을 것입니다.

자세한 링크

- http://helloworld.naver.com/helloworld/12864