JavaScript 모듈화 및 Lazy Loading 으로 쓰이는 기술, AMD에 대해 간단히 알아보자


동적로딩(Dynamic Loading, Lazy Loading)

  • HTML 파일 로딩시에 <script> 태그내의 내용이 모두 로딩되기전까지 html 이 파싱되지 않고 기다리고 있어서 페이지의 랜더링이 늦어진다.
    • 꼼수로 <body> 태그의 마지막에 <script> 태그를 배치하여 UI 랜더링이후 <script> 내용을 읽는 방법이 있다.
  • 동적로딩은 필요할 경우에만 <script> 내용을 동적으로 로딩하는 방법으로, Eclipse 의 plug-in 시스템과 비슷한 맥락의 방법이다.
    • 동적로딩은 여러 방법이 있지만 <script> 태그를 동적으로 만들어서 헤더태그의 제일 마지막에 삽입하는 방법이 많이 쓰인다.
  • 예제
    • <!-- index.html --!>
      <html>
       <head>
              <title>Test</title>
              <script src="js/main.js"></script>
          </head>
          <body>
              <button onclick="test()">Lazy Loading</button>
          </body>
      </html>
      
    • // main.js
      function test() {
          var scriptElement = document.createElement('script');
          scriptElement.type = 'text/javascript';
          scriptElement.src = 'js/lazy.js';
          scriptElement.onload = function(script) {
              console.log('script lodaed!');
          };
          document.getElementsByTagName('head')[0].appendChild(scriptElement);
      }
      
    • // lazy.js
      function lazy() {
          alert('lazy');
      }
      
    • 실행결과
      • Lazy Loading 버튼을 클릭하기 전에는 lazy.js 가 로딩되지 않았지만, 버튼을 클릭하면 lazy.js 가 로딩이된다.


History

  • JavaScript 모듈화에 대한 명세를 정의하는 표준화 정의 그룹으로 CommonJS 그룹이 있고, 여기서 신설된 AMD 라는 그룹이 새로 생김
  • JavaScript 모듈화의 목표
    • 모듈화
      • 외부에서 쉽게 사용가능
    • Lazy Loading
      • 필요할때에 로딩 가능
    • JavaScript 에 대한 모듈정의 
      • 스코프(Scope): 모든 모듈은 자신만의 독립적인 실행 영역이 있어야 한다.
      • 정의(Definition): 모듈 정의는 exports 객체나 define 함수를 이용
      • 사용(Usage): 모듈 사용은 require 함수를 이용


CommonJS(CJS)

  • http://www.commonjs.org/
  • exports
    • 모듈 정의
  • require()
    • 모듈 사용
  • 예제
    • //--------------------------------------------- 
      // test.js
      // export 할 모듈 정의
      function test(){
          this.first = function(){
              console.log('first');
          }
          this.last = function(){
              console.log('last');
          }
      }
      // 모듈 export
      exports.test = test;
      
      //--------------------------------------------- 
      // main.js
      var test = require('./test').test;
      var module = new test(); 
      module.first(); // 'first'
      module.last(); // 'last'
      


AMD

  • https://github.com/amdjs/amdjs-api/blob/master/AMD.md
  • define()
    • 모듈 정의
    • CommonJS 의 exports 와 같은 개념
    • Signature
      • define(
            module_id /*optional*/, 
            [dependencies] /*optional*/, 
            definition function /*function for instantiating the module or object*/
        );
        
    • module_id
      • 모듈 이름
    • dependencies
      • 모듈이 갖는 의존성  모듈(먼저 로드되어야 하는 모듈)의 배열
      • 기술된 모듈은 definition function 의 인자로 순서대로 전달된다.
      • 예제
        • //--------------------------------------------- 
          // test.js
          // 모듈정의
          define([
                  'js/jquery.js', // 의존성을 가지는 모듈들을 기술
                  'js/my.js'
              ], function(jQuery, my) { // 의존성을 가지는 모듈들이 순서대로 매개변수로 담김
                  // 의존 모듈들이 모두 로딩 완료되면 함수를 실행
                  function first() {
                      console.log('first');
                  }
                  function last() {
                      console.log('last');
                  }
                  return {
                      first: first,
                      last: last
                  };
              }
          );
          
    • require()
      • 모듈사용
      • 예제
        • //--------------------------------------------- 
          // main.js
          require([
                  'js/test.js'
              ], function(test) {
                  test.first(); // 'first'
                  test.last();  // 'last'
              }
          );
          


