WEB (10) 썸네일형 리스트형 [Web] Web RTC (Real Time Communication) WebRTC 핵심 개념 정리WebRTC(Web Real-Time Communication)는 브라우저 또는 모바일 환경에서 플러그인 없이 실시간 음성, 영상, 데이터 통신을 가능하게 하는 기술입니다. 일반적인 WebRTC 연결은 다음과 같은 단계로 이루어집니다.SignalingSDP ExchangeICE Candidate GatheringConnectivity CheckSecure Media Transmission각 구성 요소를 조금 더 자세히 살펴보겠습니다. Signaling시그널링(Signaling)은 각 peer가 서로 통신하기 위한 초기 연결 정보를 교환하는 과정입니다.WebRTC 자체는 시그널링 방식을 표준으로 정의하지 않습니다.따라서 보통 다음과 같은 프로토콜을 이용하여 구현합니다.WebSoc.. [Angular JS] Controllers Angular JS controllers Controller는 "ng-controller"라는 directive를 사용하고 javascript 생성자에 의해 만들어진 javascript object이다. 역할은 angular JS aplication에서 데이터를 조작한다. 아래의 예제를 보자. First Name: Last Name: Full Name: {{fullName()}} function personController($scope) { $scope.firstName = "John", $scope.lastName = "Doe", $scope.fullName = function() { return $scope.firstName + " " + $scope.lastName; } } 위의 예제를 보면 "p.. [Angular JS] Expressions & Directives Angular JS intro Angular JS는 javascript 프레임워크로 javascript로 쓰여진 라이브러리이다. 지시자(Directives)를 이용하여 HTML attribute를 확장하고 표현식(Expressions)를 사용해 HTML에 데이터를 binding한다. Angular JS를 사용하기 위해서는 아래와 같은 줄을 추가하여 Angular JS 라이브러리를 추가해주면 된다. Angular JS는 MVW(Model - View - Whatever) 패턴에 특화 되어 view와 controller를 를 분리하여 DOM을 구성하는 HTML과 controller를 구성하는 JS를 이원화했다. 그리고 scope를 통해 model의 변화를 감지하여 DOM에 반영할 수 있도록 구현되어 있어 개.. [jQuery] AJAX (Asynchronous Javascript And XML) load method $(selector).load(URL, data, callback); load method의 syntax는 위와 같다. 첫번째 매개변수인 'URL'은 필수 인자이며, 나머지 두 매개변수는 선택 인자이기 때문에 추가해도 되고 안해도 된다. 그리고 콜백 함수의 매개변수는 다음과 같다. responseTxt - load에 성공하면 결과값을 가지고 있다.statusTxt - load의 결과 상태를 가지고 있다.xhr - XMLHttpRequest 객체를 가지고 있다. 콜백을 사용한 함수의 예제는 아래와 같다. $("button").click(function(){ $("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr){ if(.. [jQuery] add/remove HTML element Add element (append / prepend / after / before) HTML element를 새로 추가하는 방법을 알아보자. append/prepend는 HTML content를 추가할 때 쓴다. HTML element의 끝에 추가하고자 할 때는 append()를 사용한다. 반대로 앞에 추가하고자 할 때는 prepend()를 사용한다. 여러 element들을 추가할 때는 append()와 prepend()의 인자를 여러 개로 주면 된다. $("p").append("Some appended text.");$("p").prepend("Some prepended text."); function appendText() { var txt1 = "Text."; // Create element wi.. [jQuery] get/set HTML content/attribute jQuery는 DOM(Document Object Model)을 조작하고 접근하기에 매우 편리한 방법을 제공한다. 이번 글에선 DOM에 접근하고 조작하는 법에 대해서 알아볼 예정이다. Get content element의 text content에만 접근하기 위해서 text()를 사용한다. element의 HTML content 자체에 접근하기 위해서는 html()을 사용한다. 이외에더 form element의 value에 접근하려면 val()을 사용한다. $("#btn1").click(function(){ alert("Text: " + $("#test").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#test").html()); }); $.. [jQuery] callback & chaining javascript는 line 단위로 실행 되기 때문에 가끔 실행된 다음줄이 바로 실행되서 에러 유발하기도 한다. 이럴 때, 한 줄의 실행이 다 완료된 상태에서 다음 줄을 실행되는 것을 보장하기 위해 사용하는 것이 'callback'이다. 일반적으로 'callback'을 사용하기 위한 문법은 아래와 같다. Typical syntax: $(selector).hide(speed,callback); callback을 사용한 예제와 사용하지 않은 예제를 비교해보면 아래와 같다. without Callback$("button").click(function(){ $("p").hide(1000); alert("The paragraph is now hidden"); }); with Callback$("button")... [jQuery] Effect hide/show and toggle 먼저, element를 숨기고 보이게만드는 hide/show가 있다. 이외에도 hide와 show를 번갈아서 사용하기 위한 toggle이라는 method도 있다. 사용법은 아래와 같다. 인자로 속도를 줄 수 있으며 속도의 단위는 milliseconds이다. milliseconds외에도 'fast'/'slow'로도 속도 인자를 줄 수 있다. $("#show").click(function(){ $("p").show(); }); $("button").click(function(){ $("p").show("slow"); }); $("button").click(function(){ $("p").hide(1000); }); $("button").click(function(){ .. 이전 1 2 다음
