WebRTC를 간단하게 알아보기


안녕하세요.
고코더 입니다.


오늘은 무료 API로 실시간 통을 가능하게 하는 WebRTC에 대해 알아보려고 합니다


한줄 요약


 1. 고코더가 생각하는 한줄 요약은

"웹브라우저만으로 플러그인 도움 없이 실시간으로 고품질 커뮤니케이션 기술로, 영상, 음성 및 데이터 통신을 하는 자바스크립트 API이다."



구글이 시작한 프로젝트 


 2. WebRTC 공식 홈페이지 입니다. 

접속하면 Real-time communication for the web(웹을 위한 실시간 커뮤니케이션) 이라고 정체성을 드러내는 문구가 인상적입니다. 그리고 하단에 보면 Google Developers (구글 개발팀)의 로고가 보입니다. 


 3. WebRTC 소스 저장소
 
해당 프로젝트는 홈페이지의 정체성 처럼 구글에서 만든 오픈 API입니다. Google Chrome Team을 시작으로 Mozilla, Opera 재단의 지원을 받으며 프로젝트를 진행하고 있습니다. 그리고 W3C 국제 표준화로 지정되었습니다.  BDS라이센스의 오픈 프로젝트이기에 누구나 소스를 확인하고 수정할 수 있습니다. (코드 리뷰가 가능하면) 



WebRTC가 등장한 이유


 4. 기존 서비스의 문제

스트리밍 세상이 도래했습니다. 다운로드 시대에서 연결의 시대로 변모 하였습니다. 그만큼 영상을 라이브로 즐겨보는 사람들이 많아졌다는 증거입니다. 오늘 하루에도 유투브를 얼마나 많은 분들이 보는거 보면 확실히 스트리밍 세상이 맞는거 같습니다. 


하지만 상용화된 방식중에 HTML5는 보안점이 취약한 개방형 프로토콜이고 active-x나 flash 형 도구는 사용자들부터 거부감이 들정도로 문제점이 많았습니다. 덕지 덕지 설치되는 강제 프로그램과 운영체제를 느리게 하는 불완전성까지 아직도 국내에 많은 스트리밍 업체들은 이 방식을 사용중입니다.

 5. 이를 해결한 WebRTC

WebRTC는 이러한 문제점을 해결한 API입니다. 웹 브라우저간의 API 통신이기에 프로그램 설치도 필요없고 운영체제에 부담을 주지 않아도 됩니다. 사용하기 편리하고 신뢰성 있는 프로그램은 승리하기 마련인거 같네요.



WebRTC의 문제점


 6. 크로스 브라우징 문제 

하지만 이 방식에도 단점이 있습니다. 지원하는 브라우저의 한계가 있는 크로스 브라우징 문제입니다. 각 브라우저 회사에서 이에 맞게 개발을 해야 하는 문제점이 있었지만 지금은 대부분의 브라우저들이 이를 지원합니다. 사파리와 그리고 인지도가 낮은 브라우저를 쓰는 사용자나 예전 버전 브라우저를 쓰시는 분은 사용이 불가능합니다.

 7. STUN/TURN 서버 필요

방화벽(firewall)문제가 있습니다. 같은 네트워크 상에서는 문제가 없지만 다른 네트워크상에서는 STUN/TURN 서버를 설치한 후 사용해야 합니다.


대표 API



 8. 크로스 브라우징 문제 대표 API는 3가지 입니다. 하지만 이걸로 많은 부분을 개발 가능합니다. 

GetUserMedia
- 클라이언트 사용자 컴퓨터의 카메라와 마이크 접근을 담당합니다.
RTCPeerConnection
- Peer간의 연결을 생성하여 오디오와 비디오 통신에 사용 하게 합니다. Stun 서버가 필요한 부분입니다.
RTCDataChannel
- Peer간의 데이터를 주고 받을 수 있는 Tunnel API 입니다.



마무리


쉽게 이해가 가죠!?


댓글을 달아 주세요


호이스팅 쉽게 알아보자


안녕하세요.
고코더 입니다.


