angularjs-188x200

angularjs 와 java , mongodb 사용의 나쁜예 퀵하게 보기 (1)

현재 angularjs 와 java(톰켓)을 사용하여 SI 프로젝트를 하고 있습니다. 현시점에서 상태를 퀵하게 기술해봅니다.  전체를 상세 설명하려면 소스 공개가 가장 빠르겠지만 SI 특성상 공개 할수가 없습니다. 제 개발 패턴이 궁금하신분이 있다면(없겠지만) 차라리 데모?를 직접 보여 드릴 수는 있습니다. ㅎㅎㅎ

front : javascript ( angularjs 를 주로 씀 )
was : java / tomcat / struts2 / spring(젤 하는일없음)
db : mongodb 
o/s : dev-osx , server-ubuntu

1. 클라이언트

1.1 코딩기준 
	- jQuery 떡칠 way 는 하지 않고 (아예사용안함) angular way 로만 한다. 
	- single web page 로 구성한다. 
	- index.html 상단과 좌측 메뉴 처리 , appControl 관련된 javascript 처리
		-> 실제로 메인 app. 메인 컨텐츠 부분은 ng-view 로 동적 로딩 되게 한다. 
	- 동적 로딩되는 실제 ui 처리는 ng-view와 router 를 사용한다. 
          로딩되는 화일은 화면명.html + 화면명Ctrl.js 의 한쌍으로 구성한다.
		-> 개인적인 취향 jQuery 떡칠패턴으로 개발시부터 
                   ui.html + ui.js + ui.css를 주로 써왔음
	- 디렉티브는 별도로 저장한다. 
	- 전체 화면의 공유 데이터는 rootScope 데이터 변수를 사용하여 공유한다.
		-> service 는 사용하지 않는다 (angularjs 권고사항) 

1.2 폴더
	/estimate 	- index.html 및 화면명.html , 화면명Ctrl.js 화일들 저장 
	|- /directive	- angularjs 디렉티브 + ui.bootstrap 디렉티브
	|- /filter	- 필터관련 js 화일
	|- /helper	- 메뉴처리 js , 기타 분류안한 js 예) request 처리 js
	|- /service	- view Controller 에서 공통 사용되는 업무관련 함수들
			  ex) 몽고디비기본함수 (find,remove,update..) 클라이언트 구현체 
	/lib		- 외부 자바스크립트 프레임워크들 
	|- /bootstrap
	|- /Hightchart 
	|- underscore.js

	/schema
		schema.js   - json템플릿 리턴 및 벨리데이션 담당
		schema.json - json 스키마정의 

2. 서버 (tomcat)
	2.1 어떠한 경우도 서버페이지(jsp) 를 생성하지 않는다. 
	2.2 브라우저 요청과 서버쪽 Action 은 이름으로 매칭한다. (설정최소화)
	    -예) 클라이언트 요청 SalesEstimate-findProject 
		 -> 서버쪽 처리    SalesEstimateAction 의 findProject
	2.3 브라우저 리프레쉬 할경우 클라이언트 라우터 동작을 위한 리디렉트 구현
	2.4 odm 은 하지 않는다. jsonhashmap 변환으로 대체 (gson 라이브러리사용)		
		key 값을 method 로 사용하지 않음. key 값을 검색의 대상으로 동적 사용하므로 불가능함. 
	2.5 향후 node 로 변환 or 스프링및 스트러츠 걷어내고 jsp 만으로 전환.

3. issue 
	router시 앵귤러 해쉬뱅 '/#/' 으로 인해서 ie 에서 비정상적 동작. 
           1. 심각하게 "angularjs 들어 내기" , "single web 안하기" 중에 고민중.
           2. 앵귤러들어내기 (meteor 에서 ddp만 내리고 클라이언트만 사용하기)
        "서버가 자바인 관계로 자료구조(json) 핸들링의 어려운점" 해결방안 모색
           1. 자바들어내기 - 현재는 hashmap 으로 꿋꿋하게 버티는중.

소스나 개발 패턴이 좀더 나아지면 (2)탄도 써보겠습니다.

  • Facebook
  • Google Plus
  • Twitter
  • LinkedIn
  • Pinterest
  • Tumblr
  • Instapaper
  • Delicious