반응형 분류 전체보기47 웹브라우저에서 카메라 보기 블로그에서 재밌는 페이지를 만들어보았다. 최신 버전의 브라우저라면 아래에 카메라를 통한 모습이 웹캠처럼 보일것이다. 브라우저에서 mediaDevices.getUserMedia 를 사용하여 카메라를 사용하여 컨트롤할 수가 있다. 카메라 켜기 카메라 끄기 아래는 샘플코드이다. 카메라 켜기 카메라 끄기 MediaDevices 카메라, 마이크와 같은 디바이스에 접근할 수 있는 방법을 제공한다. getUserMedia() API를 사용하야 원하는 미디어장치 스트림을 가져올 수가 있다. 여기서 video 에 대한 스트림을 가져와서 tag의 소스로 연결시켜줌으로써 카메라 입력을 화면에 보여주도록 하였다. 2023. 3. 26. Vue.js 강좌 1. Vue를 제대로 이해하면서 시작하자 Vue를 그동안 사용해오면서 그때그때 필요한걸 하나씩 찾아보면서 사용해왔는데, 기본부터 확실하게 하나씩 공부해보자란 생각이 들었다. 그리고 Vue를 사용하려는 사람들을 위해 Vue를 내 것으로 만들 수 있도록 최대한 쉽게 설명하기 위해 기록을 남기려고 한다. 가장 먼저 Vue의 가장 기본적인 컨셉이 무엇인지는 아래 포스팅에서 간단하게 설명을 하였으니 먼저 보길 추천한다. Vue 시작하기전 알아야할 핵심 특징 목차 Vue Application 만들기 컴포넌트 단위로 파일 분리 컴포넌트 추가 지금부터 Vue 어플리케이션이 어떻게 시작이 되는지부터 파일을 컴포넌트 단위로 분리하는 것까지 3단계로 설명 할 것이다. ■ Vue Application 만들기Vue가 처음에 어떻게 동작하는지를 쉽게 설명하기 위해 bu.. 2023. 3. 24. 웹사이트에 애니메이션 간단하게 주기 - animate.css 이번 포스팅에서는 웹사이트에 애니메이션 효과를 정말 편하게 줄 수 있는 라이브러리를 소개한다. 자바스크립트 코드는 전혀 필요없이 필요한 곳에 class 추가만 해주면 애니메이션이 적용되는 CSS 라이브러리이다. 다양한 애니메이션 효과가 있어서 원하는 것을 골라서 class만 추가해주면 바로 적용이 된다. Animate.css 라이브러리 이름은 animate.css이다. 설치 및 사용법은 아주 간단하므로 문서를 참고하면 된다. 설치 npm 설치 $ npm install animate.css --save 파일 import import 'animate.css' 사용법 적용할 html 요소에 아래와 같이 클래스를 추가하면 끝이다. element 추가로 몇가지 옵션이 있는데 이름만 보면 무엇인지 쉽게 알 수 있을.. 2023. 3. 22. Javascript ECMAScript 2016, 2017 추가된 기능 Javscript의 표준안은 ECMAScript 2015 (ES6) 이후로도 계속 이어져 왔다. 이번 포스팅에서는 ECMAScript 2016, 2017 어떠한 기능이 추가되었는지를 알기쉽게 정리하여 보았으니, 몰라서 못쓰는 기능이 없도록 한번씩 훑어보고 머릿속에 담아두었다가 필요할때 꺼내쓰자. 참고로 ECMAScript2015 까지는 ES6 라고 불렀는데, ECMAScript 2016부터는 줄여서 ES7, ES8 이 아닌 ES2016, ES2017 와 같이 연도를 붙여서 표기한다. 가끔 연도와 버전이 혼동되었는데, 차라리 연도로 통일하는게 더 보기 좋은거 같다. ECMAScript 2016 (ES2016) 지수연산자 (**) // 거득제곱 let x = 2 ** 4; // 2 * 2 * 2 * 2 = .. 2023. 3. 22. 이전 1 ··· 6 7 8 9 10 11 12 다음 반응형
