AngularJS


Angular 튜토리얼을 그냥 하나씩 진행하겠습니다.  Jasmine 은 패스 


angular.js 및 정식 튜토리얼은 위 이미지 클릭 - API


역시나 IE는 쓰레기, IE7,8,9에서 작은(?) 문제가 있으며, 해결책은 맨아래





1.  값 바인딩


index.html

  1. <html ng-app>
  2. <head>
  3. ...
  4. <script src="lib/angular/angular.js"></script>
  5. <script src="js/controllers.js"></script>
  6. </head>
  7. <body ng-controller="PhoneListCtrl">
  8.  
  9. <ul>
  10. <li ng-repeat="phone in phones">
  11. {{phone.name}}
  12. <p>{{phone.snippet}}</p>
  13. </li>
  14. </ul>
  15. </body>
  16. </html>



controllers.js

  1. function PhoneListCtrl($scope) {
  2. $scope.phones = [
  3. {"name": "Nexus S",
  4. "snippet": "Fast just got faster with Nexus S."},
  5. {"name": "Motorola XOOM™ with Wi-Fi",
  6. "snippet": "The Next, Next Generation tablet."},
  7. {"name": "MOTOROLA XOOM™",
  8. "snippet": "The Next, Next Generation tablet."}
  9. ];
  10. }



동작 

심플!


<html> 태그에 ng-app 를 추가하여 angular application 이라고 선언해준다.


 그리고 컨트롤러가 적용될 태그에 ng-controller="PhoneListCtrl" 를 추가한다.


컨트롤러에 들어갈 값은 controllers.js 에 함수로 정의한 함수명이 그대로 사용된다. 

body가 refresh 등 어떤 이유로 변경되었을 경우에 지정한 컨트롤러가 날아가는데

그걸 방지하기위해 컨트롤러를 html 태그안에 선언해도 된다.



그다음 리스트류를 표현할때

li 에 다가 ng-repeat="phone in phones" 선언하면

foreach 나 each 처럼 사용이 된다.


 phones 를 $scope에 정의해주면

해당 컨트롤러의 scope 내에서 사용할 수 있다.




2. search


index.html

  1. <div class="container-fluid">
  2. <div class="row-fluid">
  3. <div class="span2">
  4. <!--Sidebar content-->
  5.  
  6. Search: <input ng-model="query123">
  7.  
  8. </div>
  9. <div class="span10">
  10. <!--Body content-->
  11.  
  12. <ul class="phones">
  13. <li ng-repeat="phone in phones | filter:query123">
  14. {{phone.name}}
  15. <p>{{phone.snippet}}</p>
  16. </li>
  17. </ul>
  18.  
  19. </div>
  20. </div>
  21. </div>



동작

ng-model="query123" 


이라고 input 에다가 선언을 하였습니다.


그럼 해당 input 에 입력되는 text는 query123 이라는 바인딩변수로 사용 할 수 있습니다.


문서 아무곳이나 <div> {{query123}} </div> 라고 해놓았다면


input 에 글자를 입력되는 순간 저 div 에도 동일하게 해당 text가 나오게 됩니다. 


돌아가서 13라인에 필터라고 선언하고 query123을 지정했습니다.


그러면 글자가 입력되는 순간 해당 li에 모든 텍스트중 동일한 글자가 있는지를 검색하여


동일한 글자가 있는 li만 리스트에 보여주게 됩니다.


만약 phone.name 이나, phone.snippet 어느 하나에만 적용하고 싶을때는 


ng-model = "query123.name"  이나 query123.snippet 으로 해주시고 필터에는 그냥 query123 그대로 주면


해당 값에만 필터가 걸립니다.


만약 10개중 2개에서만 필터를 하고 싶을경우는


해당 controller.js 에


 $scope.queryFilter = function(list){

 return list.name.toLowerCase().search($scope.query) != -1

        || list.snippet.toLowerCase().search($scope.query) != -1;

  }


아래와 같이 합니다. 대소문자 구분을 짓고싶으면 toLowerCase 를 빼면되겠죠