RequiredJS

  • RequireJS implements the AMD API
  • 지원하는 프레임웍
    • Dojo (1.7), MooTools (2.0), Firebug (1.8), jQuery (1.7).
  • Requried JS
    • define과 require의 차이점은?
      • define 은 모듈을 등록하여 export 할 경우 사용
      • require 는 기존 모듈을 사용하여 비지니스 로직을 구성할 경우 사용
        • require 함수에서는 새로운 모듈구현을 return 할수 없다.
      • http://stackoverflow.com/questions/9507606/when-to-use-require-and-when-to-use-define
    • define에서 기술된 모듈이 순서가 중요한 경우(의존성 관계)
      • define 에 기술된 모듈은 asynchronous 하게 병렬적으로 로딩되는데 AMD 를 지원한다면 자체적으로 관련 모듈에 대한 dependecy 에 대한 모듈이 로딩되고 factroy 함수가 실행된다.
      • define 에 기술된 모듈이 AMD 를 지원하지 않고 순서를 갖는 경우, 가령 define dependency 에 jquery ui, jquery 가 순서가 다르게 되있어 로딩순서가 중요한 경우 shim 설정으로 모듈간의 디펜던시를 기술

References

  • GitHub AMD Document
    • https://github.com/amdjs/amdjs-api/blob/master/AMD.md
  • JavaScript 표준을 위한 움직임 CommonJS와 AMD
    • http://helloworld.naver.com/helloworld/textyle/12864
  • RequireJS - AMD의 이해와 개발
    • http://helloworld.naver.com/helloworld/591319
  • Writing Modular JavaScript With AMD, CommonJS & ES Harmony
    • http://addyosmani.com/writing-modular-js/
  • Stackoverflow: Relation between CommonJS, AMD and RequireJS?
    • http://stackoverflow.com/questions/16521471/relation-between-commonjs-amd-and-requirejs
  • AMD: The Definitive Source
    • http://www.sitepen.com/blog/2012/06/25/amd-the-definitive-source/


Posted by leechwin

댓글을 달아 주세요

WIDL (Web IDL) 파일을 xml 포멧의 widlprocxml 파일로 변환하는 방법에 대해 알아보자.


  • widl 파일 작성
  • widlproc 파일 빌드
    • widl 파일을 widlprocxml 형식으로 변환하려면 widlproc 이라는 Generator 를 사용해야 되는데 다음의 Github 소스를 받아 빌드를 한다.
      • Github Project - widlproc
        • 리눅스에서 위의 프로젝트를 다운로드한후 make 명령을 수행하면 widlproc 이라는 바이너리 파일이 생성된다.
  • widlprocxml 파일로 변환
    • widlproc 을 이용하여 다음과 같은 명령을 수행하면 widlprocxml 을 얻을 수 있다.
      • $ widlproc source.widl > source.widlprocxml


'Web' 카테고리의 다른 글

Gravatar  (0) 2015.08.26
Asynchronous Module Definition (AMD)  (0) 2015.02.27
[WIDLPROC] widl 을 widlprocxml 파일로 변환하기  (0) 2015.01.15
Concurrency Programming of Web  (0) 2014.11.27
[Chrome] Your profile could not be opened correctly  (0) 2014.10.24
[Browser] Bookmarklet  (0) 2014.08.23
Posted by leechwin

댓글을 달아 주세요

Concurrency Programming of Web 에 관한 slide


'Web' 카테고리의 다른 글

Asynchronous Module Definition (AMD)  (0) 2015.02.27
[WIDLPROC] widl 을 widlprocxml 파일로 변환하기  (0) 2015.01.15
Concurrency Programming of Web  (0) 2014.11.27
[Chrome] Your profile could not be opened correctly  (0) 2014.10.24
[Browser] Bookmarklet  (0) 2014.08.23
Browser Object Model  (0) 2014.02.03
Posted by leechwin

