IT & Art

Snap.svg Snap.svg - Home Why SVG (and Snap)? SVG is an excellent way to create interactive, resolution-independent vector graphics that will look great on any size screen. And the Snap.svg JavaScript library makes working with your SVG assets as easy as jQuery makes working with t snapsvg.io P5.js home | p5.js Hello! p5.js is a JavaScript library for creative coding, with a focus on making codin..

Q1. FLUX or REDUX cause a single point of failure? Q2. What is the difference between MVC and MVVP MVC using Context API? References Hacker Way: Rethinking Web App Development at Facebook Hacker Way: Rethinking Web App Development at Facebook 09:00 MVC doesn't scale, increase predictability 10:50 MVC is not suitable for new feature, can't find infinite loops 11:50 FLUX is single direction [React..

OBS Studio를 사용해서 웹앱을 Zoom/WebEx에 스트리밍하는 방법은 간단합니다. 무료 오픈소스 스트리밍 툴 OBS Studio를 설치한 뒤, Open Broadcaster Software | OBS 영상 녹화와 실시간 방송을 할 수 있는 무료 및 공개 소프트웨어입니다. 윈도우, 맥 혹은 리눅스 환경에서 빠르고 쉽게 방송 할 수 있습니다. obsproject.com 하단 메뉴 소스 목록에서 브라우저를 선택하고 URL을 입력합니다. 그리고 하단 메뉴 우측의 가상 카메라 시작하고 Zoom(혹은 WebEx)를 실행하면 OBS Virtual Camera가 새로 추가되어 있습니다. 카메라를 선택하면 URL에 보이는 화면이 스트리밍됩니다. 아주 간단하네요. 예전에는 가상 카메라 쓰려면 v4l2loopbac..

문제> 로컬에서 create-react-library로 라이브러리를 생성하고 React hook으로 코딩하여 앱에서 참조할 경우, library/example/ 앱에서는 잘 실행되는데, library/ 외에서 참조 시 hook 오류가 나는 경우 솔루션1. www.npmjs.com에 publish하면 됨 솔루션2. React hook 대신 class로 구현

React 웹캠 시리즈입니다. React 웹캠 - 1. Promise 비동기 함수의 이해 React 웹캠 - 2. getUserMedia React 웹캠 - 3. Canvas React 웹캠 - 4. Select webcam Sample Code 두 개 이상의 웹캠(혹은 마이크)을 사용하는 경우 브라우저 메뉴를 통해 웹캠을 선택하는 React 앱을 만들어 봅시다. navigator.mediaDevices.enumerateDevices() 오늘의 주요 API는 enumerateDevices() 인데요, 이는 사용 가능한 모든 디바이스 배열을 리턴해줍니다. 리턴 값을 console.log로 찍어 보면 아래와 같습니다. deviceId는 이 디바이스에 접근하기 위한 ID이고 kind는 디바이스의 종류로서 au..

React의 기초를 다지는 데 가장 좋은 방법은 공식 튜토리얼을 읽고 따라하는 것인데요, 자바스크립트로 개발해 본 적이 있다면, 맞닥뜨리는 질문 중에 하나가 Hook일 것입니다. Hook은 뭐지? 그냥 자바스크립트로 짜면 안 되나? 정답은 "됩니다"입니다. Hook은 안 써도 됩니다. Hook은 자바스크립트 클래스를 대체하기 위해 React 16.8 버전부터 추가된 문법인데요, 다만, 저처럼 클래스를 선호하는 객체지향사람이라도 일부러라도 Hook 문법을 이해하고 알아두는 것이 코드 분석 차원에서도 좋을 것 같습니다. 오늘은 클래스와 Hook의 차이점과 간단한 실습 예제로 문법을 비교해 보겠습니다. Hook의 기원 대개 프로그래밍 방식은 함수형(functional programming)과 객체지향 클래스형..

React 웹캠 시리즈입니다. React 웹캠 - 1. Promise 비동기 함수의 이해 React 웹캠 - 2. getUserMedia React 웹캠 - 3. Canvas React 웹캠 - 4. Select webcam Sample Code HTML5의 강력한 엘리먼트 중 하나인 canvas는 그래픽을 그리는 엘리먼트로서 게임, 애니메이션 및 비디오 영상 처리 등에 사용됩니다. 최근에는 WebGL 즉 웹에서 3D를 그릴 수 있는 성능이 대폭 강화되면서, canvas는 이제 없어서는 안 될 중요한 엘리먼트가 되었습니다. 난 편에서 getUserMedia()로 받은 웹캠 영상을 1초마다 canvas에 그린 뒤 그 위에 몇 가지 덧칠을 해보겠습니다. 내용을 보면서 canvas를 언제 쓰면 좋을지 생각해보..

React 웹캠 시리즈입니다. React 웹캠 - 1. Promise 비동기 함수의 이해 React 웹캠 - 2. getUserMedia React 웹캠 - 3. Canvas React 웹캠 - 4. Select webcam Sample Code 오늘은 웹캠을 통해 영상을 보여주는 간단한 React 앱을 만들어보겠습니다. 예제 코드: Sample Code 소스 위치: src/tutorial/Tutorial03-Webcam.js navigator.mediaDevices.getUserMedia() 단순히 navigator.mediaDevices.getUserMedia()만 호출하면 웹캠을 사용할 수 있습니다. 함수 인자로는 video를 쓸 것인지 audio를 쓸 것인지 true/false 값을 넣어주는 게 ..

React 웹캠 시리즈입니다. React 웹캠 - 1. Promise 비동기 함수의 이해 React 웹캠 - 2. getUserMedia React 웹캠 - 3. Canvas React 웹캠 - 4. Select webcam Sample Code 웹캠 사용 코드는 React뿐만 아니라 일반 자바스크립트에서도 사용할 수 있는 코드인데요, 다만 이번 예제에서 React 앱을 연동하기 위해 React state/ref 등을 사용합니다. 예제 코드: Sample Code 실행 방법: npm start 후 브라우저에서 http://localhost:3000/test03 으로 접속 소스 위치: src/ui/TestWebcam.js 본격적으로 웹캠 코드를 논하기 전에, 자바스크립트의 비동기 작업의 미래 결과인 Pro..

오늘은 Overlay(오버레이)에 대해 알아보겠습니다. Overlay란, 어떤 HTML 엘리먼트 위에 또 다른 HTML 엘리먼트가 겹치게 보이는 효과인데요, 이것을 별도로 다루는 이유는, 경험상 Overlay를 자주 쓰면서도 매번 용법을 까먹거나 헷갈리기 십상이기 때문입니다. Overlay를 익히기 위한 효과적인 방법 중 하나는 직접 코드를 수정해 가면서 이해하는 것인데, 이 때 HTML 엘리먼트마다 테두리가 보이게 해서 즉, 스타일의 border 속성을 '1px solid green' 등으로 부여해서 직접 영역을 확인하는 것이 좋습니다. 자, 이제 예제 코드를 갖고 놀면서 Overlay를 이해해봅시다. 예제 코드:  Sample Code 소스위치: src/tutorial/Tutorial0..