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

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

왜 Isomorphic 일까?

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

Isomorhpic의 강점

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

• Isomorphic을 지원하는 프레임워크 목록: http://isomorphic.net/libraries

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 쪽으로 넘어간 것은 분명해보인다.

참고

• http://isomorphic.net/
• Isomorhpic Javascript: #DevBeat Master class
• Isomorhpic Javascript: The Future of Web Apps
• Isomorphic templating with Spring Boot, Nashorn and React
• Modern Java web application with Spring

자바스크립트까지 손댈줄이야...

$(".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"}]

>> 결과

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