댓글을 달아 주세요

크롬 브라우져에서 "Your profile could not be opened correctly." 라는 메시지가 발생하는 경우가 있다.


원인은 크롬의 Profile Data 가 잘못되어서 이파일을 삭제하면 해결이 된다.


운영체제별 다음 파일을 지우면된다.


  • Mac OSX
    • cd /Users/{user}/Library/Application Support/Google/Chrome/Default
    •  rm -rf History*; rm -rf Web\ Data;
  • Windows 7
    • cd C:\Users\{username}\AppData\Local\Google\Chrome\User Data\Default\
    • Delete the file named “Web Data”
  • Linux
    • cd ~/.config/google-chrome/Default
    • rm -rf Web\ Data;


Reference: http://www.fourleaftechnology.com/index.php/General/google-chrome-profile-could-not-be-opened-correctly-error.html

Posted by leechwin

댓글을 달아 주세요

[Browser] Bookmarklet

Web 2014.08.23 00:35

브라우져의 북마크를 응용하는 기술인 Bookmarklet 에 대해 알아보도록 하자.


  • Bookmarklet
    • 북마크(Bookmark)와 애플릿(Applet)의 합성어.
    • 웹브라우저의 북마크를 활용한 작은 어플리케이션
    • 브라우져가 로딩된이후 북마크를 클릭하여 내부 자바스크립트가 동작는 플로우를 가진다.
  • Usage
    • 로딩된 브라우져의 정보를 외부 URL 의 Query 로 날려서 RestAPI 를 호출하거나 Dictionary lookup 등으로 영어사전등으로 활용가능하다.
    • 로딩된 DOM 등의 정보를 얻거나 수정하여 현재 배경화면 색등을 자신의 Theme 으로 변환가능하다.
    • Browser 의 window, document 등의 객체 정보와 외부 REST API 등을 활용한 다양한 방면으로 응용가능하다.


  • Basic
    • Previous knowledge for Bookmarklet
      • 다음과 같은 코드를 Browser 에서는 URL 에 "javascript" prefix 문자를 가진 contents 에 대해서는 자체적으로 파싱해서 처리
      •  <a href="javascript:alert('this is not uri');">link</a>

        Browser에서는 Bookmarklet 의 URL 정보에 기술된 Bookmarklet script 를 page 로드가 완료된뒤에 실행

      • Anonymous function 을 사용하여 namespace 충돌을 방지한다.

    • Simple Bookmarklet

      • 북마크를 클릭하였을경우 현재 브라우져의 엔진정보를 확인하는 북마클릿을 만들어보자.
        • Bookmarklet 생성 및 URI 수정
          • 임의의 북마크를 생성
          • 생성된 북마크를 수정하여 URL 에 다음과 같이 입력

          •  javascript:(function (){ alert(navigator.product);})();  

  • Advanced
    • External javascript library 삽입
      • 현재로딩된 페이지에 새로운 javascript 를 주입하는 기법
      • 기존 code symbol 과의 conflict 에 주의
      • 과한 용량의 파일을 주입하면 페이지가 멈출 수 있다
      •  javascript: (function () {

            var jsCode = document.createElement('script');
            jsCode.setAttribute('src', 'http://path/to/external/file.js');                 
          document.body.appendChild(jsCode);
         }());
    • HTML, Javascript 라이브러리나 REST 라이브러리 등의 테스트에 사용가능
      • Bookmarklet 만 배포 후 외부 URL 로 REST API 에 인자를 전달하여 테스트 가능
      • Cross-browser Test 가능
    • Validator 연동가능
    • 사용자 정의 Theme 가능
      • 사용자가 원하는 Theme 정의 가능
      •  javascript:void(document.body.style.background = 'black');


  • Practice
    • 구글검색기
      •  javascript:(function() {

        function se(d) {
         return d.selection ? d.selection.createRange().text : d.getSelection()
        }
        s = se(document);
        for (i=0; i<frames.length && !s; i++) s = se(frames[i].document);
        if (!s || s=='') s = prompt('Enter%20search%20terms%20for%20Google','');
        open('https://www.google.co.kr' + (s ? '#newwindow=1&q=' + encodeURIComponent(s) : '')).focus();
        })();
    • 메모장
      • Twitter 에 Mike Francis 가 bookmarklet code snippet 을 올린것이 화재
      • https://twitter.com/_mikefrancis/status/469788991668383744
      •  data:text/html, <body contenteditable style="font: 2rem/1.5 monospace; max-width:60rem; margin:0 auto; padding:4rem; ">

    • 게임
      • http://kathack.com/
      •  javascript:var i,s,ss=['http://kathack.com/js/kh.js','http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'];for(i=0;i!=ss.length;i++){s=document.createElement('script');s.src=ss[i];document.body.appendChild(s);}void(0);

    • The Printliminator
      • http://css-tricks.com/examples/ThePrintliminator/