오늘은 자바스크립트 언어의 고유한 특징인 "호이스팅(Hoisting)"을 간단하게 알아보겠습니다. 저는 최대한 한눈에 알아 볼 수 있게 쉽게 설명하려고 합니다. 


개념


 1. 호이스팅의 단어의 뜻

영어 사전을 보면 해당 단어의 뜻이 "끌어 올리기; 들어올려 나르기."라고 사전에 나옵니다. 이 개념의 의미는 선언들을 끌어올려 최상단에 갖다. 두는 걸 이렇게 표현했습니다.


 2. 호이스팅의 개념

- 자바스크립트가 실행되면 parser가 빌드하면서 문법을 검사합니다. 이 와중에 끌어올릴 값을 선택하여 내부적으로 최상단으로 끌어 올려 처리합니다.
- 여기서 끌어 올려질 내용들은 선언입니다.  var, let, const, function 등이 대표적입니다.
- 전역 범위(global scope)내에서는 스크립트 최상단으로 끌어 올립니다.
함수 범위(function scope)내에서는 함수의 최상단으로 끌어 올립니다.



변수 호이스팅 예제



 3. 해당 소스를 실행합니다. var 변수 선언을 하단에 할당하고 위에서는 선언하지 않은 변수에 먼저 값을 넣었습니다.
1
2
3
Go = 5
console.log(Go);
var Go; //parse에 의해 끌어올려진다
cs

결과 값은 5가 정상적으로 노출 됩니다. 

.

 4. 실제로 parser 끌어 올려 실행된 소스의 형태는 이렇습니다.
1
2
3
var Go; //parse에 의해 끌어올려짐
Go = 5
console.log(Go);
cs

우리가 아래에 실수로 변수를 선언해도 오류가 없었던건 바로 호이스팅이 끌어 올렸기 때문입니다. 


함수 호이스팅 예제


 5. 함수는 아래에 존재하지만 위에서 함수를 실행합니다. 과연 어떻게 될까요?
1
2
3
4
Coder();
function Coder() { // parser에 의해 상단으로 끌어올려진다
    console.log("고코더");
}
cs

 6. 결과 값은 :고코더"라는 문자열이 정상적으로 노출 됩니다. 


 7. 실제로 parser에 의해 끌어올려진 모습은 이렇습니다. 함수가 먼저 선언되어 있기 때문에 오류 없이 실행되어었던 것입니다. 
1
2
3
4
function Coder() {
    console.log("고코더");
}
Coder();
cs

실무에서 function이 밑에 있는데 실행되는걸 의아하게 생각했던분들은 호이스팅이 범인입니다.


호이스팅 되는 순서 


 8. 그렇다면 이렇게 함수와 변수가 동시에 아래에 있다면 어떤 요소가 제일 상단으로 올라갈까요? 아래 예제 소스를 한번 수정 해보세요.

1
2
3
4
5
6
7
8
Go = 5
console.log(Go);
var Go;
 
Coder();
function Coder() { 
    console.log("고코더");
}
cs

 9. 정답은 이렇습니다. 변수가 가장 맨위로 올려지고 함수가 그 다음에 위치합니다. 우선 순위는 변수가 최우선 입니다. 

1
2
3
4
5
6
7
8
9
var Go;    //parser에 의해 최상단
function Coder() {  // parser에 의해 변수 다음으로 
    console.log("고코더");
}
 
Go = 5
console.log(Go);
Coder();
 
cs



주의사항


 10. 호이스팅을 사용할때 조심할 점이 있습니다.
 
- 호이스팅이 없는 거처럼 상단에 먼저 선언하는 것이 좋은 코딩입니다. 하지만 호이스팅만 믿고 아무데나 선언하는건 좋은 코딩이 아닙니다.
- 함수선언식은 호이스팅 되지 않습니다. 이 부분은 나중에 더 상세하게 다루겠습니다.
- let/const 사용을 권장합니다. 



마무리


호이스팅 단어 뜻 그대로 개념을 외우시면 될거 같습니다. 


댓글을 달아 주세요


