최근 ISOMORPHIC 이란 단어가 주변에서 많이 회자되기 시작했다.


출처: http://www.flashandmath.com/mathlets/discrete/graphtheory/graph4.html


왜 Isomorphic 일까?

Isomorphic은 그리스어 '동등equals’를 의미하는 'isos’와 '형태shape’를 의미하는 'morphic’이 합쳐진 합성어다. Isomorphism은 서로 다른 컨텍스트를 가진 동일한 개체를 설명한다. 개발쪽에서 이야기하는 문맥에서는 서버server와 클라이언트client를 말한다.
개발쪽에서 말하는 아이소몰픽(Isomorphic, [àisəmɔ́ːrfik]) 은 동일한 소스코드를 가지고 서버쪽과 클라이언트쪽에서 작성하는 형태를 지칭한다고 볼 수 있다. 이 용어는 주로 수학에서 사용되었지만 최근들어 웹 프로그래밍 패턴에서 프론트엔드와 백엔드의 코드를 공유하는 곳에서 사용되고 있다.

Isomorhpic의 강점

클라이언트와 서버에서 실행되는 동일한 프레임워크

SEO에 친화적

구글봇이 크롤링을 하면서 자바스크립트를 실행하게 되었다. 이를 통해서 템플릿을 내포하고 있는 자바스크립트로 작성된 애플리케이션이 실행될 수 있게 되었다. 이는 '동적인 처리도 가능해진다’는 의미를 가지게 될 것이다.

속도

브라우저에서 직접 HTML을 렌더링 하여 속도가 빨라질 것이다. 이를 통해 보다 나은 사용자경험을 유도할 수 있다.
기존에는 서버에서 HTML을 렌더링하여 브라우저에게 전달했던 방식과 달리, 자바스크립트를 브라우저에 전달하고 브라우저에 의해서 템플릿 렌더링이 수행되어 처리되기 때문에 서버의 부하를 감소시키고 성능이 향상되고 있는 클라이언트(브라우저)에서 처리하면서 빠르게 속도가 처리될 것이다.

쉬운 코드 유지보수

동일한 코드로 작성되었기 때문에 점진적으로 코드를 개선할 수 있게 된 것이다. 흐음.


http://isomorphic.net/javascript 에서 말하는 것과 같이 서버사이드와 클라이언트 사이드에서 동작하는 동일한 코드로 작성된 애플리케이션을 지칭한다고 보면 될 것 같다. 최근에 인기를 끌고 있는 리액트(react,https://facebook.github.io/react/) 의 경우가 이에 해당한다고 보면 되겠다.

리액트를 품을 수 있는 미티오(meteor, https://www.meteor.com/)를 배우면서 아이소모픽이 가지는 강점에 대한 관심을 가지게 되었다.

Isomorphic을 구현하는데 있어 적합한 언어는 역시 최근 각광을 받고 있는 '자바스크립트javascript’가 아닐까 싶다.
자바스크립트는 정말 사용하기 쉽지만, 깊이 쓰려면 어려운 녀석이라고 생각하는데…

우쨌든!!

알고 넘어가자. Isomorhic.

스프링에서는 스프링 4.x에 들어서면서 groovy template engine, 최근 출시된 스프링 4.2에서는 script template 을 지원하고 있다. 최근 흐름은 javascript 쪽으로 넘어간 것은 분명해보인다.

참고


  1. 2016.09.05 17:30

    비밀댓글입니다

타임리프Thymeleaf가 잠시 나를 열받게 만들었다. 
자바스크립트까지 손댈줄이야...
$(".navbar-brand>span").html("<img src='images/logo_innoquartz_white.png' alt='Inno Quartz' />");

이렇게 해놓은 것을 Thyleaf 에서 렌더링하면서

$(".navbar-brand>span").html("<img src="images/logo_innoquartz_white.png" alt="Inno Quartz" />");

이렇게 바꾸면서 브라우저에서

SyntaxError: missing ) after argument list

오류를 발생시킨다. 이를 해결하는 방법은,

$(".navbar-brand>span").html('<img src="images/logo_innoquartz.png" alt="Inno Quartz" />');

으로 변경하면 해결된다.



이와 관련한 내용을 SNS에 올렸다가 CDATA 처리하는 것이 낫지 않느냐는 의견에 생각이 확장된다. 하앍~

백엔드 개발자랍시고 백엔드이상은 넘어오질 않았는데, 이번 프로젝트에 Thymeleaf를 View Template Engine으로 채용하면서 이쪽도 신경을 써야할 상황이 되었다. 아직은 정리가 되지 않은 부분이 많은데, 올해 연말 남은 기간동안 정리를 쭈욱 하고 진행해둬야겠다.

http://msdn.microsoft.com/ko-kr/library/ms256076%28v=vs.110%29.aspx
http://wp.goodchois.kr/devtip/archives/297

Thymeleaf의 템플릿은 사실 HTML의 탈을 쓴 XML이다. html로 파일확장자를 사용하기 때문에 브라우저에서 별무리없이 렌더링을 해서 보여주는 거다.
thymeleaf 파일 내에 자바스크립트도 결국은 XML의 일부로 여기기 때문에 자바스크립트에 대해서도 변형을 진행하는 것으로 보인다.

<![CDATA[An in-depth look at creating applications with XML, using <, >,]]>

위의 형식과 같이 자바스크립트 관련한 항목을

 <script type="text/javascript">
    //<![CDATA[
    window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'}'>"+"<"+"/script>");
    //]]>
</script>

와 같은 형태로 작성을 해야한다.

이보다 나은 방법은, 추후 어느정도 개발이 완료된 시점에 script 관련 항목을 별도의 스크립트 파일로 추출하여 모아놓고,
배포시에 스크립트 관련항목을 컴파일하여 압축하고 하나로 합쳐주는 작업을 진행하는 것이 더 적절해보인다.