'Web' 카테고리의 다른 글

Concurrency Programming of Web  (0) 2014.11.27
[Chrome] Your profile could not be opened correctly  (0) 2014.10.24
[Browser] Bookmarklet  (0) 2014.08.23
Browser Object Model  (0) 2014.02.03
[Browserling] Cross Browser Testing Service  (0) 2013.12.10
[Brackets] Open source code editor for the web  (2) 2013.12.10
Posted by leechwin

댓글을 달아 주세요

Browser Object Model

Web 2014.02.03 22:40

 Browser Object Model (BOM) 에 관한 slide


'Web' 카테고리의 다른 글

[Chrome] Your profile could not be opened correctly  (0) 2014.10.24
[Browser] Bookmarklet  (0) 2014.08.23
Browser Object Model  (0) 2014.02.03
[Browserling] Cross Browser Testing Service  (0) 2013.12.10
[Brackets] Open source code editor for the web  (2) 2013.12.10
Web Dev Tools Review  (0) 2013.12.10
Posted by leechwin

댓글을 달아 주세요

Web Site 나 Web App 등의  Cross Browser Testing 을 지원하는 Browserling 이라는 서비스를 소개한다.

Browserling 사이트에 접속하면 다음과 같이 캐리커쳐같은 분위기의 사이트가 나타난다.



 URL 란에 자신이 테스트하고 싶은 URL 을 입력하고, Test 하고싶은 Browser 와 버전을 선택하고 Run 을 수행하면 다음과 같이 선택한 Browser 위에 URL 이 랜더링되어 나타난다.

 정확히는 자신의 Browser 의 Canvas 위에 Browserling 에서 생성한 VM 과 Browser 가 나타난 것이다.

 우측의 브라우져모양을 클릭하면 현재 상태에서 Browser 와 버전을 바꿀수가 있다.


 해상도가 쓰여진 버튼을 누르면 현재 상태에서 해상도를 바꿀수가 있다.



보기에는 장난스러운 이 서비스도 나름 유료라서 무료로는 3분의 세션시간을 제공한다. 또한 ssh tunnels 등도 이용할 수 없다.



 자동화 테스트를 위한 testling-ci 도 제공을 하고 있어서 갖출것은 다 갖추고 있다.



Cross Browser Testing 로는 기본에 충실한 Service 로 보인다.


'Web' 카테고리의 다른 글

[Browser] Bookmarklet  (0) 2014.08.23
Browser Object Model  (0) 2014.02.03
[Browserling] Cross Browser Testing Service  (0) 2013.12.10
[Brackets] Open source code editor for the web  (2) 2013.12.10
Web Dev Tools Review  (0) 2013.12.10
[jsFiddle] Online 웹개발 및 공유 서비스  (1) 2013.03.14
Posted by leechwin

댓글을 달아 주세요

 Brackets 라는 Web 기술로 구현된 Code Editor 를 소개하려고 한다.


Brackets 은 Adobe 에서 관리하고 있는 Opensource 프로젝트이다.

Download site 에서 인스톨러를 다운받아 자신의 PC 에서 Code Editor 로 쓸 수도 있고, Web Page 에서 Editor 로 사용 할 수도 있다.


Code Editor 에서는 HTML, CSS, JavaScript 언어를 지원한다.



구성

  Brackets 은 전체적으로 다음과 같은 구성으로 분류된다.

  • Menu
  • Sidebar
  • Editor
  • Preview

