분류 전체보기 검색 결과

해당 글 777건

Stream 사용하기

우선 스트리밍 서비스가 이루어지는 과정에 대해서 인지하고 시작하자. 더 재밌어진다. darrengwon.tistory.com/1210 스트리밍 서비스(온 디맨드, 라이브)에 대한 이해 Summary 원본 영상 => 특정 코덱에 따라 인코더가 인코딩을 진행 (미디어 서버가 이해할 수 있는 코덱이어야 함) => 미디어 서버에 송출 => 미디어 서버는 디코딩한 후 특정 화질과 darrengwon.tistory.com stream을 활용하기 위한 외부 패키지가 많이 존재하지만 여기서는 node의 내장 stream 모듈만을 살펴보도록하자. node에는 네이티브 stream 객체들 많다. 쓰면 읽어야 하니 Readable stream과 Writable Stream이 쌍으로 있습니다. 이 외에 Duplex 스트림과 ..
Node, Nest, Deno/🚀 Node.js (+ Express) 2021. 1. 29. 03:23

스트리밍 서비스(온 디맨드, 라이브)에 대한 이해

Summary 원본 영상 => 특정 코덱에 따라 인코더가 인코딩을 진행 (미디어 서버가 이해할 수 있는 코덱이어야 함) => 미디어 서버에 송출 => 미디어 서버는 디코딩한 후 특정 화질과 비트레이트로 변환(트랜스 코딩) => HLS로 변환 => CDN을 거치자(캐싱) => 사용자에게 서비스한다. 온 디맨드 스트리밍 vs 라이브 스트리밍 aws.amazon.com/ko/cloudfront/streaming/ 미디어 스트리밍 자습서 | CDN, 비디오 호스팅, 배포 | Amazon CloudFront 온디맨드 스트리밍의 경우 비디오 콘텐츠가 Amazon S3에 저장됩니다. 시청자는 언제든 원하는 시간에 이를 시청할 수 있습니다. 전체 온디맨드 스트리밍 솔루션에서는 일반적으로 스토리지를 위 aws.amazo..
🌐 Network/🌐 Network 2021. 1. 28. 07:58

fs 모듈로 Binary 파일 처리부터 Buffer와 Stream까지

제대로된 HTTP 프로토콜 동영상 스트리밍 서비스에 대해서는 후속 포스트에서 다룰 예정입니다. 여기서는 이를 위한 사전 준비 겸 개념 이해를 위해 작성되었습니다. prerequisite darrengwon.tistory.com/1169 darrengwon.tistory.com/953 * 싱글 스레드인 이벤트 루프(쉬운 말로 여러분들이 코드를 작성하는 바로 그 곳) blocking 하지 마세요. readFileSync로 용량 큰 비디오를 서빙한다? 바로 node 식물인간 됩니다. 아래 문서도 읽으세요. nodejs.org/ko/docs/guides/dont-block-the-event-loop/#don-t-block-the-event-loop * 브라우저와 서버가 http 통신을 할 때 헤더의 Conten..
Node, Nest, Deno/🚀 Node.js (+ Express) 2021. 1. 28. 07:53

node.js에서 child_process로 다른 프로세스 생성하기

nodejs.org/dist/latest-v14.x/docs/api/child_process.html Child process | Node.js v14.15.4 Documentation Child process# Source Code: lib/child_process.js The child_process module provides the ability to spawn subprocesses in a manner that is similar, but not identical, to popen(3). This capability is primarily provided by the child_process.spawn() function: c nodejs.org * 노드 14.15.4 LTS 버전을 기반으로 ..
Node, Nest, Deno/🚀 Node.js (+ Express) 2021. 1. 27. 08:07

시간 복잡도(Big-O) 계산하기, Worst Accepted Algorithm

왜 Big-O 표기법으로 시간 복잡도를 계산하지? Big-O 표기법은 최대 차항만 계수 없이 표기하면 되기 때문에 사용하기 간편하고, 알고리즘의 최악의 경우를 의미해서 평균과 가까운 결과를 예측 할 수 있기 때문입니다. 그래서 Big-O 복잡도가 무엇이 있는가 node.js는 (싱글 스레드인 이벤트 루프에서 기본적인 코드를 처리하므로) 싱글 스레드죠? 그렇기에 복잡도가 높은 코드를 처리하면서 blocking되는 현상을 막아야 합니다. 때문에 코드를 비동기적으로 짜야 하는 것이죠. 그런데 웹 개발을 하다보면 솔직히 O(n) 정도의 복잡도 이상의 코드를 보기가 힘듭니다. (제가 허접해서 그런 걸 수도 있습니다.) js 개발자는 이중 map, filter를 돌려 O(n^2)의 복잡도를 가진 코드를 작성하게 될..
Data structure, Algorithm/Algorithm 2021. 1. 26. 22:52

