DEV Community: Gunwoo

🤔 WebRTC?

Gunwoo — Mon, 05 Apr 2021 14:32:58 +0000

📝 궁금한 모든 것을 기록합니다.
😎 기록에서 멈추지 않고 나의 것으로 만듭니다.
🙈 잘못된 정보가 있다면 언제든지 댓글에 남겨주세요 :D

🤔 WebRTC?

Web Real-Time Communication의 약자로 실시간으로 웹 어플리케이션(또한 android, ios도 지원)에서 데이터를 교환할 수 있는 기술이다. 여기서 중요한 점은 별도의 소프트웨어의 도움 없이(드라이버, 플러그인 없이) 실시간으로 통신을(p2p) 가능하게 해준다는 것이다. 영상, 음성 및 데이터 통신을 하는 자바스크립트 API라고 할 수 있다.(대부분의 브라우저에서 지원해주고 있다.=>IE는 지원되지 않는다..., 크로스 브라우징이슈를 해결하기 위한 라이브러리 adapter.js) WebRTC를 통해 음성통화, 비디오채팅 및 파일 공유를 위한 웹-앱 어플리케이션을 만들 수 있다.

😄 WebRTC에 대한 또다른 정보!

구글에서 음성/영상 코덱 및 에코 캔슬링 기술을 가진 2개의 회사를 인수한 후, 투자와 개발을 거처 2011년도에 WebRTC를 오픈소스화하여 API 형태로 공개했다.
WebRTC가 있기 전에는 웹에서 화상 통신을 하기 위해선 사용자가 별도의 플러그인을 설치해야하는 번거러움 있었다. 그러나 WebRTC로 인해 이런 문제를 해결되었다.
W3C에서 WebRTC의 표준과 API 정의를 위해 노력하고, IETF(국제 인터넷 표준화 기구)에서 프로토콜의 표준화 작업을 시작했다.
WebRTC는 구글뿐 아니라, Mozilla, Opera 등과 같은 웹브라우저 주요 기업들의 전적인 지원을 받는다.

😍 WebRTC를 이해하려면 필요한 지식!

NAT(Network Address Translation)
NAT은 해당 기기의 공인(public) IP를 부여하는데, 라우터가 공인 IP를 가지고 있고, 여기에 연결된 기기는 사설(private) IP 주소를 갖게된다. 공인IP는 유일한 IP며, 사설IP는 특정 네트워크 안에서만 유효하다.
여기서 공인IP는 실제 주소와 같고 외부에 공개되어 있다. 그렇기에 다른 컴퓨터에서 검색, 접근이 가능하다. 그렇기 때문에 공인IP를 사용하려면 보안 방화벽이 반드시 필요하다.
사설IP는 외부에 공개되지 않아 검색, 접근이 불가능하다. 주로 인터넷을 사용할 때, 라우터에 공인IP를 두고 그 라우터에 여러대의 디바이스들이 사설IP를 가지고서 접속하게 된다.
다시 NAT에 대해 설명하게 되면, 통상적으로 네트워크에서 데이터를 주고 받기위해선 공인 IP가 필요하다. NAT은 사설IP를 공인IP로 1대1 대응시켜 변환하는 장치이다.
여기서 WebRTC는 P2P 방식으로 서로의 정보(공인IP)를 알아야한다.
Signaling
RTCPeerConnection이 생성되기 전에 서로 다른 네트워크의 기기끼리 서로의 위치 확인과 미디어 포멧에 대한 협의를 하는 프로세스를 시그널링이라 부른다.
Signaling Server
P2P 통신을 위해 서로를 연결해주는 역활을 한다.
브라우저가 사용자의 장치에 접근한다.
Signaling 서버를 통해 상대방의 정보를 얻는다.
Peer to Peer connection을 통해 통신한다.
즉, 각 Peer가 연결되기 위해선 Signaling 서버에 먼저 접근하여 상대방의 정보를 알아낸 후 P2P Connection을 한다. Caller가 상대 사용자에게 Signaling서버를 통해 자신의 정보들을 제공하고, Callee는 그 정보들에 대해 자신의 정보를 담아 답장한다.
Signaling 서버에서 교환해야 할 정보들은 세션 제어 메세지(통신을 초기화하거나 닫고 오류를 보고한다), IP주소/포트, 보안키, 코덱/해상도, 에러메세지, 미디어 유형, 등이 있다.
Signaling 서버는 직접 구축해도 되고(WebSocket, SPI, XMPP/Jingle, Netty), cloud message platform(Pusher, Kaazing, PubNub), 아마존의 Kinesis Video Stream , 구글의 AppRTC에서는 Google App Engine으로 구현된 시그널링 서버을 사용해도 된다.
- 다양한 시그널링 서버의 구현 방법
SDP (Session Description Protocol)