진도는 공부하지 않아도 됩니다.


안녕하세요.
고코더 입니다.


 1. 후배 개발자가 Jindo 프레임워크를 공부해도 되냐는 질문에 단호하게 "No" 라고 대답했습니다.
진도는 네이버가 만든 국산형 자바스크립트 프레임워크 입니다. 제이쿼리를 대항하는 유일한 국산기술이었습니다.
네이버는 프론트 엔드 개발을 Jindo를 활용해서 개발하였고 자체적으로 계속 개발해왔습니다.
개인적으로 국산형 프레임워크에 대한 자부심으로 저도 공부하고 했었지만 이제는 굳이 사용하거나 공부할 필요가 없습니다.


왜냐면 2017년에 이 서비스의 개발과 유지보수를 포기하였습니다.
진도 홈페이지에 들어가면 노란 레이어로 친절하게 사용하지말고 기존에 Jindo 또한 제이쿼리로 변경하라는 지침을 공지했습니다.


 2. 네이버에서 서비스하는 네이버 뮤직은 프론트엔드 화면을 진도로 개발되었습니다.


 3. 소스 보기를 하면 여전히 진도로 운영되고 있습니다. 네이버 서비스라서 유지가 가능한거 같은데 이 서비스도 리뉴얼 된다면 제이쿼리로 변경 되겠죠? 


 4. 개인적으로 아쉽습니다. 국산 자바스크립트 프레임워크가 글로벌 서비스가 되었으면 좋았을텐데요.  그리고 이 책을 구매해서 공부까지 했던 기억이 나는데 한번도 쓴적도 없고 기억도 안나네요. 


항상 학습은 가장 많이 사용하는 기술 먼저 공부하세요.


마무리


결론은 진도 공부하지마시고 제이쿼리만 하시면 되요.. 


댓글을 달아 주세요


자바스크립트 리터럴 문자는 어떤 따옴표로?


안녕하세요.
고코더 입니다. 


 1. 자바스크립트 소스를 보면 문자열을 감싸는 따옴표가 저마다 조금 다른 경우가 있습니다. 
1
2
var a = "문자"
var b = '문자'
cs

 2. 자바(java)에서는 리터럴 문자 즉 한글자 문자열은 작은 따옴표를 사용합니다.
긴 문자열에 작은따옴표를 사용하면 오류가 납니다.

1
2
3
char c = 'g';
String s = "gocoder";
 
cs

 3그리고 반대로 SQL에서는 문자열을 큰 따옴표로 사용하게 되면 오류가 납니다.
1
WHERE gocoder = 'IT';
cs

 4그래서 저마다 의견이 갈리는 경우가 있습니다. 프로시저 개발자들에겐
큰 따옴표로 문자열을 처리한다는게 어색하고 자바 개발자는 반대로
작은 따옴표로 문자열을 감싼다는게 이해 불가입니다.


 5결론적으로 

두개 모두 오류가 나지 않습니다. 그리고 두 가지 사용 가능한 표준이란 겁니다.
그렇다면 다시 말해서 어떤걸 사용해야 한다고 묻는 다면 정답은
규칙을 정하세요! 라고 말씀드리고 싶습니다.
회사에 코딩 규칙을 정할때 보통 자바스크립트 따옴표를 정합니다.
그리고 대부분 작은 따옴효 홀따옴표를 사용하도록 만드는게 대부분입니다.

 6구글에서 정리한 스타일 가이드에 보시면 문자열을 작은 따옴표 홀따옴표로 감싼걸 확인할 수 있습니다.
물런 구글이 만사는 아니지만 그래도 지구에서 가장 IT를 잘하는 회사가 하는걸 따라 하는걸 선택했습니다.


하지만 회사에 규칙에 따라 한가지만 사용하는게 중요합니다.


마무리


Q. 고코더님 그래서 뭘 사용하라고요?
A. 그냥 작은 따옴표 어떠세요?


댓글을 달아 주세요


getTime으로 표현한 데이터 15자리는 무슨 의미?


안녕하세요.
고코더 입니다.


