본문 바로가기

분류 전체보기

 (283)
동기와 비동기 통신 1. 동기방식 서버에서 요청을 보낼 때 그에 따른 응답이 돌아오면 다음 동작을 실행한다. 동기라는 말은 요청과 응답이 한자리에서 동시에 일어난다고 생각하자 동기식 전송은 정해진 수 만큼의 문자열을 한 묶음으로 만들어 일시에 전송하는 것이다. 이때 전송단위로 취급되는 데이터를 프레임이라고 한다. 프레임은 4부분으로 구성된다. 프레임의 시작을 알리는 부분, 프레임의 길이와 수신측 주소등의 정보를 가진 제어부분, 사용자 데이터를 담는 부분, 프레임의 끝을 알리는 부분 데이터를 전송할 때 시작비트, 휴지비트를 전소하지 않아도 되고 일반적으로 비동기 방식보다 오버헤드가 적고 , 고속의 데이터 전송이 가능하다. 하지만 각 비트에 대한 클럭 정보를 수신측에 전송해야 하기때문에 비용이 많이 든다. 데이터와는 별도로 송..
Ajax A> Ajax 란 Asynchronous Javascript And XML xml을 이용하여 비동기로 통신을 처리하기 위한 기술이다. XMLHttpRequest(줄여서 XHR) 객체로 구현한다. 자바스크립트를 이용한 비동기 통신을 위한 기술이라 생각하자 A-A>사용하는 이유? 웹페이지의 속도가 빨라진다. 서버에서 완료가 다 되지 않아도 처리가 가능하다. 데이터만 가지고 오면 되므로 코드의 양도 줄어든다. 비동기 통신으로 UI를 좋게 할 수 있다. A-B> 단점 히스토리 관리가 안된다. 연속적인 데이터 통신은 서버에 부담을 준다. 디버깅이 잘 안된다. CORS 문제도 있다. B>동기, 비동기 방식 통신 동기 동기 통신 환경에서는 송 수신측은 데이터를 전달받을 때 , 데이터를 전달받을 준비를 상시 하고 있어..
jQuery 10 - jQuery 모바일 A>jQuery moblie 모바일에서 보여지는 웹 페이지를 마치 휴대폰 앱 처럼 보여주는 jQuery 기반의 라이브러리 1. 앱의 종류 -- 네이티브 앱 : = 안드로이드 앱(apk 파일들) -- 웹 앱 : = 웹 기반의 어플리케이션 -- 하이브리드 앱 : =웹 + 네이티브 --폰 갭 : 잘 사용하진 않지만, 하이브리드 앱 만드는 툴 2.cdn --min 의 의미는 minimize == 압축했다는 뜻 3.data-role -- 보여줄 페이지를 설정 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 jQuery Mobile 첫 번째 페이지 ! 두 번째 페이지로 전환하기 ! copyright 2012 syj jQ..
jQuery 9 -- 유저 인터페이스(UI) A>날짜에 대한 UI http://jqueryui.com/demos/datepicker 에서 얻을 수 있다. B> jQuery UI는 플러그인 패턴을 기반으로 구축되어 있다. http://jqueryui.com/download에 가서 jquery-ui-1.8.16.zip 파일을 다운 받는다. 압축을 푼 후 jquery-ui-1.8.16.custom\js\jquery-ui-1.8.16.custom.min.js 파일을 js 폴더에 복사한다. 스타일시트를 적용 받으려면 jquery-ui-1.8.15.custom\css 폴더도 복사해 둔다 C> 드래그 앤 드롭 기능 구현 1 2 3 4 5 6 7 8 $("#draggable").draggable({opacity:"0.3"}); $("#droppable").dro..
jQuery8 --플러그 인 (plug in) A> 플러그 인이란 jQuery 자체를 확장해서 사용하기 위한 jQuery 라이브러리의 형태 speckyboy.com/free-jquery-plugins/ 50 Most Useful jQuery Plugins for Frontend Development As jQuery is extendable, there are many plugins freely available for almost every functionality you can possibly think of. We highlight the top 50 for you. speckyboy.com
jQuery7 - 유틸리티(utility) A> 컬렉션 처리 메서드 1.$.each $.each(object, callback(indexInArray, valueOfElement) 2.$.grep $.grep( array, function(elementOfArray, indexInArray) [, invert] ) 3.$.makeArray() $.makeArray( obj ) --반복 구조를 갖은 배열 형태의 객체를 Array 객체로 변형한다. 4. $.inArray() -- $.inArray( value, array [, fromIndex] ) -- 배열에 value가 몇 번째 index에 존재하는지 알려준다. -- index는 0부터 시작하고 value가 존재 하지 않을 경우에는 -1를 리턴한다. 5. $.map() -- $.map( arra..
jQuery6 --이벤트(event) A> bind('이벤트', 기능) 형태1 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 //1. 객체를 만들고 그 안에 이벤트: 기능 형태로 bind $(function(){ $('img').bind({ mouseout : function(){ $("img").attr("src", "../images/but1.gif"); }, mouseover : function(){ $("img").attr("src", "../images/but2.gif"); }, click : function(){ alert("클릭"); } }); }); //2 click 이벤트와 function(event)를 바인딩 $(function(){ $('img').bind('click',..
jQuery5 --이펙트(effect) A> hide() : 숨긴다. hide(속도, 기능) : 속도 만큼의 속도로 숨겨짐 show() : 보이게 한다. show(속도,기능) :속도만큼의 속도로 보여줌, B> fadeIn(속도) : 서서히 보이게 한다. fadeOut(속도) : 서서히 없어지게 한다. fadeToggle(속도) : 안보이면 보이게, 보이면 안보이게 한다. 서서히 fadeTo( 속도,투명도): 투명도까지 변화시킨다. C> slideDown(속도): 슬라이드 되어 내려간다. slidUp(속도): 슬라이드 되어 올라간다. slideToggle(속도) : 슬라이드 되 있으면 올리고, 올려져 있으면 내린다. D> animate({방향: 거리}) -- 예시 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 ..

티스토리툴바