SDP는 P2P로 서로 주고받는 데이터를 이해하는데 사용된다.

데이터의 해상도, 형식, 코덱, 암호화 방법 등을 기술하는 표준(프로토콜)이며, 메타데이터를 나타낸다.
JSEP (JavaScript Session Establishment Protocol)
ICE (Interactive Connectivity Establishment)

ICE는 P2P간 통신을 위한 기술로 서로의 기기가 통신하기 위한 최적의 경로(통신 가능한 모든 주소들을 가져온다)를 찾을 수 있도록 도와주는 프레임워크이다. ICE는 최적의 경로를 찾기위해 STUN과 TURN을 사용하는 프레임워크로 SDP 제안 및 수락 모델에 적용할 수 있다. NAT환경에서 자신의 공인IP를 파악하고 상대방에게 데이터를 전송하기 위한 응답 프로토콜이라고 할 수 있다.
ICE Candidate

ICE를 통해 얻게된 후보를 Candidate라 부른다. SDP를 결정한 후에는 ICE Candidate을 서로 교환하며 여러 경로중 최적의 ICE를 결정하게 한다. 이 과정에서 이미 스트리밍이 시작되어도 연결초반에 영상 저품질 현상이 일어날 수 있다. 이렇게 후보를 수집하면 일반적으로 3개의 주소를 얻게된다: 자신의 사설IP와 포트넘버 / 자신의 공인IP와 포트넘버 (STUN, TURN 서버로 부터 받는다) / TURN서버의 IP와 포트넘버 (TURN 서버로 부터 받는다.)
STUN 서버 (Session Traversal Utilities for NAT)

STUN 서버는 기기의 공인 IP를 찾고 P2P 연결을 방해하는 요소가 라우터에 있는지 알아내는 프로토콜이다. 즉, 해당 Peer의 공인IP 주소를 보내는 역활은 담당한다. 또한 두 엔드포인트 간의 연결을 확인하고 둘의 연결을 유지하기 위해서도 사용할 수 있다. 그러나 항상 효과적으로 일을 처리하지 못한다. NAT의 보안 정책 등이 엄격하면 연결하지 못할 수도 있다.
TURN 서버 (Traversal Using Relays around NAT)

TURN은 STUN 서버에서 연결이 실패했을 경우 오디오, 비디오 등을 릴레이 해주는 역활을 한다. TURN 서버는 인터넷망에 위치하고 각 Peer들이 사설IP안에서 통신한다. 여기서 각 Peer들이 직접적으로 통신하는 것이 아닌 릴레이 역활을 하는 TURN 서버를 사용하여 경유한다. 그렇기에 엄밀히 말하면 P2P 통신이아닌 중간에 서버(TURN)를 거치게 되며, 그 구조상 지연이 필연적으로 발생한다.

TURN를 통해 모든 정보를 중계하고, STUN에 비해 리소스낭비가 심하기 때문에, ICE Candidate과정에서 모든 후보군을 찾은 후, 대안이 없는 경우에만 사용한다.

P2P 동작 과정

각 브라우저가(디바이스) P2P 연결에 동의한다.
서로의 주소를 공유한다.
보안사항 및 방화벽을 우회, 통과한다.
다양한 데이터를 실시간으로 교환한다.