자바스크립트에서 getTime()은 자주 사용하는 함수 입니다. 시간이 1/1000 까지 나타내주므로 페이지에 로딩 시간을 체크할 수도 있고 채팅에서는 아주 좋은 시간 값으로 사용이 가능합니다.


 1. 그런데 숫자 모양이 조금 이상하게 느껴질 수 있습니다. 현재 getTime 을 가져오면 이와 같은 값이 나타납니다. 
1574663052422


 2. 이건 1970.01.01 이후 부터 경과한 시간을 milliseconds 단위 그러니깐 1/1000단위로 표현된 숫자 표현입니다.  그래서 반대로 1970년대 이전으로 날짜로 하고 계산을 하면 이렇게 마이너스 값을 확인 가능합니다.
-315619200000


 3. 결론은 1970년 1월 1일부터 얼마나 시간이 흐른 초를 1/1000으로 나눈 밀리세컨드 단위로 표현합니다.


마무리


왜 1970년이 기준일까요?


댓글을 달아 주세요



자바스크립트란?


안녕하세요.
고코더 입니다. 



자바스크립트는 넷스케이프 커뮤니케이션즈 코퍼레이션사에 브래던 아이크가 개발한 객체기반의 스크립트 언어 입니다. 
HTML과 CSS로 만들어진 정적인 화면을 동적으로 변경해주는 언어입니다. 페이지에 컨텐츠를 변경하거나 이미지를 움직이게 하거나 그리기도 할 수 있습니다. 그 밖에도 동적인 모든것을 이벤트를 주어 사용할 수 있게 합니다.


자바스크립트의 특징은 이렇습니다.


1. 상속과 클래스 개념이 없는 객체 기반의 언어이다
2. 인터프리터 언어로 브라우저에 의해 해석 가능하다.
3. HTML 문서 안에 기술 가능하고 함께 수행한다.
4. 클라이언트 자원을 활용할 수 있게 한다. 



자바스크립트의 구성



1. 객체
    - 사용자 정의 객체, 내장 객체, 브라우저 객체를 사용할 수 있습니다.
2. 문법
    - 자료형, 변수, 제어문, 함수등에 문법등을 사용 가능합니다.
3. 에빈트와 핸들러
    - 동적인 이벤트를 자바스크립트로 수행합니다. 이 핸들러를 통해 상호작용 있는 페이지를 생성 할 수 있습니다.



개발자들에게 자바스크립트란?



JAVA, 닷넷, PHP 어떤 서버 사이드 언어를 해도 자바스크립트는 기본으로 사용하게 되어 있습니다. 프론트에게 보여줄 뷰 페이지는 HTML 과 자바스크립트로 이루어져 있기 때문입니다. 그래서 많은 분들에게 이 언어는 친숙하고 사용가능합니다. 노드JS가 발표되었을때 주목되었던 부분도 자바스크립트 문법을 이용해서 프론트와 백엔드까지 개발 가능하기 때문입니다. 새로운 언어를 배우기 위한 습득 과정은 없어지기 때문에 접근성이 뛰어납니다. 


자바스크립트는 아주 잘할 필요가 있습니다.


가장 최근에 나오게 될 라이언달에 새로운 언어 Deno도 역시 자바스크립트 언어를 기반으로 작성가능합니다. 그리고 자바스크립트를 이용해 화면을 개발하는 프론트 개발자가 각광받고 있는 시대 입니다. 
언어가 변하고 새로운 프레임워크가 등장해도 자바스크립트는 어느곳에든 어떻게든 쓰이게 되어 있습니다. 
가끔 서버언어는 잘 다루지만 자바스크립트는 기초수준에 중급 개발자분들도 보일때가 있습니다. 자바스크립트를 연습해 포트폴리오를 완성해보는걸 추천 드립니다.



마무리


해도 해도 어려운.. 스크립트


댓글을 달아 주세요


자바스크립트 3자리 콤마


안녕하세요.
고코더 입니다.


