본문 바로가기

Programming/JavaScript

Web RTC란? | P2P 연결 과정, NAT, STUN, TURN, ICE WebRTC(Web Real-Time Communications)란? 웹 어플리케이션에서 음성, 영상, 또는 텍스트 파일과 같은 데이터를 브라우저끼리 실시간으로 주고 받을 수 있게 만든 기술이다. WebRTC를 이용하면 외부 소프트웨어나 플러그인을 설치할 필요 없이 데이터를 공유할 수 있고 peer-to-peer 화상회의가 가능하다. 브라우저 호환성 WebRTC는 지속적으로 발전하고있고 브라우저별로, 또는 브라우저의 버전별로 codec과 WebRTC에 대한 지원 수준이 다르기 때문에 안정적인 사용을 위해 adapter를 사용할 것이 권장된다. https://github.com/webrtcHacks/adapter WebRTC 핵심 개념들: NAT, STUN, TURN, ICE NAT(Network Addr.. 더보기
[Javascript] Static Method Static Method(정적 메소드) 정적 메소드란 생성자의 프로토타입 속성에 할당되어있지 않고 클래스 자체에 직접 할당되어있는 메소드이다. 정적 메소드는 인스턴스 객체로는 접근할 수 없고 클래스로만 접근할 수 있다. 자바스크립트에서 생성자는 생성자 함수를 통해 만들 수 있다. 생성자함수 function Person (gender, name) { this.gender = gender; this.name = name; } Person.prototype.introduce = function () { return `안녕하세요 제 이름은 ${this.name}입니다`; } const person1 = new Person("여자", "은빈"); person1.introduce(); // "안녕하세요 제 이름은 .. 더보기
[Javascript] Promise 프로미스를 사용하면 비동기적으로 수행되는 작업의 성공과 실패를 분리해 그에 맞는 처리를 할 수 있게 된다. - 프로미스 생성 let promise = new Promise(function(resolve, reject) { // 실행 코드(성공하면 resolve함수 실행 / 실패하면 reject함수 실행) }); 프로미스 객체는 new Promise() 명령을 통해 생성할 수 있다. 프로미스 생성자의 인자는 반드시 함수(executor)여야하며 이 함수는 프로미스 객체가 생성되면 자동적으로 실행된다. 이 함수의 인자인 resolve, reject함수는 자바스크립트에서 자체적으로 제공된다. resolve함수는 실행 코드가 성공하면 실행시키는 함수이고 reject함수는 실행코드가 실패했을 때 실행시켜야 하는 .. 더보기
[JavaScript] 객체 내에 존재하는 속성에 접근하기 자바스크립트에서 속성은 열거가능한(enumerable) 속성과 열거가능하지 않은(non-enumerable) 속성으로 나뉜다. 또한 객체 자신이 소유하고 있는 속성과 부모에게서 상속받은 속성으로도 구분할 수 있다. 메서드에 따라 객체의 속성에 접근할 수 있는 범위가 달라진다. 다음 코드의 예제로 살펴보자. const Person = function (name, height) { this.name = name; this.height = height; this.eye = 2; }; Person.prototype.age = 50; const person1 = new Person("eunbin", 200); person1의 상속받은 속성들은 모두 Person.prototype 객체에서 상속받은 속성들이다. 이 .. 더보기
[Javascript] 프로토타입 Prototype : 원형, 근본 프로토타입이란 어떤 객체를 뜻한다. 그 객체는 다른 객체가 해당 객체의 속성과 메소드를 사용할 수 있는 객체이다. 즉, 프로토타입은 객체와 객체 사이에 상속같은 현상이 일어나 상위 객체의 속성에 접근할 수 있는 것을 뜻하고 이것은 생성자함수와 new키워드를 통해 구현된다. 우선 프로토타입이 왜 필요한지 알아보자. 예를 들어 여러 개의 책의 정보를 저장하는 객체들을 만든다고 가정해보자. book1 = { name: "어린왕자", publisher: "우리출판사", displayInfo: function () { return "책 제목: " + name + "출판사: " + publisher; }, }; book2 = { name: "죄와벌", publisher: "하나출판.. 더보기
[JavaScript] sort() 메소드를 이용한 배열 정렬 dudmy.net/javascript/2015/11/16/javascript-sort/ 자바스크립트 정렬 함수, sort() - Dudmy's Devprint 자바스크립트 배열의 내장 함수에 sort()가 있다. 명칭 그대로 배열 안의 원소를 정렬하는 함수이다. 추후에 또 검색할 것 같아서 적어놓는다. arrayobj.sort(sortFunction) arrayobj는 임의의 Array 개체이 dudmy.net 자바스크립트에서 sort()메소드를 사용해 배열을 정렬할 수 있다. array.sort([compareFunction]); conpareFunction은 생략 가능하며 생략하면 기본적으로 유니코드를 기준으로 정렬한다. 문자열 요소의 배열을 정렬하는 경우 ) const stringArray = [".. 더보기
[JavaScript] 원시값과 참조값 (Primitive & Reference) 자바스크립트의 데이터 타입은 그 작동 원리에 따라 두 종류로 나눌 수 있다. - 원시값 : string, number, boolean, null, undefined - 참조값 : object, symboll Primitive(원시값)과 Reference(참조값)의 차이점 모든 변수는 선언과 할당의 과정을 거친다. 선언: 메모리의 빈 공간에 식별자를 저장한다. * 선언된 순간 이 공간은 비어있다. 그러나 이 시점에서 변수를 호출하면 undefined가 출력되는데, 그 이유는 자바스크립트 엔진이 값이 없는 변수를 출력하려고 할 때 빈 공간 대신 undefined를 보여주기 때문이다. 할당: 변수의 데이터 영역에 주소를 연결한다. 원시값과 참조값의 차이는 이 주소의 차이에서 발생하는데, 간단히 말해서 원시값은.. 더보기
[Javascript] Executive context(실행 콘텍스트) 1. 실행 콘텍스트란 실행 가능한 코드가 실행되기 위해 필요한 환경 정보들을 모아놓은 객체이다. 실행 가능한 코드에는 전역코드, 함수코드, eval()코드가 있다. 실행에 필요한 환경 정보들 - 변수 (전역변수, 지역변수, 매개변수, 객체의 프로퍼티) - 함수 선언문 - 변수의 유효 범위(scope) - This binding 실행 컨텍스트는 스택(stack)의 형태로 되어있어 FILO(First In Last Out)의 프로세스로 작동한다. 즉, 가장 최근에 등록된 객체부터 먼저 실행되고 맨 처음에 등록된 객체가 가장 마지막으로 실행된다. 2. 실행 콘텍스트에 담기는 정보 다음 설명에서 LexicalEnvironment와 lexical environment라는 단어가 혼용되어 쓰일 것이다. (lexic.. 더보기

티스토리툴바