Taehoon Koo's Blog

React.js (http://facebook.github.io/react/)

: Facebook, Instagram 에서 사용하는 View Library. Data binding 이 가능하고, Light-Weight 로 강력한 성능을 자랑합니다.

요녀석 한번 써보겠다고, 삽질 좀 했네요 ;ㅂ; 여차저차 세팅을 완료 하긴 했는데, 썩 만족스럽지는 않습니다 ㅠㅠ

JSX 지원.

React.js 에서는 Human-Readable 한 코드 작성을 위해 JSX 란 문법을 지원합니다. 이놈이 문젭니다 ㅠㅠ

Developing 중에는 JSXTransformer.js 를 통해서 실시간 Compiling 을 하는데요, Production 에서는 pre-complie 후에 배포 하길 권고 합니다. 

여기서 Dev와Production간의 설정이 달라집니다. 

1. JSXTranformer.js 를 include 해줘야함. 

2. 개발에는 JSX 파일, Production 에는 JS파일을 include해야함.

2-1 script path가 달라짐

2-2 include 시에 JSX 는 type="text/jsx", JS는 type="javascript"가 되어야함.

3. Package 시에 시에 JSX -> JS compile을 해줘야함.

자 그럼 하나씩 해결해볼까요 ㅠㅠㅠ

1. JSXTranformer.js 를 include 해줘야함.

maven-resource-plugin과 property configure를 통해 include 여부 결정

jsp 는 template engine (tiles)를 통해 골격을 관리하고 있기 때문에 base template에서만 들어 있으니 쉽게 해결. 

2-1 script path가 달라짐

2-2 include 시에 JSX 는 type="text/jsx", JS는 type="javascript"가 되어야함.

[1]번 과 같은 방법으로 해결하고자 했으나, 해당 코드는 base template 에서 사용되는게 아니라 화면별로 들어 가야 되서 삶이 고달파짐 ㅠㅠ

maven-resource-plugin 과 property 를 통해 DEV/PRODUCT을 분기 하고, custom taglib를 통해서 코드 생성토록 함. 

3 Package시에 JSX -> JS compile

Facebook에서 제공하는 jsx command 를 maven exec plugin 으로 실행하도록 함. 

bds 에서 build 할때 goal 을 clean package -> clean exec:exec package으로 변경하여 deploy 하도록함. 

* 이부분이 특히 마음에 안듬 ㅠㅠ

https://github.com/medialize/URI.js

개발하다보면 URL 을 조작해야 하는 일이 많죠. 예를 들명 paging 처리라던가, 등등등

이럴때 Javascript String Function 을 활용해서 개발하는 경우에는

요청 URL 에 원래 parameter가 있는지 여부에 따라 stringconcat 시 '?' 과 '&' 을 써야 하고, 

기존에 이미 있는 parameter를 새로 세팅 해줘야 하는 경우 인생이 고달파 집니다 ㅠ

URI.js 라는 고마운 녀석을 주로 쓰는 편입니다. 

1. window.location.href 

제가 Front-End 에 대한 경험이 부족한데, 현재 요청 URL을 가져올때 보통 저것을 사용하는데, 

URI.js 소개 페이지에 따르면 해당 Object 가 FireFox 에서 호환성 문제를 내는 경우가 있다고 합니다.

고맙게도 new URI() 를 불러주면 알아서 요청 URL을 가진 Object 가 생성됩니다.

2. new URI().addQuery('foo','bar')

What is a 'Raphael'?

Raphael 은 SVG 와 VML 에 기반한 Web 상에서 Vector Graphics을 지원하게 해주는 Javascript Library 입니다.

Rich Internet Applicatoin 을 개발할 일이 있어, 기술 조사 겸 해서 스터디 해볼려고 합니다.

언제나 그럿듯이 Hello World 를 한번 찍어 보도록 하겠습니다.

1. Download Raphael

http://raphaeljs.com/ 에서 다운로드 하시면 됩니다

2. Sample Page 작성 

3. javascript 작성

var paper = Raphael("hello",320,200);
var t = paper.text(50,50,"Hello Raphel");

hello 라는 div element 를 Raphael Paper 로 활용하게 되고,

그 Paper 에 text 를 그려 놓은 모습입니다. 

Raphel 로 Hello Raphael 을 출력한 모습입니다.

Elements 를 살펴 보면, svg tag 밑에 element 로 들어 가도록 변환이 되어서 나옵니다.

이것만 봐서는 뭐가 강력한지 모르겠지만, 차근 차근 알아 보도록 하겠습니다.