출처 : 


자바스크립트 핵심 가이드

저자
더글라스 크락포드 지음
출판사
한빛미디어 | 2008-09-30 출간
카테고리
컴퓨터/IT
책소개
자바스크립트 전문가 더글라스 크락포드가 정리해낸 자바스크립트 언...
가격비교 글쓴이 평점  

이 책에 나온 예문을 그대로... 사용..! 두둥.


var tempArray = new Array();

tempArray.push({id: 1, name: 'a'});

tempArray.push({id: 4, name: 'd'});

tempArray.push({id: 2, name: 'b'});

tempArray.push({id: 3, name: 'c'});

tempArray.push({id: 5, name: 'e'});



var by = function(name) {

    return function(o, p) {

        var a, b;

        if (typeof o === 'object' && typeof p === 'object' && o && p) {

            a = o[name];

            b = p[name];


            if (a === b) {

                return 0;

            }

            if (typeof a === typeof b) {

                return a < b ? -1 : 1;

            }

            return typeof a < typeof b ? -1 : 1;

        } else {

            throw {

                name : 'Error',

                message : 'Expected an object when sorting by ' + name

            };

        }

    };

};


tempArray.sort(by('id'));

결과확인
[Object { id=1, name="a"}, Object { id=2, name="b"}, Object { id=3, name="c"}, Object { id=4, name="d"}, Object { id=5, name="e"}]


  1. 화이팅 2013.07.11 00:38 신고

    안녕하세요..
    다름이 아니라. 티스토리를 정말 하고싶은 1인입니다.
    매번 초대장받아볼려고 노력해봤지만 노력이 부족했나봐요 그래서 이렇게
    구걸이라도 하러왔습니다 ㅠㅠ
    정말로 하고싶어서 벌서 일주일째 이러고있네요.
    혹시나 초대장 여유있으시면 하나만 기부해주세요..^^;
    그럼좋은소식 기다리겠습니다
    이맬:cky2482@daum.net

    • 이미 존재하는 메일이라고 하면서,
      초대장 발송이 되질 않네요.

      누군가에게 받으신 것 같군요. ^^
      멋진 블로거가 되시길 바랍니다.


 

 이번달의 첫날과 마지막날 알아내기  

 

5월의 시작하는 날과 마지막날을 알아내는 것을 가정해본다.

var startDayOfMay = new Date(2012, 4, 1);

var endDayOfMay = new Date(2012, 5, 0);

console.log("startDayOfMonth : " + startDayOfMay + ", endDayOfMonth : " + endDayOfMay);


>> 결과

 startDayOfMonth : Tue May 01 2012 00:00:00 GMT+0900 (KST), endDayOfMonth : Thu May 31 2012 00:00:00 GMT+0900 (KST)



   생성한 Date 객체에서 월(Month)의 값을 꺼내면 어떤 값이 나올까?  
 

var today = new Date();

console.log("Date : " today + ", Month : " +today.getMonth());

>> 결과

Date : Tue May 15 2012 16:26:13 GMT+0900 (KST), Month : 4


출력된 Date 문자열은 분명 5월(May)를 나타내고 있는데, Date 객체에서 추출한 Month는 4가 나타났다.

이렇게 나타나는 이유는 자바스크립트의 Date 객체에서 월Month 가 0부터 시작하기 때문이다.

0 = 1월, 1 = 2월, 2 = 3월, ..., 10 = 11월, 11 = 12월.


확인하는 방법은 간단하다.

var modifyDate = new Date(2012, 0, 1); 
console.log("Date : " modifyDate + ", Month : " + modifyDate.getMonth());
>> 결과 
Date : Sun Jan 01 2012 00:00:00 GMT+0900 (KST), Month : 0

var modifyDate = new Date(2012, 11, 1); 
console.log("Date : " modifyDate + ", Month : " + modifyDate.getMonth());
>> ru
Date : Sat Dec 01 2012 00:00:00 GMT+0900 (KST), Month : 11


 

 왜 0부터 시작할까?  

 

참고 : http://www.evotech.net/blog/2007/07/javascript-date-object/

위의 사이트로 가보면, 마지막 Date.prototype... 코드 부분에 월Month을 배열Array로 처리하는 것을 확인할 수 있는데, 컴퓨터에서 사용하는 배열의 순서Index는 0부터 시작한다는 것을 생각해보면 어느정도 유추해볼 수 있을 듯 하다. getMonth()를 하면 객체가 속한 달의 순서Index값을 내놓는 것이라 생각해볼 수 있을 것 같다.


JavaScript sort 참고 : http://www.w3schools.com/jsref/jsref_sort.asp
  
var testArray = [
    {"id" : 1, "total" : 3}, {"id" : 2, "total" : 20}, {"id" : 3, "total" : 12}, {"id" : 4, "total" : 9}, {"id" : 3, "total" : 24}
];
function custonSort(a, b) {
  if(a.total == b.total){ return 0} return  a.total > b.total ? 1 : -1;
}
testArray.sort(custonSort);
console.log(testArray);
<< 정렬 결과 >>
[
Object
  1. id1
  2. total3
  3. __proto__Object
,
Object
  1. id4
  2. total9
  3. __proto__Object
,
Object
  1. id3
  2. total12
  3. __proto__Object
,
Object
  1. id2
  2. total20
  3. __proto__Object
,
Object
  1. id3
  2. total24
  3. __proto__Object
]

간단하게 예제를 만들어봤다.


난 전혀 다른 곳을 파고 있었던 것이다. 


  1. DAILY_CHANGLIST_SENDREPORT 2015.03.10 16:36 신고

    앙되요 ㄷㄷㄷ.

+ Recent posts