추가 설명

각 개인의 디바이스(컴퓨터)에는 공인IP가 할당되어 있지 않다. 그 이유는 보안문제(방화벽), NAT 등이 있다. 단순히 공인IP를 알아냈다고, 특정 사용자를 찾을 수 없다. 해당 네트워크(공인IP)에 연결되어 있는 사설IP(고유의) 주소까지 알아내야 특정 사용자를 지정할 수 있게 된다. 일반적으로 라우터가 NAT 역활(공인IP와 포트번호를 확인 후, 현재 네트워크에 연결된 사설IP를 연결해준다)을 담당하기 때문에 P2P 연결을 위해선 각 Peer가 연결된 라우터의 공인IP 주소와 포트를 먼저 알아야한다. 그러나 어떤 라우터는 특정 주소나 포트의 연결을 차단하는 방화벽이 설정되어 있을 수 있다. 이렇게 라우터를 통과해서 연결할 방법을 찾는 것을 NAT traversal 이라 하고, 이 작업을 STUN 서버에 의해 이루어진다.
STUN 서버의 역활은 위에서 설명했듯이, 각 Peer가 자신의 공인 IP 주소와 포트를 확인하는 과정에 대한 프로토콜이다. 즉, 상대방과 대화를 시작하기 전에 자신의 고유 주소를 조회해서 알아내는 것이다. 그러나 다양한 방화벽 정책으로 인해 STUN 서버에서 항상 자신의 정보를 알아올 수 있는 것이 아니다. 이로인해 STUN 서버로 자신의 주소를 가지고 오지 못할 경우의 대안으로 TURN 서버를 이용할 수 있다.
이렇게 STUN, TURN 서버를 이용해 알게된 IP주소와 포트의 조합으로 구성된 연결가능한 네트워크 주소를 Candidate라 부르고 이 Candidate를 모두 찾아내어 주소를 찾아낸다. 이 모든 과정은 ICE라는 프레임워크에서 이루어진다.

😳 WebRTC의 흐름

Session description을 교환한다.
Signaling 프로세스는 call을 요청하는 유저가 offer를 만들면서 시작한다.
이 offer는 session 정보를 SDP 포멧으로 가지고 있으며, callee에게 전달된다.
Callee는 caller에게 SDP 정보를 포함한 answer 메세지를 보낸다.
위의 과정을 통해 A와 B는 어떤 코덱과 어떤 video parameter들이 사용될지 알게된다.
ICE candidate를 교환한다.
SDP 교환 이후 ICE candidate 교환이 시작된다.
각 ICE candidate는 caller 입장에서 통신할 수 있는 방법을 설명한다.
각 Peer는 검색되는 순서대로 candidate를 내보내고, 이미 스트리밍이 시작되어도 모든 가능한 candidate를 전송한다.
각 Peer가 서로 호환되는 candidate를 제안했다면, 미디어 통신을 시작한다.
추후 더 나은 방법이 있다면, 스트림의 포맷이 변경된다.
미디어 전송 시작

😲 WebRTC의 중요 API

getUserMedia()
사용자가 자신의 디바이스를 스트림 할 수 있도록 허가를 받는 API이다.
클라이언트 사용자 컴퓨터의 카메라와 마이크 접근을 담당한다.
RTCPeerConnection
Peer간의 연결을 생성하여 오디오와 비디오 통신에 사용 하게 한다. STUN 서버가 필요한 부분이다. 이 객체는 RTCConfiguration을 인자로 받는데 연결설정 방법과 ICE에 대한 정보를 포함시켜야한다.
RTCDataChannel
Peer간의 데이터를 주고 받을 수 있는 Tunnel API 이다. RTCPeerConnection을 통해 데이터를 전송시키기 위한 API이고, 이 객체에서 createDataChannel()을 호출하여 얻을 수 있다.
Select sources & outputs
Stream capture

👀 References

