Media Stream미디어 스트림(Media Stream)은 디지털 형태의 오디오, 비디오 또는 기타 멀티미디어 컨텐츠를 실시간으로 또는 온디맨드(On-Demand)로 전송하는 기술을 말합니다. 여기서 온디맨드는 사용자가 원하는 시간에 원하는 컨텐츠를 소비할 수 있는 서비스를 말합니다. 스트리밍(Streaming)은 컨텐츠를 다운로드 받지 않고, 미디어를 보거나 듣게 해줍니다. 즉, 컨텐츠를 연속적으로 수신하여 재생할 수 있게 해주는 데이터 흐름(flow)이라고 생각하면 됩니다. Streaming 주요 기술 요소컨텐츠 캡처 및 인코딩원본의 컨텐츠는 고해상도의 비디오 카메라와 마이크를 통해 만들어집니다. 이런 데이터는 비디오 포맷(H.264, H.256) 및 오디오 포맷(AAC, MP3) 형태로 인코딩 ..

시그널링 서버(signaling server)실시간 화상채팅을 구현하기 전에 Signaling 서버에 대해 알아야 합니다. WebRTC에서 시그널링 서버(signaling server)는 매우 중요한 역할을 합니다. 이 서버는 WebRTC 연결을 구성하기 위해 필요한 메타데이터와 control 메시지를 주고받는 데 사용됩니다. 시그널링 서버는 peer-to-peer 간의 초기 설정, 네트워크 정보 교환, 세션 관리 등을 합니다. WebRTC 프로토콜 자체에서 제공해주는 기능은 아니기 때문에 시스템 구조 및 상황에 맞게 개발자가 시그널링 프로세스를 구현해야 합니다. (예를들어, 화상 채팅 앱을 만든다면, 인증 및 채팅 방을 관리하기 위한 프로세스가 필요합니다. 이런 프로세스를 직접 시그널링 서버에 구현해햐..

WebRTC 개념WebRTC(Web Real-Time Communication)는 웹 브라우저와 모바일 어플리케이션을 통해 실시간으로 음성, 비디오, 데이터를 주고받을 수 있게 해주는 기술입니다. 이 기술은 플러그인이나 외부 소프트웨어 설치 없이도 동작하며, HTML5와 JavaScript API를 사용하여 구현됩니다. WebRTC를 사용하면 아래와 같은 기능을 만들 수 있습니다.화상 회의 시스템: Zoom, Google Meet과 같은 서비스와 같이, 실시간 화상 채팅이 가능한 시스템을 구현 가능실시간 게임: 멀티플레이어 게임에서 실시간 음성 대화 시스템 구현 가능파일 공유: 데이터 채널을 이용하여 브라우저 간 직접 파일을 공유할 수 있는 시스템 구현 가능 WebRTC 특징실시간 통신: WebRTC는 ..

초기 환경 설정node 설치React Native는 React와 같이 Javascript으로 개발을 하기 때문에 node가 필요합니다. node 설치는 아래 링크를 참고하시면 됩니다. macos에 nodejs 설치하기 (쉽게 node 버전 변경하기)nodejs 설치 nodejs를 설치하는 방법은 brew를 사용한 방법이 있고, nodejs 공식사이트에서 직접 설치하는 방법이 있습니다. 본 글에서는 brew를 사용하여 설치하는 방법에 대해 소개합니다. brew로 설치bluemiv.tistory.com watchman 설치Watchman은 Facebook이 개발한 오픈 소스 툴입니다. 파일 시스템에서 변화를 감지하고 해당 변화에 반응하는 작업을 자동화할 수 있게 해주는 도구입니다. ..

자바스크립트(Javascript)에서 변수를 선언하는 키워드에는 var, let, const가 있습니다. 각각의 키워드는 모두 변수를 선언하는 것은 동일하지만, 스코프(scope), 호이스팅(hoisting), 재할당 가능 여부의 차이를 가지고 있습니다. 본 글에서는 이 세 가지 변수 선언을 위한 키워드의 차이점을 소개합니다. 스코프(Scope)스코프는 변수가 코드 내에서 접근 가능한 범위를 의미합니다. var, let, const는 각각 아래와 같은 스코프를 가집니다.var: 함수 레벨 스코프(function-level scope)let: 블록 레벨 스코프(block-level scope)const: 블록 레벨 스코프(block-level scope)블록 레벨 스코프(block-level scope)를..

코인이나 주식에서 트레이딩하는 투자자들은 다양한 기술적 분석 도구를 사용합니다. 분석을 위해 많이 보는 지표 중 RSI(Relative Strength Index, 상대강도지수)는 매우 인기 있는 지표 중 하나입니다. 본 글에서는 RSI의 개념을 설명하고, pyupbit 라이브러리와 업비트 Open API를 활용하여 RSI를 계산하는 방법에 대해 소개합니다.RSI란?RSI는 1978년에 J. Welles Wilder가 개발하였으며, 시장의 모멘텀을 분석하는 데 유용합니다. RSI는 0에서 100 사이의 값을 가지며, 특정 자산의 가격 변동성을 측정하는 지표입니다. 일반적으로 RSI 값이 70 이상이면 과매수(overbought) 상태로 가격 하락이 예상되고, 30 이하면 과매도(oversold) 상태로 ..

HTML(HyperText Markup Language)은 웹 페이지의 구조를 정의하는 데 사용되는 표준 마크업 언어입니다. 이전에는 대부분 div, span과 같은 HTML 태그를 사용했지만, 최근에는 시멘틱 태그를 사용합니다. 여기서 시맨틱(Semantic) 태그란, 그 내용이 무엇인지 브라우저와 개발자 모두에게 명확하게 설명해 주는 HTML 태그를 말합니다. 이러한 시멘틱 태그들은 웹 페이지의 가독성을 높이고, 검색 엔진 최적화(SEO)에 도움을 줍니다. 본 글에서는 HTML의 시멘틱 태그에 대해 설명합니다. 시맨틱 태그란?시맨틱 태그는 웹 페이지의 다양한 부분(헤더, 푸터, 본문 등)을 명확하게 구분짓는 데 사용되는 HTML 태그입니다. 이 태그들은 각 섹션의 의미를 명확히 하여, 웹 페이지의 구..

자바스크립트의 Math.random() 함수는 간편하게 사용할 수 있는 난수 생성기이지만, 알고리즘에 의해 생성되는 의사 난수(pseudorandom number)를 반환합니다. 이는 실제로 완벽한 무작위성을 제공하지 않습니다. 특히 보안이 중요한 애플리케이션에서는 이러한 의사 난수가 적합하지 않을 수 있습니다. 따라서, 보다 안전한 난수를 필요로 할 때는 다른 방법을 모색해야 합니다. 본 글에서는 진정한 난수를 생성하는 방법에 대해 설명합니다. 의사 난수란? 우선 의사 난수(pseudorandom number)에 대해 알아야합니다. 의사 난수는 난수처럼 보이지만, 실제로는 초기값(seed)에 따라 결정되는 알고리즘을 통해 생성된 숫자입니다. 이는 결국 예측 가능하다는 의미이며, 같은 시드 값을 가지고 ..

자바스크립트(JavaScript)에서 무작위 수를 생성하는 것은 개발하면서 종종 사용하는 함수 중 하나입니다. 예를들어, 게임, 무작위 테스트 데이터 생성, 보안 분야 등에서 중요한 역할을 합니다. 본 글에서는 자바스크립트의 Math.random() 함수를 통해 어떻게 무작위 수를 생성하는지, 그리고 그 활용 방법에 대해 설명합니다. Math.random() 함수란? 자바스크립트의 Math.random() 함수는 0 이상 1 미만의 범위에서 소숫점 형태의 무작위 수를 생성합니다. 이 함수는 매개변수를 필요로 하지 않으며, 사용하는 방법도 매우 간단합니다. const randomNumber = Math.random(); console.log(randomNumber); // 예: 0.123456789 무작위..

자바스크립트(JavaScript)는 웹 개발에서 가장 널리 사용되는 언어 중 하나이며, ES6(ECMAScript 2015)는 그 사용성과 편의성을 크게 향상시킨 중요한 업데이트입니다. 특히, 배열을 다루는 데 있어 map, filter, reduce 함수는 개발하면서 가장 많이 사용하는 함수라고 해도 과언이 아닙니다. 본 글에서는 이 세 함수의 개념과 사용 방법을 설명합니다. map 함수 map 함수는 첫번째 인자로 함수를 받습니다. 배열의 요소를 순회하면서 인자로 받은 함수의 반환값을 새로운 요소로 가지며, 새로운 배열을 반환합니다. 즉, 원본 배열을 변형하지 않고 새로운 배열을 생성합니다. 예를들어 어떤 배열 요소들의 제곱수를 가지는 배열을 구한다고 하면, 아래와 같이 작성할 수 있습니다. cons..