웹 워커 Web Workers API : 브라우저 멀티 쓰레딩

javascript는 싱글 쓰레드인데 멀티 쓰레딩을 어떻게 하지? HTML5 에는 Web Worker 스펙을 추가 하여 브라우저에서 멀티 쓰레드 구동이 가능하게 되었습니다. 사실 그간 웹 외에 일반 앱(데스크탑, 모바일 등등...)에서는 강제적으로 백그라운드 Thread를 사용하여 메인 Thread의 작업을 최대한 지양하도록 하고 있었는데 그것이 이제 웹에서도 가능해진 것이다. 결론은 웹에서도 이제 멀티 쓰레딩을 활용해야 한다~ 이겁니다. javascript 자체는 싱글 쓰레드입니다. 그러나 자바스크립트의 주요한 런타임 환경 중 하나인 브라우저에서 HTML 5의 Web Worker 스펙을 지원하면서 브라우저 내에서 멀티 쓰레드를 활용할 수 있을 따름입니다. 자바스크립트의 또 다른 런타임인 Node.js ..
웹 전반, 브라우저/Web API 2021. 1. 25. 07:50

custom hook (4) : intersection observer를 활용한 useScrollFadeIn hook

intersection observer 스크롤을 내리다가 특정 element가 보이는 시점에 애니메이션이 동작하는 UI를 보셨을 겁니다. dom요소의 가시성을 측정하는 intersection observer를 활용하면 됩니다. 찾아보니까 이것도 많이 쓰더라구요? 커밋이 1번 뿐인데 직접 구현해도 되긴 합니다. www.npmjs.com/package/react-intersection-observer react-intersection-observer Monitor if a component is inside the viewport, using IntersectionObserver API www.npmjs.com useScrollFadeIn hook import { useRef, useEffect, useCa..
React, Next, Redux/🚀 React with Hooks 2021. 1. 24. 19:40

custom hook (3) : scrollIntoView hook

useRef로 잡은 DOM이 화면에 보이도록 scroll을 하는 hook입니다. 일반 HTML에서는 태그를 이용하여 같은 페이지의 요소로 연결하는 Fragment를 사용할 수 있습니다. darrengwon.tistory.com/227 그런데 React에서는 이게 잘 안 먹기도하고, * 왜 안먹히는가? => Component는 native html 태그가 아니기 때문입니다. 따라서 div로 한 번 묶어주면 작동은 합니다. 더 나아가 애니메이션적인 요소도 없이 단순 jump로 이동합니다. 따라서, useRef가 보일 때까지 smooth하게 스크롤을 당겨보기로 했습니다. scrollIntoView를 이용하면 되겠군요. developer.mozilla.org/en-US/docs/Web/API/Element/sc..
React, Next, Redux/🚀 React with Hooks 2021. 1. 23. 20:01

pwa 전반에 대한 지식들과 서비스워커

* 2021년 1월 기준으론 CRA 버전이 올라가면서 serviceWorker.js가 없어지고 reportWebVitals.js가 붙었다. 통재로다. create-react-app.dev/docs/making-a-progressive-web-app/ Making a Progressive Web App | Create React App The production build has all the tools necessary to generate a first-class create-react-app.dev webactually.com/2017/09/28/%ec%9b%b9-%ed%94%84%eb%a1%9c%ec%a0%9d%ed%8a%b8%eb%8a%94-pwa%ec%9d%b4%ec%96%b4%ec%95%bc-..
미분류/Tip 2021. 1. 23. 17:25

How HTTPS works? : HTTPS와 SSL 인증서

🚀 HTTPS HTTP는 hypertext transfer protocol의 약자이다. hypertext는 HTML을 말하므로 "HTML 전송 통신규약"이라고도 할 수 있다. HTTPS는 여기에 S(Secure)가 추가된 것이다. 🚀 왜 HTTPS가 필요할까? 1. 개인 정보 보호 => 메세지 암호화. 클라이언트 측에서 보낸 해쉬화 되기 이전의 패스워드를 탈취 당하면 당연히 해킹. 이를 '스니핑 공격'이라고 함. 2. 무결성 => 메시지가 암호화하여 중간자가 메세지를 조작하는 것을 방지. 중간자가 마치 정상적인 유저가 보낸 것처럼 위장하여 개인정보 요청을 받아 해커가 취득하거나, 강제 탈퇴 시키는 등의 조작을 가할 수 있음. 이를 '스푸핑 공격'이라고 함. 3. 식별 => HTTPS는 SSL 인증서를 통..
🌐 Network/🔗 HTTP 2021. 1. 23. 16:28