🤔 WebSocket?

WebSockect은 서버와 클라이언트 간에 socket connection을 유지해서 언제든 양방향 통신 또는 데이터 전송이 가능하도록 하는 기술이다. 주로 WebRTC 구현을 위해 많이 사용된다. WebSocket를 사용하는 이유는 데이터의 빠른 업데이트, 실시간 업데이트가 필요한 어플리케이션에서 매우 중요한 기술이기 때문인데, webSocket은 Stateful protocol이기 때문에 클라이언트와 한번 연결되면 계속 같은 라인을 사용해서 통신할 수 있다.(기존 웹어플리케이션에서 서버와 클라이언트는 대부분 HTTP를 통해 이루어져있고, stateless하기 때문에 클라이언트의 한 request에 한 response만 서버에서 전달되는 구조다.) 그렇기 때문에 HTTP 사용시 필요없이 발생되는 HTTP와 TCP 연결 트래픽을 피할 수 있다.

😁 SocketIO?

SocketIO는 웹서버의 종류와 브라우저 버전을 파악해서 가장 적합한 기술을 사용해 WebSocket을 이용할 수 있도록 해준다. 즉, WebSocket을 지원하지 않는 구버전의 브라우저에서(IE9) socketIO로 구현된 서비스를 사용할시 polling flow로 webSocket을 따라하듯이 구현해준다.

🤔 SQL vs NoSQL?

Gunwoo — Sun, 04 Apr 2021 22:01:15 +0000

📝 궁금한 모든 것을 기록합니다.
😎 기록에서 멈추지 않고 나의 것으로 만듭니다.
🙈 잘못된 정보가 있다면 언제든지 댓글에 남겨주세요 :D

🤔 SQL?

SQL은 Structured Query Language의 약자며 구조화된 쿼리 언어이다. SQL은 데이터베이스 언어의 기준으로 주로 관계형 데이터베이스에서 사용된다. 대표적인 관계형 데이터베이스로는 MySQL, Oracle, SQLite, PostgreSQL, MariaDB 등이 있다. 여기서 쿼리란 저장되어 있는 정보를 필터하기 위한 질문으로 원하는 데이터만을 가져오게 도와준다. SQL은 구조화된 테이블을 사용하는 DB(데이터베이스)에서 사용가능하다. 관계형 DB에서는 테이블을 사전에 정의한 뒤에 그에 알맞는 데이터만 넣을 수 있다. 그렇기에 처음 스키마 설계시 필요할 것으로 예상 되었던 데이터보다 더 많은 데이터를 다루게 되었다고 쉽게 스키마를 변경할 수 없다. 이를 보완하기 위해선 ORM을 사용할 수 있다. (Sequelize, TypeORM, 등)
관계형 DB는 스키마 설계시 one-to-one, one-to-many, many-to-many를 명확이 규정을하고 스키마를 짜야한다. 이렇게 함으로 중복되거나 잘못 입력된 데이터가 쉽게 DB에 삽일될 수 없다는 장점을 가지고 있다.

🧐 Where to use SQL?

초기 스키마 구성을 통해서 대부분의 데이터를 처리할 수 있을 때
스키마 구조는 비교적 간단하지만 Update가 많을 때
Scale up을 해야하는 경우가 적을 때 (서버의 성능이 향상되어야 됨)

🤔 NoSQL?

SQL이 구조화 쿼리 언어라면, NoSQL은 비구조화 쿼리 언어이다. SQL이 관계형 데이터베이스로 테이블로 구조화되어 연결되어 있다면, NoSQL은 비관계형 데이터베이스로 데이터가 고정되어 있지 않다. JOIN(no Relations)의 개념이 사라지고, JOIN이 없기 때문에 조회가 SQL보다 비교적 빠르다. NoSQL 기반의 비관계형 DB는 다양한 타입으로 구성될 수 있다.