3. Sort


index.html

  1. Search: <input ng-model="query">

  2. Sort by:
  3. <select ng-model="orderProp">
  4. <option value="name">Alphabetical</option>
  5. <option value="age">Newest</option>
  6. </select>
  7.  
  8.  
  9. <ul class="phones">
  10. <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
  11. {{phone.name}}
  12. <p>{{phone.snippet}}</p>
  13. </li>
  14. </ul>



controllers.js

  1. function PhoneListCtrl($scope) {
  2. $scope.phones = [
  3. {"name": "Nexus S",
  4. "snippet": "Fast just got faster with Nexus S.",
  5. "age": 0},
  6. {"name": "Motorola XOOM™ with Wi-Fi",
  7. "snippet": "The Next, Next Generation tablet.",
  8. "age": 1},
  9. {"name": "MOTOROLA XOOM™",
  10. "snippet": "The Next, Next Generation tablet.",
  11. "age": 2}
  12. ];
  13.  
  14. $scope.orderProp = 'age';
  15. }



동작

이번엔 select 에다가 ng-model 을 선언했습니다.


그러면 선택되는 option 의 value가 model의 값이 됩니다.


그러면 index.html 의 11 라인 orderBy:orderProp"  으로 선언해주면 


해당 리스트는 선택된 orderProp 의 값 name, age 중 하나로 정렬하게 됩니다.


controllers.js에 key 인 name과 age중 하나를 선택하게 됩니다.


14라인에서 값을 'age'로 주고 있습니다.


그러면 select box는 해당 값으로 선택이 되어 있는 상태로 렌더링되고, 리스트도 적용되어 보이게 됩니다.






4. XHR


phones.json

  1. [
  2. {
  3. "age": 13,
  4. "id": "motorola-defy-with-motoblur",
  5. "name": "Motorola DEFY\u2122 with MOTOBLUR\u2122",
  6. "snippet": "Are you ready for everything life throws your way?"
  7. ...
  8. },
  9. ...
  10. ]


controllers.js

  1. function PhoneListCtrl($scope, $http) {
  2. $http.get('phones/phones.json').success(function(data) {
  3. $scope.phones = data;
  4. });
  5.  
  6. $scope.orderProp = 'age';
  7. }
  8.  
  9. //PhoneListCtrl.$inject = ['$scope', '$http'];



동작

$http.get 으로 파일을 가져오고 있습니다. 

다른메소드로는

$http.get, $http.head$http.post$http.put$http.delete$http.jsonp 가 있습니다. API 참조하세요 


그리고 controllers.js 에 주석처리된 놈은 Depedency Injection입니다.

원하면 컨트롤러에 직접 필요한 인자를 집어넣어 줄 수 있습니다.


그리고 controllers.js 라인 3 - data를 


$scope.phones = data.splice(0, 5);


같이 원하는만큼만 넣으셔도됩니다.


계속 됩니다.




※ IE 에서 바인딩이 되지 않고, 그대로 {{name}} 이 나올 때,JSON.strigify 가 안되거나, 

     등등의 문제를 위한 작은 해결책


1. doctype이 저렇게 되어있지않다면 바꿔보세요.

<!doctype html>


2.

<html lang="en" class="ng-app:myapp" id="ng-app" ng-app="myapp" xmlns:ng="http://angularjs.org">

     <head>    

        <!--[if lt IE 9]>

          <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>

        <![endif]-->

        <!--[if lte IE 8]>

          <script>

            document.createElement('ng-include');

            document.createElement('ng-pluralize');

            document.createElement('ng-view');

            document.createElement('ng:include');

            document.createElement('ng:pluralize');

            document.createElement('ng:view');

          </script>

        <![endif]-->

        <!--[if lt IE 8]>

          <script src="js/json2.js"></script>

        <![endif]-->

      </head>


'Javascript > AngularJS' 카테고리의 다른 글

[tutorial] AngularJS 튜토리얼 - 1  (0) 2013.01.03
YOUR COMMENT IS THE CRITICAL SUCCESS FACTOR FOR THE QUALITY OF BLOG POST


