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

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