면접을 통해 얻을 수 있는 점은 생각보다 많다.
어떤 점이 내가 부족한지 알 수 있고 새로운 지식을 얻을 수도 있고 무엇보다 말도 계속해야 는다.
또 부족한 점을 정리하면 모호했던 지식이 더 견고해지고,
새로운 지식은 학습하면 견고한 지식이 되진 못 하더라도, 비슷한 질문을 받아도 어느정도 대답할 수 있게 된다.
따라서 이번에도 면접을 통해 새롭게 알게 된 지식과 부족했던 점을 간략히 정리하고자 한다.
webRTC
webRTC란?
Web Real Time Communication으로, 브라우저 간 실시간 통신을 가능하게 하는 기술 표준이다.
webRTC의 주요 특징
브라우저 간 직접 통신: WebRTC를 사용하면 브라우저와 브라우저 간에 직접 연결을 설정할 수 있다. 이를 통해 실시간 음성, 영상 통화, 파일 공유 등이 가능하다.무료 및 오픈소스: WebRTC는 무료로 사용할 수 있는 오픈소스 기술이다. 이를 통해 개발자들이 쉽게 실시간 통신 기능을 구현할 수 있다.크로스 브라우저 지원: WebRTC는주요 브라우저(Chrome, Firefox, Safari, Edge 등)에서 모두 지원되므로 호환성이 높다.높은 보안성: WebRTC는암호화와 피어 투 피어(P2P) 연결을 통해 높은 보안성을 제공한다.서버리스 구조: WebRTC는 중간 서버 없이 브라우저 간 직접 연결을 설정할 수 있어 서버 비용을 줄일 수 있다.
P2P 연결이란?
중앙 서버 없이 참여자들 간에 직접 정보와 자원을 공유하는 분산형 네트워크 방식이다.
Signaling
WebRTC 는 P2P 연결을 통해 직접 통신하지만, 이를 중계해주는 과정이 필요하다. 이를 시그널링 이라 부른다. 그리고 이를 수행하는 서버를 시그널 서버라 칭한다. 시그널 서버는 연결하고자 하는 Peer 들을 논리적으로 묶고 서로간에 SDP 와 Candidate 를 교환하여 준다.
시그널 서버는 개발하고자 하는 서비스의 성격에 맞게 SIP나 XMPP 등의 기존의 시그널링 프로토콜을 사용해도 되고 Ajax long polling이나 websocket 등의 적절한 쌍방향 통신 채널로 이를 구현하면 된다.
그렇지만 시그널링의 핵심은 비동기적으로 발생하는 Peer 들의 정보(SDP, Candidate)를 교환하는 일이다. 그러므로 전이중 통신을 지원하는 websocket 으로 이를 구현하는 것이 가장 적합하다.
webRTC API
getUserMedia API: 사용자의 마이크와 카메라에 접근하여 오디오와 비디오 스트림을 가져올 수 있다. 이를 PeerConnection에 전달하여 미디어 스트림을 전송하게 된다.RTCPeerConnection API: 피어 간의 연결을 설정하고 관리할 수 있다. 이를 통해 실시간 데이터 전송이 가능하다.RTCDataChannel API: 피어 간에 임의의 데이터를 주고받을 수 있다. 채팅, 파일 전송 등에 활용할 수 있다.RTCIceCandidate API: 피어 간의 연결을 설정하기 위해 필요한 ICE(Interactive Connectivity Establishment) 정보를 교환할 수 있다.RTCSessionDescription API: 피어 간의 연결 설정을 위해 필요한 SDP(Session Description Protocol) 정보를 교환할 수 있다.
SDP 프로토콜
SDP(Session Description Protocol)는 WebRTC에서 스트리밍 미디어의 해상도나 형식, 코덱 등의 멀티미디어 컨텐츠의 초기 인수를 설명하기 위해 채택한 프로토콜이다. 미디어에 대한 메타 데이터로 사용할 수 있는 코덱은 무엇들이 있으며, 어떤 프로토콜을 사용하고, 비트레이트는 얼마이며, 밴드위드스는 얼마이다 와 같은 데이터가 텍스트 형태로 명시되어 있다.
표준 URL(Canonical URL)
표준 URL(Canonical URL)이란?
캐노니컬 URL(Canonical URL)은 웹 페이지를 나타내는 가장 대표적인 URL을 의미한다.
웹사이트에는 여러 가지 방식으로 동일한 페이지를 표현할 수 있다.
예를 들어 동일한 콘텐츠가 "example.com/page", "example.com/page.html", "example.com?page=1" 등 여러 URL로 접근할 수 있습니다.
캐노니컬 URL은 이 중에서 가장 대표적인 URL을 지정하여, 검색 엔진이나 다른 웹사이트에서 해당 페이지를 효과적으로 인식하고 색인할 수 있도록 하는 기능이다.
표준 URL 적용 방법
HTML
캐노니컬 URL은 Link 태그에 rel 프로퍼티 값을 ‘canonical’로, href 프로퍼티 값에 표준 URL을 명시하여 사용한다. 일반적으로 html 문서의 head에 작성한다.
<link rel="canonical" href="URL">etc
HTML이 아닌 다른 파일 형식인 경우 http 응답 헤더에 명시한다.
HTTP/1.1 200 OK
Content-Type: application/pdf
Link: ; rel="canonical"
Content-Length: 4223
...이를 통해 중복된 콘텐츠로 인한 검색 엔진의 혼란을 방지하고, SEO 성능을 높일 수 있습니다.
그래서 왜 적용하는데?
인터넷상에 동일하거나 매우 유사한 콘텐츠가 두 개 이상의 주소에 나타나면 중복 콘텐츠라고 규정된다. 이런 상황에서 검색엔진은 원본 페이지가 무엇인지 식별하는 데 어려움을 겪고 웹사이트 순위 저하로 이어질 수 있다. 중복 콘텐츠 문제는 3가지로 요약할 수 있다.
- 검색엔진이 어떤 주소를 색인할지 모른다.
- 검색엔진이 중복으로 보이는 여러 페이지를 하나로 합쳐야 할지, 다른 버전으로 분산할지 결정한다.
- 중복 페이지 중 검색 결과에 노출할 페이지를 결정하기 어렵고 의도와 다른 페이지가 노출될 수 있다.
중복 콘텐츠는 대부분 의도적이지 않은 상황에서 생성되는 경우가 많기에 이를 방지하고자 표준 URL을 적용한다.
제어 컴포넌트와 비제어 컴포넌트
리액트에서 제어 컴포넌트(Controlled Component)와 비제어 컴포넌트(Uncontrolled Component)는 폼 엘리먼트를 다루는 방식에 따라 구분된다.
폼 엘리먼트
- input, textarea, select 등
일반적으로 제어 컴포넌트를 사용하는 것이 더 권장되지만, 특정 상황에서는 비제어 컴포넌트를 사용할 수 있다. 예를 들어, 파일 업로드와 같은 경우에는 비제어 컴포넌트를 사용하는 것이 더 효율적일 수 있다.
제어 컴포넌트와 비제어 컴포넌트는 서로 장단점이 있으므로, 상황에 따라 적절한 방식을 선택하는 것이 중요하다.
제어 컴포넌트(Controlled Component):
- 제어 컴포넌트는 React 컴포넌트가 폼 엘리먼트의 값을 완전히 제어하는 방식이다.
- 폼 엘리먼트의 값은 React 상태(state)에 저장되며, 사용자 입력에 따라 상태가 업데이트된다.
- React 컴포넌트는 폼 엘리먼트의 값을 직접 설정하고 제어한다.
- 사용자 입력이 발생하면 React 컴포넌트는 상태를 업데이트하고, 이에 따라 폼 엘리먼트의 값이 변경된다.
- 제어 컴포넌트는 폼 데이터를 완전히 제어할 수 있지만, 추가적인 코드가 필요하다.
비제어 컴포넌트(Uncontrolled Component)
- 비제어 컴포넌트는 React 컴포넌트가 폼 엘리먼트의 값을 직접 제어하지 않는 방식이다.
- 폼 엘리먼트의 값은 DOM(Document Object Model)에 저장되며, React 컴포넌트는 필요할 때 DOM에서 값을 가져온다.
- 사용자 입력이 발생하면 React 컴포넌트는 DOM에서 값을 가져와 사용한다.
- 비제어 컴포넌트는 추가적인 코드가 필요하지 않지만, 폼 데이터에 대한 완전한 제어가 어렵다.
참고
webRTC
WebRTC란
SEO 초보자를 위한 ‘캐노니컬 태그’ 설명하기
제어 컴포넌트 vs 비제어 컴포넌트