출처 : http://sigma6.tistory.com/78

바른 가르침과 배움에 대한 해답, SICP와 HTDP - 2

김재우 (kizoo@bluette.com)

SICP 현황과 문제점
SICP의 철학과 우수성은 앞에서 충분히(물론 완벽할 수야 없지만) 설명했다고 본다. 이제 그 문제점과 대안을 알아볼 차례가 됐다. 세상에 완벽한 해결책이란 없는 법이다. 우선 이 멋진 책(또는 과정)을 얼마나 많은 대학에서 쓰고 있는지 살펴보자.

현재 SICP를 가르치는 대학은 약 100여개 정도 된다. 나라 별로 그 수가 많은 것부터 늘어놓아 보면 단연코 미국이 가장 많다. 미국은 모두 93개 대학으로 컬럼비아, 코넬, 프린스턴, MIT(당연히) 등이 여기에 포함된다. 그리고 영국에서는 옥스포드를 포함해 총 7개 대학, 독일은 9개 정도다. 이어서 이탈리아와 덴마크가 각 2개, 네덜란드·핀란드·벨기에·스페인이 각 한 개씩인 것으로 되어 있다. 

아시아권은 그 수가 적다. 여기에는 우리나라도 물론 포함되어 있다. 일단 일본은 동경대, 싱가포르는 싱가포르 국립대에서 이 과정을 채택하고 있고, 우리나라에서는 KAIST(이광근 교수), 고려대에서 채택하고 있다(그리고 등록되어 있지 않지만 창원대(이수현 교수)에서 SICP를 가르치고 있다는 사실을 들어서 알고 있다). 또한 현재는 다른 과정으로 대체됐으나 한때 부산 동아대학교에서 1995년부터 신입생 프로그래밍 강좌로 이 강좌를 개설해 한 해 5개 강좌 약 300명이 수강하기도 했다.

총 100여개에 이르는 대학이 한 대학에서 개발한 과정을 채택하고 있다고 보면 여전히 많은 축에 속하기는 하지만 예전만큼 ‘강호를 평정’하고 있다고 하기는 어렵다. 지난 10여 년간 SICP를 채택하거나 적어도 Scheme을 실습 언어로 선택하는 대학이 많이 줄어든 것이 사실이다. 이는 많은 대학에서 이 분야의 급격한 기술 변화를 무시하지 못하고 예전처럼 유행하는 프로그래밍 언어를 가르치는 방식으로 돌아섰기 때문에 생긴 결과라 하겠다. 그러나 이런 슬픈 현상을 추세 탓으로만 돌릴 수는 없는 법이다. SICP를 채택한 이후에 겪게 된 여러 가지 문제점이 그런 변절(?)의 빌미를 제공했다고도 볼 수 있기 때문이다. 

SICP의 문제점은 2002년에 발표된 참고자료 ③에 비교적 잘 설명되어 있다(SICP 방식의 교육에 깊은 관심이 있는 사람이라면 그전에 참고자료 ④의 논문을 읽어 보는 것이 좋다). 이 논문에서 몇 가지 눈에 띌 만한 것을 나름대로 정리해 보면 이렇다(아마도 SICP를 약 4장 정도까지라도 따라가 본 사람은 이 논문이 주장하는 바를 공감할 수 있을 것이다).

SICP의 가장 큰 문제는 과정 자체가 너무 어렵다는 데 있다. 프로그래밍 자체가 어려운 것이야 당연한 것이지만 프로그래밍 기법을 설명하기 위해 드는 예제들이 문제다. 
SICP는 컴퓨터를 전공하는 학생들만을 위한 기초 서적이 아니다. 프로그래밍이 꼭 필요한 분야라면 전공에 관계없이 채택할 수 있는 기초 기술 서적(또는 과정)이다. 특정 분야에 치우침 없이 고루 응용할 수 있는, 다양한 문제와 해법을 다루고 있기 때문에 전산 전반에 걸친 기초 기술 모두를 한 번씩은 짚고 넘어간다고 봐도 틀린 얘기가 아니다. 

