잘 정리해보자

React JS : Virtual DOM 을 통해 상태의 변함에 따라 선택적으로 UI를 렌더링 한다. ( 대규모 어플리케이션을 구축하거나 지속적인 데이터 변화에 대응하기 위한 목적 ) * Virtual DOM : DOM을 추상화 한 형태 Virtual DOM 사용 시, DOM 에 접근하여 조작하지 않고 추상화 시킨 자바스크립트 객체를 구성하여 사용 -> 데이터 업데이트 되면, 전체 UI를 virtual 에 리렌더링 한다. -> 이전 virtual 에 있던 내용과 현재 렌더링 한 내용을 비교 -> 바뀐 부분만 DOM 에 적용됨 * JSX : javascript의 확장 문법이다. DOM 요소들을 만들 때 js형식이 아닌 xml과 같은 형식으로 작성하게 해줌. (권장사항임) DOM (Document Objec..

react.js 사용을 위한 필요한 라이브러리 react.js react-dom.js browser.min.js jquery.min.js Html —————————— , document.getElementById('content') ); > result : Hello, world! I am a CommentBox. test JSX없이 코드 작성한 경우 var CommentBoxs = React.createClass({ render: function() { return React.DOM.div({className:'commentBox'}, 'Hello' + this.props.name); } }); React.render( React.createFactory(CommentBoxs)({name : "test..

function scrollEvt(){ var iscroll = new iScroll('div 아이디',{ zoom : true, scrollX: true, scrollY: true, vScrollbar:false, hScrollbar:false }); }

1. iframe 태그에 접근 시, $('iframe').contents().find('head') 로 접근하기 contents() 붙이고 접근!!! iframe은 id붙여서 접근해도 가능 2. iframe안의 html의 javascript 함수 접근하려면 document.querySelector('iframe').contentWindow.Init.init(); contentWindow로 접근하기 3.ios에서 iframe 사용 시, div로 한번 감싼 후에 쓰기!! 스크롤 주고 싶다면 div에 주는것이 나음 은 ios에서 html에 직접 쓸 경우 css깨질 확률이 있으니, javascript에서 $('#div').html(''); 해서 사용!

3. 응용 -> 이렇게 style에도 쓸 수 있음 Total in dollar: {{ quantity * cost }} -> 계산도 가능, 결과 : 5 4. Angular JS object - 객체 형태 The name is The name is {{ person.lastName }} -> 객체형태로 저장한 후, person.lastName으로 보여줌 var app = angular.module('app',[]); app.controller('control',['$scope',function($scope){ $scope.obj = {}; //-> 객체 선언 $scope.click = function(){ $scope.obj.id = document.getElementById('m_id').value; $..

1. 선언부 2. 기초 data-ng , ng 나 똑같음 -> Angular JS 를 정의함 Name: ng-model : 데이터 입력 할 곳, html컨트롤 값 ng-bind : 해당 이름으로 받은 데이터를 보여줌 ng-init : 해당 이름으로 초기화 시켜줌 Name: {{name}} {{name}} 으로 데이터 보여줄 수 있음 Email: Not a valid e-mail address ng-show : 해당 경우가 true일 때 메시지를 보여준다. $scope.hideYN = true; {{obj.id}} {{obj.password}} 특정 조건일 때 if문 걸어서 hideYN true, false 설정 가능 연습 예제 First Name: ->초기화 되어진 데이터 보여줌 Last Name: Fu..

underscore.js 함수 정리 _.isEmpty() _.find() _.reject(배열, {키값:값}) 특정원소지워짐 _.select() : _.select([33,44,22],function(item){return item > 22}); result : [33,44] _.pluck() : array의 object형식으로, key/value 값으로 추출 _.pluck([{key : 1, val : '11'},{key : 2, val : '22'}],'key'); result : [1,2] _.pluck([{key : 1, val : '11'},{key : 2, val : '22'}],'val'); result : ["11","22"] _.map() : 배열 값을 변경 시켜서 추출 _.map([{k..

function ajaxTest() { $.ajax ({ type : "GET", // GET / POST url : 'test.html', // 서버측에서 가져올 페이지 data : 'a=1&b=2&c=3', // 서버측에 전달할 parameter timeout : 3000, // 응답대기시간 dataType : 'html', // html , javascript, text, xml, jsonp 등 beforeSend: function() { // ajax 요청하기전에 실행되는 함수 }, success : function(data) { // 정상적으로 완료되었을 경우에 실행된다 }, error : function(request, status, error ) { // 오류가 발생했을 때 호출된다. }, ..