Key-Value 타입: 여기서 key는 속성 이름을 뜻하고, value는 속성에 연결된 데이터 값을 뜻한다.
문서형(Document) 타입: 데이터를 문서처럼 저장한다. 보통 JSON 유사 형식으로 데이터를 문서화한다. 각각의 문서는 하나의 속성에 대한 데이터를 가지고 있고, 컬렉션이라 하는 그룹으로 묶어서 관리한다. 대표적인 문서형 DB로는 MongoDB가 있다.
Wide-Column 타입: DB의 열에 대한 데이터 관리를 중점으로 삼고, 각 열에는 key-value 형식으로 데이터가 저장되고, 컬럼 페밀리라 하는 열의 집합체 단위로 데이터를 처리한다. 대표적인 Wide-Column DB로 Cassandra, HBase가 있다.
그래프 타입: 자료구조 그래프와 비슷한 형식이다. 대표적인 해당 DB로 InfiniteGraph, Neo4J가 있다.

🧐 Where to use NoSQL?

이후에 어떤 데이터가 추가될 지 예상할 수 없을 때
Read / Write가 Update가 보다 현저히 많을 때
Scale up을 해야하는 경우가 많을 때 (서버의 수량만 더 추가하면 OK)

👀 References

🤔 some() & every()?

Gunwoo — Sun, 04 Apr 2021 22:00:41 +0000

📝 궁금한 모든 것을 기록합니다.
😎 기록에서 멈추지 않고 나의 것으로 만듭니다.
🙈 잘못된 정보가 있다면 언제든지 댓글에 남겨주세요 :D

🤔 some()?

some 메서드는 배열 안의 어떤 요소라도 주어진 함수를 통과하는지 테스트한다.
콜백함수는 주어진 배열의 요소를 검사해서 참인 값을 찾는다.
그리고 some 메서드에서는 단 하나의 요소라도 콜백함수에서 참인 값이라면, 즉시 true를 반환하고 순회가 중단된다. 모든 값이 거짓이라면 false를 반환한다.

const array = [1, 2, 3, 4, 5];

// checks whether an element is even
const even = (element) => element % 2 === 0;

console.log(array.some(even));
// expected output: true

🤔 every()?

every 메서드는 배열 안의 모든 요소가 주어진 함수를 통과하는지 테스트한다.
every 메서드는 콜백이 거짓을 반환하는 요소를 찾을 때까지 배열의 각 요소에 콜백함수를 실행한다. 해당 요소를 발견하면 즉시 false를 반환하고, 순회가 중단된다. 모든 값이 참이면 true를 반환한다.

const isBelowThreshold = (currentValue) => currentValue < 40;

const array1 = [1, 30, 39, 29, 10, 13];

console.log(array1.every(isBelowThreshold));
// expected output: true

👀 References

🤔 VUE.JS?

Gunwoo — Wed, 17 Mar 2021 20:28:38 +0000

📝 궁금한 모든 것을 기록합니다.
😎 기록에서 멈추지 않고 나의 것으로 만듭니다.
🙈 잘못된 정보가 있다면 언제든지 댓글에 남겨주세요 :D

저는 언제나 리액트를 사용합니다. 그런데 어쩌다 Vue를 공부할 기회가 있어서 공부한 기록을 남깁니다.

🤔 VUE.JS?

공식문서에서 뷰는 사용자 인터페이스(UI)를 만들기 위한 프로그레시브 프레임워크라고 소개하고 있다.

🧐 특징

1. 유연하고 가볍다.

2. 기존의 웹앱의 일부 UI만 적용하는 것도 가능하다.

3. SPA를 위해 필요한 라우터기능도 지원한다.

4. 리액트처럼 가상DOM을 지원해서 빠른 UI 렌더링이 가능하다.

5. 컴포넌트 기반의 프레임워크이다.

6. 앵귤러처럼 양방향 데이터 바인딩이 가능하다.

화면에 표시되는 값과 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽 또한 자동으로 변경된다.

7. 리액트처험 단방향 데이터 흐름을 가지고 있다.