3자리마다 콤마는 많은 숫자를 한눈에 보기 쉽게 만들어주는 양식입니다. 그래서 실무 프론트엔드에서는 숫자는 기본적으로 콤마를 찍어 노출하는데요. 자바스크립트로 이 콤마를 작성하는 가장 쉬운 방법을 소개할려고 합니다.

 1. 우선 정답은 해당 함수를 이용 합니다. 
해당 함수가 아니면 문자열을 세어서 콤마를 찍어주는 함수를 사용할텐데요
이 한줄이면 해결 됩니다.
1
toLocaleString() // 특정 언어에 맞는 형식으로 반환
cs



 2. 해당 함수로 간단하게 적용해보았습니다.
해당 함수를 숫자를 표현하니 자연스럽게 콤마가 붙습니다.
1
2
3
4
5
6
7
8
9
<html>
<head>
<script type="text/javascript">
    document.write(Number(3000).toLocaleString('en'));
    document.write('<Br>');
    document.write(Number(50000000).toLocaleString('en'));
</script>
</head>
</html>
cs
 3. 내장함수를 이용한 표현이라 오류도 없고 가독성도 좋습니다.



마무리


괜히 함수 만들었네



댓글을 달아 주세요


ajax 동기식은 진정한 동기 방식이 아니다


안녕하세요.
고코더 입니다.



요즘은 백엔드와 프론트로 나눠져 있는 웹생태계 덕분에 ajax 사용이 많아졌습니다. 거의 필수적인 함수 입니다. 저도 처음 ajax를 만나고 이렇게 자주 사용할줄은 몰랐네요. 

 1. 그런데 ajax에 보면 항상 보이는 옵션이 있습니다. async 라는 옵션입니다. 많은 분들이 이 옵션으로 동기,비동기를 처리할 수 있는걸로 알고 있습니다. 하지만 맞는 말이기도 하고 틀린 말이기도 합니다. 사실 ajax 자체가 비동기 처리를 위해 사용되는건데 동기로 지정한다는게 약간 어불성설 같습니다. 




 2. 우선 사용법은 아래와 같습니다.

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
31
32
33
34
35
<html>
<head>
<script type="text/javascript">
var arryData = [];    //배열을 선언
 
    node = {
        "name"    :    'gocoder',
        "url" :    'gocoder.net'
    };      
    arryData.push(node);    //배열을 push 뒤에 넣는다
 
 
    node = {
        "name"    :    '이름',
        "url" :    '주소'
    };      
    arryData.unshift(node);    //배열을 unshift 맨 앞에 넣는다
 
 
    node = {
        "name"    :    'gc',
        "url" :    'gocoder.net'
    };      
    arryData.push(node);    //배열을 push 뒤에 넣는다
 
    for (var i = 0; i < arryData.length; i++) {
        document.write(arryData[i].name);
        document.write(' , ');
        document.write(arryData[i].url);
        document.write('<br>');
    }
</script>
</head>
 
</html>
cs

 3. 그래서 해당 jqery 함수 설명을 찾아보았습니다.  결론적으로 ajax는 기본적으로 비동기를 사용하고 도메인간 요청이나 jsonp 와 같이 동기로 처리해도 소용 없는 것들은 자동으로 비동기로만 지원한다고 합니다. 그리고 그외에 동기 요청 할때는 브라우저를 일시적으로 잠궈서(Lock)을 걸어서 동기 처리를 한다고 하네요. 결론은 ajax가 처리하는 우리가 아는 동기 프로세스라기 보다는 일시중지를 이용하는 방식입니다.



마무리


ajax로 된 결과 값을 순차적인 로직에 담아야 한다면
sync : false 를 이용해서 동기처리를 활용하세요.










댓글을 달아 주세요


array 에 데이터를 추가 하는 방법


안녕하세요.
고코더 입니다. 



자바스크립트에서 배열은 매우 중요합니다. 특히 데이터를 배열에 추가하여 다시 사용하는건 프론트엔드 개발의 기본입니다. 그래서 오늘은 배열에 값을 넣는 대표적인 2가지 방법인 push()와 unshift()를 배워보겠습니다.



 1. push() : 배열 뒤에 값을 입력한다.


