본문 바로가기

전체 글

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.. 더보기
[Node.js] REST의 개념과 진정한 REST API에 대하여 REST(REpresentational State Transfer) : HTTP 창시자 중 한 사람인 Roy T. Fielding은 개발자들이 웹을 사용할 때 본래 설계의 우수성을 잘 사용하지 못하고 있다고 판단했고, 웹의 점을 최대한 활용할 수 있는 네트워크 기반의 아키텍쳐인 REST를 처음 소개한다. REST의 정의 a way of providing interoperability between computer systems on the Internet. 컴퓨터 시스템과 인터넷 간의 상호 운용성을 제공하는 방법(위키피디아) REST는 웹과 같은 분산 하이퍼미디어 시스템을 위한 소프트웨어 아키텍처 스타일을 말한다. * 하이퍼 미디어 시스템 = 다른 문서로 이동할 수 있는 하이퍼링크를 가지면서 그 내부에 .. 더보기
[React] PropTypes를 작성해야하는 이유 React props 리액트에서는 자바스크립트의 함수를 호출할 때 매개변수를 전달하는 것 처럼 데이터(숫자, 문자열, 함수, 객체, 배열 등등)를 전달할 수 있다. 그러나 컴포넌트가 잘못된 타입의 props를 받으면 bug가 발생하게 되고 에러가 발생해 애플리케이션이 중단된다. 자바스크립트에는 내장되어있는 타입 체크 솔루션이 없기 때문에, 많은 개발자들은 TypeScript와 Flow와 같은 extention들을 사용하지만, 리액트에는 props의 유효성을 검사하기 위한 내부적인 매커니즘인 PropTypes가 있다. TypeProps 리액트 애플리케이션을 개발할 때, 어떤 props가 정의되지 않으면 적절하게 렌더링되지 않기 때문에 필수적으로 props을 정의해야하는 경우가 있다. props가 리액트의 .. 더보기
[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(); // "안녕하세요 제 이름은 .. 더보기
[번역] 팩토리함수 vs 생성자함수 vs 클래스함수 (JavaScript Factory Functions vs Constructor Functions vs Classes by Eric Elliott) 이 글은 아래 블로그 포스팅을 한글로 번역한 글입니다. 오역이 있을 수 있으니 양해 부탁드리고 댓글로 알려주시면 감사하겠습니다!! https://medium.com/javascript-scene/javascript-factory-functions-vs-constructor-functions-vs-classes-2f22ceddf33e JavaScript Factory Functions vs Constructor Functions vs Classes Prior to ES6, there was a lot of confusion about the differences between a factory function and a constructor function in JavaScript. Since… mediu.. 더보기
[Data Structure] Linked List Linked list(연결리스트) 연결리스트의 모든 요소는 node로 이루어져있으며 각 노드는 그 다음 노드에 대한 주소값을 참조하고, 선형적인 자료구조로 메모리에 연속적으로 위치해있지 않다. node = data field + 다음 node에 대한 reference값 배열과 유사하지만, 배열은 다음과 같은 한계가 있다. - js를 제외한 대부분의 언어에서, 배열의 크기는 고정되어있다 : 우리는 배열의 요소의 최대 개수를 반드시 알아야한다. - 요소를 삽입할 때 새로운 요소를 위한 공간을 만들기 위해 존재하는 모든 요소가 이동해야 한다. 그래서 요소 삽입에 비용이 많이 든다 연결리스트의 장점 - dynamic size → 프로그램이 진행되는 동안 크기가 커지거나 작아질 수 있다. - 자료 삽입, 삭제가 .. 더보기
[React] 리액트 패키지 body-parser 사용시 취소선 해결 방법 body-parser node.js의 모듈로 express의 미들웨어이다. body-parser는 클라이언트에서 post 요청으로 받은 body 데이터로부터 파라미터를 편리하게 추출할 수 있다. body-parser의 역할은 이름에서알 수 있듯이 'body'를 parsing(파싱)하는 일을 한다. 클라이언트측에서 body객체에 데이터를 담아 POSTRequest로 서버단에 전달하면 서버단에서는 express를 이용해 요청받은 req.body객체를 받아 사용한다. 그런데 body-parser가 없다면 에러가 발생하는데, 그 이유는 req.body는 body-parser를 사용하기 전에는 디폴트값으로 Undefined가 설정되기 때문이다. 예를 들어 다음과 같은 데이터를 body에 담아 POST reques.. 더보기
[Algorithm] 프로그래머스 - level1 <체육복> 문제명 : 체육복 사이트 : 프로그래머스 난이도 : level 1 사용 언어 : javascript 접근 방식 여벌의 체육복이 있는데 도난당한 학생의 경우 lost와 reserve 모두에서 제외한다. (입을 체육복이 있으나 더이상 빌려줄 수 없기 때문) lost 각각의 요소에 +1, -1을 한 값이 reserve에 있는지 확인하고 있으면 체육복이 없는 학생 수 - 1, 일치하는 reserve 값을 reserve에서 제거 function solution(n, lost, reserve) { let students = n; const realReserve = []; reserve.forEach((res) => { if (lost.indexOf(res) === -1) { realReserve.push(res);.. 더보기

티스토리툴바