게다가 완성도가 높아서 분야별 사전 지식(domain knowledge)을 먼저 학습하지 않고서는 문제 자체를 이해할 수 없는 경우가 대부분이다. 균형 잡힌 지도를 받지 못한다면 초심자들은 이 책이 전문 분야 지식과 프로그래밍 기법 중 어느 쪽에 중점을 두고 있는지 알아차리지 못할 가능성이 높다. 

처음 배우는 이를 더욱 당혹스럽게 만드는 점은 이 책의 ‘보물찾기’ 식 내용 구성이다. 프로그램 설계를 그 어느 서적보다 중요하게 다루지만 드러내어 떠들지 않는다. 너무 고상한 방법으로 목표를 달성하려고 하다가 선문답식 가르침이 되어버린 셈이다. 가르치고자 하는 모든 것을 예제 속에서 엮어 놓았기 때문에 배우는 사람 스스로 그 참뜻을 찾아내려 애써야 한다. 

사실, 학생 대부분은 숨겨놓은 교육 의지(제대로 프로그래밍하기)를 찾아내지 못하고, 표면 지식(이를테면, 언어 그 자체나 특정 응용 분야)에 더 중점을 두기 쉽다. 만일 가르치는 사람조차 그 의도를 충분히 알아차리지 못하면 당연히 이 문제는 더 심각해진다. 내용상의 연계성을 고려하지 않고 교육 의도―‘왜 그렇게 프로그래밍 하는 것이 옳은가’를 충분히 전달할 수 없다면, SICP는 주어진 예제를 단순히 풀어내려가는 평범한(그러나 아마도 아주 혹독한) 훈련으로 전락할 수 있기 때문이다(이런 문제 때문에 이 과정을 제대로 이끌어갈 수 있는 교수진을 구성하기도 어렵다). 

HTDP와 Dr. Sheme
『How To Design Programs』(이하 HTDP)는 앞에서 설명한 SICP의 여러 가지 문제점, 특히 다음과 같은 문제점을 개선하는 데 중점을 두고 만들어 낸 책(또는 교육 과정)이다. 

◆ 특정 분야 지식을 과하게 요구할 뿐만 아니라 그 지식을 설명하는 데 너무 많은 지면을 할애한다.

◆ 프로그램 설계를 드러내 가르치지 않으므로 학생들에게 교육 목표를 제대로 전달하는 데 어려움이 많다.

더 자세한 개발 동기 및 설계 원칙, 교수법 등에 대한 설명은 참고자료 ③에 잘 정리되어 있으므로 참고하기 바란다.