컴포넌트끼리 데이터를 전달할 때 항상 상위컴포넌트에서 하위컴포넌트 방향으로 데이터가 전달된다.

8. MVVM 패턴이다.

Model - View - ViewModel 구조로 개발하는 방식이다. 화면의 요소를 제어하는 코드와 데이터 로직처리하는 코드를 분리하여 코드의 이해도를 높이고 유지 보수를 편리하게 해준다.
View는 사용자에게 보이는 화면이다.
ViewModel은 View와 Model의 중간 영역이고, DOM 리스너 와 데이터 바인딩 을 제공하는 곳이다.
Model은 데이터를 담는 위치로, 보통 서버에서 가져온 데이터를 JS 객체 형태로 저장한다.
DOM Listener는 DOM의 변경 상황에 즉각 반응해서 특정 로직을 수행하는 장치이다.
Data Binding은 View의 내용과 Model의 데이터를 동기화해주는 장치이다.

🔧 설치방법

페이지에 CDN package로 import하는 방법도 있지만, npm을 이용해 설치하는 것을 권장한다.

// vue 설치하기
$ npm install vue@next

// vue cli 설치하기
yarn global add @vue/cli
// 아니면
npm install -g @vue/cli

// vue cli를 통한 프로젝트 생성 방법
vue create my-project
// 혹은 아래 명령어를 통해 ui로 프로젝트를 생성할 수 도 있다. 
vue ui

Vue 파일 구조

Vue의 구조와 각 개념을 코드로 작성하면서 보았습니다.

// Home.vue
<template>
<!-- Vue 파일은 컴포넌트 템플릿을 정의하는 template 파트, 스크립트를 작성하는 script 파트, 그리고 스타일링 정보를 작성하는 style 파트로 나누어져 있다. -->
  <div>
      <!-- 중괄호를 두번 사용해서 JS 데이터를 보여줄 수 있다. Mustache bracket-->
    <h1>Welcome to {{title2}}!</h1>
    <!-- v-model 를 사용해서 input 값을 가져올 수 있다. 또한 양방향 데이터 바인딩이기에 data()에 정의된 데이터 변경이 가능하다.  -->
    <input type="text" v-model="input1" />
    <!-- @click 을 이용해서 클릭 이벤트를 헨들링 할 수 있다. -->
    <!-- v-on의 약어 => v-on:click을 @click으로 사용 가능하다. -->
    <button type="button" @click="getData">Get</button>
    <button type="button" @click="setData">Set</button>
    <!-- @change 를 이용해서 값의 변화를 확인하고 설정할 수 있다. -->
    <select class="form-control" v-model="region" @change="changeRegion">
        <!-- v-for 를 이용해서 반복문을 돌릴 수 있다. 데이터 형식이 배열로 주어졌을 때 -->
        <!-- :key는 v-bind:key의 약어이다 -->
      <option :key="i" :value="d.v" v-for="(d,i) in options">{{d.t}}</option>
    </select>
    <div>
        <!-- v-if 를 이용해 조건부 렌더링으 할 수 있다. -->
        <h3 v-if="awesome"> Vue is awesome! </h3>
        <h1 v-else>Oh no 😢</h1>
    </div>
    <!-- v-show 를 이용해 display css 속성을 none 처럼 할 수 있다. <엘리먼트는 렌더링이 된다.> -->
    <table class="table table-bordered" v-show="tableShow">
      <tr :key="index" v-for="(data,index) in options">
        <td>{{data.v}}</td>
        <td>{{data.t}}</td>
      </tr>
    </table>
  </div>
