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 하도록함. 

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






+ Recent posts