HTDP를 쓴 저자들은 모두 PLT(Programming Language Technology,http://www.plt-scheme.org/who)라는 단체의 구성원들이다. PLT는 다양한 Scheme 구현을 제공할 목적으로 만든 자원 단체로 현재 EdScheme 또 MzScheme 등을 개발해 배포하고 있다. 특히 이 그룹에서 개발한 Dr. Scheme은 재미있는 소프트웨어다. Dr. Scheme은 여러 Scheme 구현 위에 돌아가는 일종의 Scheme IDE라 할 수 있는데, 애초부터 교육 용도로 개발된 것이다. 그래서 프로그래밍 훈련의 재미와 효과를 높일 수 있는 여러 가지 기능을 갖추고 있다. SICP 같은 과정과 Dr. Scheme 같은 실습 소프트웨어는 정말 찰떡궁합이라 할 수 있다. 

HTDP와 우리 프로그래밍 교육
필자는 우리나라의 많은 교육 기관이 이론 교육과 실무 기술 교육 사이의 균형점을 찾지 못하고 우왕좌왕하고 있다고 생각한다. 컴퓨터 공학(과학)과 정보 처리학은 엄연히 다른 것인데도, 하나의 과정 속에 분별없이 섞어놓고, 학생들이 어디로 가야 할지 해답의 실마리를 쥐어 주지 않는다. 취업 문제로 고민하는 학생들에게 나름대로 해결책을 제시하기 위해 실무 기술을 가르치겠다는 의지 자체는 충분히 공감하는 바다. 그러나 기존 교육 체계는 그대로 두고서 실무 기술 교육을 강화하겠다는 것(교육 내용만 살짝 바꿔치기하겠다는 것)은 헛된 바람이다. 

『The Pragmatic Programmer』(참고자료 ⑤)의 서문에 쓰인 말대로, 개발자 능력은 기초 컴퓨팅 이론 바탕 위에 다양한 실무 프로젝트를 개발하는 경험이 쌓여서 배양된다. 설령 철저한 실무 교육을 목표로 하는 교육 기관이라 할지라도 기초 이론 교육을 무시한다면 좋은 인력을 길러낼 수 없고, 이론 교육이라고 해도 실무 기술과 연계성을 주의 깊게 고려해 가르치지 않으면 쓸모 있는 바탕 교육이라 할 수 없다.
이런 점에서 HTDP가 추구하는 프로그래밍 교육의 원칙은 주목할 만하다. 프로그래밍의 원리 교육과 실무 기술 훈련이 하나의 과정 속에 어떻게 배치되어야 하는지 한 가지 해법을 제안하고 있기 때문이다. 참고자료 ③은 HTDP가 추구하는 프로그래밍 교육 목표를 다음과 같이 기술하고 있다. 

변하는 기술 환경에 빠르게 적응할 수 있고, 수십 년 동안 소프트웨어 관련 직종에서 살아남을 수 있는, 유능한 소프트웨어 개발 인력을 양성하는 것이 프로그래밍 교육의 목표다.

너무 뻔한 얘기라서 식상하기까지 하지만, 우리네 교육기관 중 저 목표를 향해 땀 흘려 달리는 곳이 과연 몇 군데나 될까? 참고자료 ③에서는 이와 같은 교육 목표를 달성하기 위해 다음과 같은 구조로 교육 과정을 구성하는 것이 바람직하다고 주장한다. 이 제안에 따라 교육 과정을 그려보면 <그림 1>이 나온다.

프로그래밍 커리큘럼은 근본 원리를 가르치는 데 중점을 두어야 한다. 그리고 첫 해 두 번째 학기와 마지막 학년에서 산업이 요구하는 기술에 적응할 수 있도록 실용 기술을 훈련한다.

<그림 1> The Structure and Interpretation of Computer Science Curriculum에서 제안하는 교육 과정
Picture 3.pdf

이와 같은 제안이 우리네 교육 기관이 처해있는 여러 가지 문제를 정말 해결해 줄 수 있는지를 함부로 판단할 수는 없는 법이다. 그러나 SICP나 HTDP와 같은 해법이 프로그래밍 기술의 본질을 바로 알고 더 나은 프로그래밍 교육을 시도하는 가치 있는 실천임에는 의문의 여지가 없다고 믿는다. 

독자에게 드리는 선물
여기까지 글을 읽어준 독자에게 몇 가지 선물을 드릴까 한다. 이 글에서 소개한 두 권의 책은 모두 웹에 전문이 올라와 있다.

◆ http://mitpress.mit.edu/sicp/
◆ http://www.htdp.org

앞에서도 말한 바 있지만 SICP를 제대로 익히려면 좋은 선생이 필요하다. 한데 다행스럽게도(그리고 매우 고맙게도) 저자(Harold Abelson) 및 다른 MIT 교수진의 SICP 강의를 동영상으로 보고 들을 수도 있다.

◆ http://www.swiss.ai.mit.edu/classes/6.001/abelson-sussman-lectures/

강의도 들을 수 있고 책도 마련했으니 이제 실습용 프로그래밍 환경만 있으면 완벽하다. 이왕 책이 권하는 대로 Scheme을 써보기로 했다면, 다음 주소에서 Dr. Scheme을 내려받을 수 있다(실습 언어로 꼭 Sheme을 써야 하는 것은 아니지만, 다른 언어를 쓴다고 해도 책을 읽고 예제를 풀기 위해 Scheme 코드는 정확히 읽고 이해할 수 있어야 한다).

◆ http://www.drscheme.org

이제 이 공개된 보물지도로 보물을 찾아 나설지 말지는 온전히 독자의 몫이다.

정리 | 송우일 | wooil@korea.cnet.com

    참 고 자 료
 ① Harold Abelson and Gerald Jay Sussman with Julie Sussman, "Structure and Interpretation of Computer Programs," MIT Press 

 ② Matthias Felleisen, et. al, "How To Design Programs," 2003, MIT Press 

 ③ Matthias Felleisen, et. al, "The Structure and Interpretation of Computer Science Curriculum," 2002, http://www.informatik.uni-kiel.de/~mh/publications/reports/fdpe02/ 

 ④ Philip Wadler, "A Critique of Abelson and Sussman : Why calculating is better than scheming." SIGPLAN Notices 22(3)(1987) 83-94 

 ⑤ Andrew Hunt, David Thomas, Ward Cunningham, The Pragmatic Programmer: From Journeyman to Master, Addison-Wesley 
 

    'LISP' 카테고리의 다른 글

    [SICP] 바른 가르침과 배움에 대한 해답  (0) 2012.09.12
    YOUR COMMENT IS THE CRITICAL SUCCESS FACTOR FOR THE QUALITY OF BLOG POST



    MongoDB 쿼리 옵션 모음



    1. 프로젝션

    프로젝션은 결과 값 도큐먼트에 대해 리턴할 필드를 지정하는 데 사용한다.


    특별히 도큐먼트의 수가 많을 때 프로젝션을 사용하면 네트워크 지연(latency)과 디시리얼라이제이션에 들어가는

    비용을 줄일 수 있다.


    프로젝션은 다음과 같이 리턴할 필드로 보통 정의된다.


    1) 리턴받고 싶은 필드를 정의하거나, 제외할 필드를 정의 할 수 있다.


    db.users.find({}, {username:1})

    ==> 위 쿼리는 users 도큐먼트에서 username 필드와 _id 필드만을 리턴한다. _id는 디폴트로 항상 리턴한다.


    포함시키지 않고싶은 필드는 0을 주면된다.

    db.users.find({}, { address : 0, pay : 0})  // address와 pay 필드는 제외된 값이 리턴된다.



    2) $slice - 리턴될 배열의 값을 어떤 범위 내에서 정할 수있다.

      예를 들어 리뷰를 여러 페이지로 나눠서 보여주길 원한다면 $slice 연산자로 제한할 수 있다.


    도큐먼트 : { a:1, b:2, review:[{rating:3, ...},{},{},{},{},{},{},{},{},{}...] }


    db.products.find({}, { review : { $slice: 12} }) // 결과값중 처음 12개만 가져온다.

    db.products.find({}, { review : { $slice: -5} }) // 결과값중 마지막 5개만 가져온다.



    $slice 는 2개의 숫자로 된 배열로도 가능하다. 각각. 스킵(skip), 리미트(limit) 를 나타낸다.


    처음 24개의 리뷰를 제외하고 난 후 가져올 리뷰를 12개로 제한하는 쿼리

    db.products.find({},{ review : { $slice : [24, 12]} })



    3)   1) 과 2)를 조합하여 사용하는 예


    바로위 쿼리에 review의 rating 필드만 가져오고 싶을때 


    db.products.find({}, { review : { $slice : [24, 12], 'review.rating' : 1} } )








    1. 정렬

    정렬은 오름차순, 내림차순으로 정렬할 수 있다.


    내림차순 

    ==> db.products.find({}).sort({ rating : -1 })


    오름차순 

    ==> db.products.find({}).sort({ rating : 1 })


    2개이상의 조건 

    ==> db.products.find({}).sort({ helpful: -1, rating: -1 })



    추가중



    YOUR COMMENT IS THE CRITICAL SUCCESS FACTOR FOR THE QUALITY OF BLOG POST



    안드로이드 웹뷰에서 단말기정보나 단말기 기능이 필요할때 


    자바스크립트에서 메소드 호출형식으로 


    네이티브 코드에 정의해놓은 메소드를 불러다 쓸 수 있다.




    코드 - Android Native Code

    public class Test extends Activity {

        /** Called when the activity is first created. */

        WebView webView ; 

        WebSettings wSet; 

        String HOME_URL = this.getResources().getString(R.string.homeURL);

        @Override

        public void onCreate(Bundle savedInstanceState) {

            super.onCreate(savedInstanceState);

            setContentView(R.layout.main);

         

       webView = (WebView)findViewById(R.id.webview);

            wSet = webView.getSettings(); 

         

    webView.addJavascriptInterface(new JavaScriptInterface(this.getApplicationContext()

    , webView

    , HOME_URL

    )

    , "margoScript" // 웹뷰 자바스크립트에서 쓸 메소드명

    );



    - JavaScriptInterface Class

    public class JavaScriptInterface {


    Context context;

    String phoneNum;

    String udid;

    WebView webView ;

    String url;

    public JavaScriptInterface(Context context, WebView webView, String url) {

    this.context = context;

    this.webView = webView;

    this.url = url;

    }

    public String getUdid(){

    TelephonyManager tm = 

    (TelephonyManager)context.getSystemService(Context.TELEPHONY_SERVICE);

    phoneNum = tm.getLine1Number();

    udid = android.provider.Settings.Secure.getString(context.getContentResolver()

    , Settings.Secure.ANDROID_ID);

    return udid;

    }

    public void resetAndHome(){

    webView.clearHistory();

    }

    }



    - WebView Javascript

    완전 간단하다 그냥 편하게 불러쓰자. 값을 넘겨 호출 할 수도 있다.


    function getUdid(){

     

    return window.margoScript.getUdid();

    }

    YOUR COMMENT IS THE CRITICAL SUCCESS FACTOR FOR THE QUALITY OF BLOG POST




    NodeJS - express 프레임웍에서 템플릿 엔진(EJS)을 이용하여 View 페이지로 JSON 객체를 넘겨줄 때, 


    값이 제대로 넘어 가지 않고, 


    스크립트 에러가 나거나, 값이 [Object, Object] 형식으로 제대로 나오지 않는 경우가 있다.


    스크립트 에러는 "Uncaught SyntaxError: Unexpected identifier" 이런식으로 나고, 


    "[object Object],[object Object],[object Object],[object Object],[object Object]," 이런식으로 JSON이 제대로


    전달 되지 않는다.


    JSON 객체는 보통 스트링 넘기듯이 넘기면 안된다.




    NodeJS - Server Page


    res.render('search/bbsList',{ result: JSON.stringify(result)

    , caller:req.body.caller});


    DB나 어떤 JSON 객체를  넘겨줄 때는 저런식으로 JSON.stringify 로 넘겨주어야한다.




    NodeJS - View Page(EJS)


    템플릿 엔진 옵션은 

    open: '#{',

       close: '}'


    보통 값을 불러올때는 #{= xxx} 이런식으로 불러오지만


    json객체를 저런식으로 부르면 


    {&quot;lastname&quot;: &quot; 


    위와같은 값이 나오게 된다.


    JSON 객체를 불러올 때는 


    var resultList = #{-result};


    이렇게 '=' 이 아닌 '-' 로 호출해야한다. 끝.


    YOUR COMMENT IS THE CRITICAL SUCCESS FACTOR FOR THE QUALITY OF BLOG POST
    1. ㅜㅜ; 2012.10.28 17:11 신고  댓글주소  수정/삭제  댓글쓰기

      어제부터 json을 봐도 뭐가뭔지 짐작이안오네여 ㅠㅠ;; 혹시 node.js json에대한 소스예제는 없나요?

    2. 오호 2016.03.31 17:01 신고  댓글주소  수정/삭제  댓글쓰기

      도움이 많이 되었습니다! 근데 역으로 express 프레임웍에서 템플릿 엔진(EJS)을 이용하여 서버페이지에 json object를 넘겨줄땐 어찌 해야 할까요??