</template>
<script>
export default {
    // data 메소드를 통해 다루고 싶은 데이터를 정의하고, 다룰 수 있게 된다. 
    // 이곳에서 데이터를 정의하고, template에 mustache bracket을 이용해 데이터를 바인딩 할 수 있다. 
    // 또한 데이터를 가지고 오고 싶다면(ex. input, select, etc), v-model를 사용해서 아래의 변수에 할당할 수 있다. 
    // 위처럼 양방향으로 데이터 바인딩이 가능하게 된다. 
  data() {
    return {
      title: "뷰 연습",
      title2: "Seoul",
      input1: "abcd",
      options: [
        { v: "S", t: "Seoul" },
        { v: "J", t: "Jeju" },
        { v: "B", t: "Busan" },
      ],
      region: "B",
      tableShow: false,
      awesome: false,
    };
  },
  // 만일 데이터에 조금이라도 변경이 일어나면 왓치 안에 정의된 해당 함수가 작용된다. 
  // 왓치는 데이터 변경을 알아서 캐치해준다. (모니터링 기능) 특정 데이터를 항상 주시하고 있다가, 변경이 일어나면 그 데이터를 캐치해서 사용할 수 있다.
  // 주로 사용자로부터의 이벤트가 아닌 프로그램 상에서 어떠한 특정 데이터가 변경하는 것을 확인하고 싶을 때 사용하면 좋다.  
  watch: {
      // 왓치에선 데이터 명을 그대로 가지고와서 함수형태로 작성해서 사용한다. 
    input1() {
      console.log(this.input1);
    },
    title() {},
  },
  // Vue에서는 모든 메서드를 이곳에 정의를 한다. 
  // 데이터 컨트롤에 관련된 모든 것을 이곳에서 정의한다. 
  methods: {
    getData() {
      alert(this.input1);
    },
    setData() {
      this.input1 = "12345";
    },
    changeRegion() {
      alert(this.region);
    },
  },
  // Vue 인스턴스의 라이프 사이클
  // 만일 처음 화면 렌더링이 되기 전에 DB와 같은 곳에서 데이터를 가져와 뿌려야 한다고 한다면 이곳에서 적용하면 된다. 
  beforeCreate() {
    console.log("beforeCreate");
  },
  created() {
    console.log("created");
  },
  beforeMount() {
    console.log("beforeMount");
  },
  // 화면에 실제로 html이 로딩이 되었을 때
  mounted() {
    console.log("mounted");
  },
  // 데이터가 변경될 때, 데이터가 변경하기 전에 무언가를, 함수를 적용하고 싶을 때 이곳에 정의하면 된다. 
  beforeUpdate() {
    console.log("beforeUpdate");
  },
  updated() {
    console.log("updated");
  },
  beforeDestroy() {
    console.log("beforeDestroy");
  },
  destroyed() {
    console.log("beforeDestroy");
  },
};
</script>

📌 Vue 개발에 도움되는 툴 & 라이브러리

Vue Devtools

Vue 앱을 보다 사용자 친화적인 인터페이스에서 검사하고 디버깅할 수있게 도와준다.
Vue-cli

빠르게 애플리케이션을 구축하도록 도와준다.
Vue Router

뷰를 이용하여 SPA을 제작할 때 유용한 라우팅 라이브러리이다. npm으로 설치하거나 CDN 방식으로 사용할 수 있다.

👀 References

🤩 JS(ES11) Optional chaining & Nullish Coalescing Operator

Gunwoo — Sat, 13 Mar 2021 00:23:17 +0000

📝 궁금한 모든 것을 기록합니다.
😎 기록에서 멈추지 않고 나의 것으로 만듭니다.
🙈 잘못된 정보가 있다면 언제든지 댓글에 남겨주세요 :D

😍 Optional chaining

const avengers1 = {
  title: 'Tony Stark',
  pet:{
    cat: {
      name: 'Jarvis'
    }
  }
}; 

const avengers2 = {
  title: 'Captain America',
}; 


function printCat(person){
  console.log(person.pet.cat.name);
};

printCat(avengers1); // ??
printCat(avengers2); // ??

위와 같이 작성한다면 어떤 일이 일어날까?

두번째 함수 호출때에 에러가 발생하게 된다. 여기 문제를 해결하기 위해선 조건문을 사용할 수도 있고, 삼항연산자를 사용할 수도 있고, 또는 && 연산자를 사용해서 해결할 수도 있다. 그러나 이와 같이 해결하게 되면 가독성도 않좋고, 코드가 불필요하게 반복되는 것을 확인할 수 있다.

