IT & Art

React 라이브러리를 만들어 npm(node package manager)에 배포해 봅시다. &nbsp&nbspSample Code React 라이브러리 만들기 React 라이브러리를 만드는 몇 가지 방법이 있는데 저는 create-react-library 패키지를 자주 사용합니다. 노드 쉘에서 전역으로 설치한 뒤 명령어로 실행하면 됩니다. npm install -g create-react-library create-react-library react3d react3d/examples/ 디렉토리에서 npm install && npm start 하면 브라우저에서 아래 화면이 나옵니다. 브라우저가 뜬 상태에서, 라이브러리를 고쳐봅시다. react3d/src/index.js 의 return 내 컨텐츠를 변경..

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..

React 3D 웹앱 Basic 시리즈입니다. React 3D 웹앱 - 1. 개요 React 3D 웹앱 - 2. Three.js React 3D 웹앱 - 3. 3D 모델 React 3D 웹앱 - 4. 3D 뷰어 Github 지난 편에서는 three.js를 이용해서 3D 박스가 나오는 간단한 웹앱을 구현해봤습니다. 이제 예쁜 배경도 넣고 멋진 건물이나 사물, 3D 캐릭터 등을 넣어볼 텐데요, 그 전에, 맛있는 음식을 만드려면 좋은 식재료가 필요하듯이, 멋진 3D 웹앱을 만드려면 먼저 앱에 넣을 3D 모델이나 배경 이미지 등이 필요하겠죠. 오늘은 기초 재료 (1)배경 이미지 (2)사물들 (3)캐릭터를 얻는 방법에 대해 소개합니다. 배경이미지 웹 3D에서 배경이미지는 사방을 여러 각도의 이미지로 둘러싼 스카이..

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

버튼 실습을 통해 React 컴포넌트의 props와 state를 이해해 봅니다. React 컴포넌트란, javascript 함수로 이해하면 되는데 이 때 입력이 props, 출력이 HTML 엘리먼트라고 생각하면 됩니다. Props란, 컴포넌트를 호출한 부모 컴포넌트로부터 받은 파라미터로서 변경할 수 없는 값입니다. State란, 컴포넌트 내에서 변경 가능한 정보로, state가 갱신되면 출력도 갱신됩니다. 자, 이제 예제 코드를 보면서 이해해 봅시다. 예제 코드:&nbsp&nbspGithub 링크 소스 위치: src/tutorial/Tutorial01-ButtonClick.js 결과를 먼저 볼까요? 위 예제 코드를 받아 실행 후 브라우저에서 http://localhost:3000/test01 로 접속하면..

웹앱 UI를 만들다 보면 예쁜 아이콘을 사용해야 할 때가 많은데, 그럴 때마다 일일이 그리거나 이미지를 다운받아 쓰는 것은 너무 번거로운 일입니다. 또한 라이선스가 걸려있는 아이콘 이미지를 함부로 사용할 경우에는 법적 문제가 따를 수 있지요. 따라서 항상 라이선스를 잘 살피고 사용해야 합니다. 아이콘 HTML 웹 프로그래밍에 있어서는 Font Awesome이라는 굉장히 유명한 오픈 소스 프로젝트가 있습니다. Font Awesome The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options. fontawesome.com 가장 중요한 라이선스 문제는 사이트에 공지된 내..

웹 프로그래밍의 큰 장점 중의 하나는 UI 디자인이 분리되어 전문 디자이너와 독립적으로 개발할 수 있다는 사실입니다. 즉 일반적인 웹 프로그래밍은 3가지 섹션(HTML, CSS & Javascript)으로 나뉘는데, HTML은 컨텐츠, CSS는 디자인, Javascript는 상태 변화를 담당한다고 보시면 됩니다. &nbsp&nbspSample Code CSS 이때 CSS는 보통 .css 파일로 HTML 헤더에서 링크되곤 하는데요, 아주 유명한 Bootstrap의 경우, 아래와 같이 HTML 파일의 Hello, world! 자세히 보시면 태그에서 href 속성에 외부 URL 값이 있는데요, 이렇게 외부로부터 링크(브라우저로 다운로드)하는 것을 CDN(Content Delivery Network)이라고 부릅..