Menu

  기본으로 File, Edit, View, Navigate, Debug, Help 메뉴로 나뉘며, Extensions 플러그인을 설치하면 추가로 메뉴가 추가될 수도 있다.

  • File
  •  
    • New File: 새로운 파일을 생성한다. 단 확장자까지도 입력해야한다.
      • html, javascript, css 파일에 대한 템플릿은 따로 존재하지 않지만, Extenstion 설치를 통하여 템플릿으로 부터 새로운 파일 생성이 가능하다.
    • Live Preview: 현재 프로젝트에 대한 Preview 를 크롬을 통해 보여준다.
    • Live Highlight: Editor 에서 커서가 위치되어있는 Tag를 Live Preview 에서 해당 태그 위치를 표시
    • Project Settings...: Live Preview Base URL 을 변경
    • Install Extension: 외부 Extenstion을 설치 할 수 있다.
  • Edit
  • View
  • Navigate
  • Debug
    • Show Developer Tools: 현재 Brackets 에 대한 Remote Inspector 를 실행한다.    
    • Reload Brackets: 현재 실행중인 Brackets 을 다시 실행한다.
    • New Brackets Windows: 새로운 창으로 Brackets 을 하나 더 실행한다.
    • Switch Languages: 다국어 지원
    • Show Performance Data: 현재 수행중인 프로젝트에 대한 퍼포먼스 수치를 보여준다.
    • Enable Node Debugger: Node 디버깅을 위한 옵션
    • Log Node State to Console: Node 현재 상태를 Browser 의 console 에 출력한다.
    • Restart Node: Node 를 재시작
  • Help


Sidebar

 Sidebar 는 Recent Files, Project Configuration, Resources Control 등에 따라 Contenxt Menu 가  나뉜다.

  • Recent Files
  • Project Configuration: 한번에 하나의 프로젝트만 열 수 있다.
  • Resources Control: Delete, Add, Import 등의 기능은 없어서 프로젝트 폴더에 원하는 Resource 를 Delete, Add 한 후 Brackets 를  F5 로 Sync 를 맞추어야 한다.


Editor

 Editor 에서는 HTML, CSS, Javascript 를 지원한다.

  • Code hint
    • HTML, CSS, Javascript 에 대해서 Code Asssit 와 같은 기능을 제공한다. 단축키는 Ctrl+Space 이다.
    • HTML: tags, attribute names and values
      •  
    • CSS: property names and values
    • Javascript: property names
  • Validation
    • Javascript Validator 로 JSLint 가 적용되어있으나, Extension 을 통해서, CSS, HTML Validator 를 추가가 가능하다.
  • Quick Edit
    • HTML Tag 에 대한 스타일이 CSS 파일에 정의되어 있으면, 해당 Tag 에서 단축키(Ctrl+E)로 HTML Editor 내에 CSS 파일의 해당 내용이 보여지며 수정도 가능하다.
    • JavaScript 에서는 해당 구현부분이 보여지며 수정도 가능하다.
    • CSS 에서는 Color 값에 대해서는 Color Picker 가 제공된다.
    • Image Preview 와 Pixel Guides 를 제공하여 CSS Sprite 등에 유용하게 픽셀을 계산할 수 있다.
  • Live highlight
  • HTML Editor 에서 Tag 를 클릭하면 해당 부분이 Live Preview 상에서 박스로 표현이 된다.
  • Live Preview
    • Editor 에 대한 실시간 Preview 로 Chrome Base 이다.
    • Brackets 의 우측 상단에 번개마크를 클릭하여서도 실행이 가능하다.
    • CSS 는 수정시 바로 Preview 에 반영되고, HTML, Javascript 는 Save 시에만 Preview 에 반영이 된다.

Extension

 Extension 은 외부의 플러그인을 추가 설치가능한 옵션으로 다음 URL 에 70여가지 이상의 많은 Extension 들이 구현되어 있다.

 - https://github.com/adobe/brackets/wiki/Brackets-Extensions

 

  • Menu > File > Install Extension > 에 해당 Extension 에 대한 URL 을 기술하고 Install 버튼을 누르면 된다.
  • Extension 으로 추가가능한 주요 항목들은 다음과 같다.
    • Snippets
    • Prefixr
    • Quick Markup
    • HTML Tempaltes
    • Auto-match pairs
    • Auto Formatter
    • TabToSpace
    • Beaufiy
    • Minifier
    • CSSLint
    • JSHint
    • W3CValidator
    • Annotate
    • Themes
    • Code folding
    • Hover Preview
    • Markdown Preview
    • etc..