function printCat(person){
  console.log(person.pet && person.pet.cat && person.pet.cat.name);
};
printCat(avengers2); // undefined

그러나 이제 ES11의 새로운 기능인 Optional chaining를 활용하면 이렇게 직관적이고 짧은 코드로 문제를 해결할 수 있다. 🤩

function printCat(person){
  console.log(person.pet?.cat?.name);
};

😎 Nullish Coalescing Operator

OR(||)연산자를 보게되면 false, '', 0, null, undefined 등은 false로 간주되어진다.

// OR 연산자를 아래와 같이 사용하면 앞에 있는 값이 false인 경우 뒤의 값이 출력된다. 
const name = 'Hulk';
const userName = name || 'Guest';
console.log(userName); // Hulk 가 나온다. 

// 만일 null과 같은 falsy한 값이 할당되면, name의 값이 false이므로 'Guest'가 출력된다.
const name = null;
const userName = name || 'Guest';
console.log(userName); // Guest 가 나온다.

여기서 OR 연산자를 잘 이해하지 못하고 사용하면 다양한 문제가 발생할 수 있는데,

// 만일 사용자가 자신의 이름을 빈공백으로 등록하고 싶다면?
const name = '';
const userName = name || 'Guest';
console.log(userName); // Guest 가 나온다. 

// 만일 숫자 0을 등록하고 싶다면?
const num = 0;
const crimeRecord = num || 'Undefined';
console.log(crimeRecord); // Undefined 가 나온다.

이러한 문제를 예방하고 조금더 명확한 코드를 작성하고 싶다면 Nullish Coalescing Operator를 사용하면 된다. 😍

// 만일 사용자가 자신의 이름을 빈공백으로 등록하고 싶다면?
const name = '';
const userName = name ?? 'Guest';
// name이란 변수에 값이 있다면 name을 사용하고, 없다면 'Guest'를 사용하자
console.log(userName); // '' 가 나온다. 

// 만일 숫자 0을 등록하고 싶다면?
const num = 0;
const crimeRecord = num ?? 'Undefined'; 
// num이란 변수가 값이 있다면 num을 사용하고, 없다면 'Undefined'를 사용하자
console.log(crimeRecord); // 0이 나온다.

DEV Community: Gunwoo

🤔 WebRTC?

🤔 WebRTC?

😄 WebRTC에 대한 또다른 정보!

😍 WebRTC를 이해하려면 필요한 지식!

P2P 동작 과정

추가 설명

😳 WebRTC의 흐름

😲 WebRTC의 중요 API

👀 References

🤔 WebSocket?

😁 SocketIO?

🤔 SQL vs NoSQL?

🤔 SQL?

🧐 Where to use SQL?

🤔 NoSQL?

🧐 Where to use NoSQL?

👀 References

🤔 some() & every()?

🤔 some()?

🤔 every()?

👀 References

🤔 VUE.JS?

🤔 VUE.JS?

🧐 특징

1. 유연하고 가볍다.

2. 기존의 웹앱의 일부 UI만 적용하는 것도 가능하다.

3. SPA를 위해 필요한 라우터기능도 지원한다.

4. 리액트처럼 가상DOM을 지원해서 빠른 UI 렌더링이 가능하다.

5. 컴포넌트 기반의 프레임워크이다.

6. 앵귤러처럼 양방향 데이터 바인딩이 가능하다.

7. 리액트처험 단방향 데이터 흐름을 가지고 있다.

8. MVVM 패턴이다.

🔧 설치방법

Vue 파일 구조

📌 Vue 개발에 도움되는 툴 & 라이브러리

Vue Devtools

Vue-cli

Vue Router

👀 References

🤩 JS(ES11) Optional chaining & Nullish Coalescing Operator

😍 Optional chaining

😎 Nullish Coalescing Operator