push()는 배열 뒤에 값을 입력하는 대표적인 배열에 값을 추가하는 방법입니다.
배열을 선언하고 해당 배열에 push로 데이터를 넣는 방식입니다. 뒤로 순차적으로 데이터가
쌓이기에 백엔드에서 전달해주는 데이터 그대로를 담을 수 있습니다. 
1
2
3
4
5
6
    jvar arryData = [];    //배열을 선언
    arry = {
        "name"    :    'gocoder',
        "url" :    'gocoder.net'
    };      
    arryData.push(arry);    //배열을 push 뒤에 넣는다
cs

푸시한 데이터는 순차적으로 배열에 입력 됩니다.


 2. unshift() : 배열 맨 앞에 데이터를 담기


실무에서 자주 쓰는 함수입니다. 순차적으로 담긴 데이터 맨 앞 배열에 해당 데이터를 입력합니다.  
예제를 보시면 먼저 담긴 홈페이지 주소보다 이름 주소가 먼저 나타납니다. 
1
2
3
4
5
6
7
8
9
10
11
12
13
    var arryData = [];    //배열을 선언
 
    arry = {
        "name"    :    'gocoder',
        "url" :    'gocoder.net'
    };      
    arryData.push(arry);    //배열을 push 뒤에 넣는다
 
    arry = {
        "name"    :    '이름',
        "url" :    '주소'
    };      
    arryData.unshift(arry);    //배열을 unshift 맨 앞에 넣는다
cs
배열에 맨 앞으로 데이터를 보냅니다.



 3. 종합 예제


두개의 함수를 이용해 예제를 실행해봅니다.
이해하기 어렵지 않으니 눈으로 한번 학습하시길 바랍니다.
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
31
32
33
34
35
<html>
<head>
<script type="text/javascript">
var arryData = [];    //배열을 선언
 
    node = {
        "name"    :    'gocoder',
        "url" :    'gocoder.net'
    };      
    arryData.push(node);    //배열을 push 뒤에 넣는다
 
 
    node = {
        "name"    :    '이름',
        "url" :    '주소'
    };      
    arryData.unshift(node);    //배열을 unshift 맨 앞에 넣는다
 
 
    node = {
        "name"    :    'gc',
        "url" :    'gocoder.net'
    };      
    arryData.push(node);    //배열을 push 뒤에 넣는다
 
    for (var i = 0; i < arryData.length; i++) {
        document.write(arryData[i].name);
        document.write(' , ');
        document.write(arryData[i].url);
        document.write('<br>');
    }
</script>
</head>
 
</html>
cs

결과 값은 이렇게 노출 됩니다. 



마무리


push() 할 데이터 점점 많네~



댓글을 달아 주세요


자바스크립트로 문자 뒤에서부터 제거하기


안녕하세요.
고코더 입니다.



 1. 프론트엔드 개발을 하다보면 꼭 끝에 한 글자가 문제입니다.
이 글자를 짤라내려면 많이 사용하는 방법은 이렇게 하셨을텐데요

1. 문자열 길이를 잰다
2. -1를 한다
3. -1한 길이만큼 가져온다


 2. 그 보다 더 쉬운 방법이 있습니다. 내장 객체인 배열을 다루는 slice()를 이용하는 방법입니다. 
    var text = "http://gocoder.net/";
    textSlice = text.slice(0,-1);
    // http://gocoder.net 

 3. 예제 소스로 다시 한번 살펴보겠습니다.

1
2
3
4
5
6
7
8
9
10
11
<html>
<head>
<script type="text/javascript">
    var text = "http://gocoder.net/";
    textSlice = text.slice(0,-1);
    document.write(text);
    document.write("<br>");
    document.write(textSlice);
</script>
</head>
</html>
cs
 4. 화면처럼 끝에 한자리만 짤라서 사용가능합니다. 
물런 두번째 인자에 -2를 하면 두 글자를 제거 가능합니다. 


마무리


괜히 길게 코딩 했었네요.



댓글을 달아 주세요