Slideshare: http://www.slideshare.net/ChanghyunLee4/brackets-review



Posted by leechwin

댓글을 달아 주세요

  1. mariah 2013.05.13 19:18  댓글주소  수정/삭제  댓글쓰기

    heroku에 node 서비스 호스팅하는 법 공유해 주세요.

Web Dev Tools Review

Web 2013.12.10 11:19
  • Outline
    • Command-line
    • Terminal
    • Quick Start
    • Recorder
    • Editor
    • Chrome DevTools
    • Integration tools
    • Synchronized
    • Visual regression testing
    • Simulate real-network conditions
    • Live testing and Screenshots
    • Mobile Web


Posted by leechwin

댓글을 달아 주세요

온라인상에서 웹개발 및 테스트, 공유가 가능한 서비스가 있다.


바로 jsFiddle 이다.



단순한 회원가입 과정을 거치면 다음과 같은 화면이 나온다.



Create a new Fiddle 버튼을 누르면 자기만의 프로젝트를 하나 만들 수 있다.

  • 4개로 나뉜 에디터가 나타나고 각각 HTML, CSS, Javascript 를 입력 할 수 있고, Result 창에서는 결과를 볼 수 있다.
  • HTML 을 입력할때에는 HTML 태그를 비롯하여 META 태그, HEAD 태그, BODY 태그는 없어도 된다.
    • 창에 보이는 CSS, Javascript 에디터의 소스는 기본적으로 HTML 소스에 반영이 된다.
    • 외부 Javascript, CSS 소스는 좌측에 External Resources 버튼을 클릭하여 링크를 걸어줄 수 있다.



상단메뉴

  • Run
    • 현재 프로젝트를 실행하는 버튼으로 우측하단에 Result 화면에서 확인 할 수 있다.
  • Debug on Mobile
  • Save
    • 현재 프로젝트를 저장하여 다른사람과 공유 가능하다.
    • Save 를 하면  Update, Fork, Share 메뉴가 더 생긴다.
      • Update
        • 현재 프로젝트를 Update
      • Fork
        • 현재 프로젝트를 Fork
      • Base
        • Base 프로젝트로 이동
      • Share
        • 다른사람에게 현재 프로젝트를 공유가능
  • TidyUp
    • Editor 의 Indentation 을 정렬해주는 버튼
  • JSHint
    • Javascript Validation


좌측 네비게이션

  • jsFiddle Settings Sidebar Document
  • Frameworks & Extensions
    • jQuery, jQuery Mobile, YUI 등 다양한 외부 라이브러리를 적용한 프로젝트를 구성 할 수 있다.
    • onLoad, onDomready 등의 함수를 overloading 가능하다.
  • Fiddle Options
    • Title, Description
      • jsFiddle 에서 보여지는 Tilte bar, Description 을 수정 할 수 있다.
    • Normalized CSS
      • 기본 CSS 인 normalized.css 적용여부
    • Body Tag
      • body 에 class 등을 적용하는 등의 customizing 가능
    • DTD
      • HTML5, XHTML, HTML4 등의 DTD 설정
    • Freamwork <script> attribute
  • External Resources
    • 외부 Resources 의 URI 를 포함 할 수 있다.
  • Languages
    • 다음과 같이 다양한 웹언어지원
    • HTML, CSS, SCSS, JavaScript, Coffeescript, JavaScript 1.7
  • Ajax Requests
    • Ajax 를 통한 json 등의 시뮬레이션이 가능한 기능으로 보인다.
  • Example
    • 다양한 자바스크립트 라이브러리 예제를 제공한다.



Posted by leechwin

댓글을 달아 주세요

  1. mariah 2013.03.15 22:04  댓글주소  수정/삭제  댓글쓰기

    Koding.com 도 온라인 웹개발을 제공하는 서비스라고 하는데,
    리뷰 좀 올려 주세요~