지금, 개발하기82 Vue] Vuetify 설치, 적용하기 Vuetify란? Vuetify란 구글의 material design을 사용할 수 있게 만든 Vue.js를 위한 UI 프레임워크입니다. Vuetify는 사용자가 원하는 컴포넌트를 사용할 수 있도록 다양하고 유용한 라이브러리를 제공합니다. vuetify를 사용하고자한다면, vue-cli를 이용하여 vue 프로젝트를 생성한 직후 vuetify를 바로 설치하는 것이 좋습니다. 프로젝트 진행 중에 설치하면 잘못하다간 폴더 구조가 바뀔 수 있습니다. 저는 무튼 프로젝트 생성 직후는 아니지만 지금 설치 하였습니다. 설정은 권장되는 Default로 고고! vue add vuetify 설치가 완료되면 main.js에서 vue생성자에 vuetify가 추가된 걸 볼 수 있습니다. 그리고 화면은 아래처럼 바뀝니다 우리는 이.. 2022. 4. 8. Vue] Vue CLI 3.0 프로젝트 생성하기 먼저 Vue Project를 시작하기 위해선 간단한 준비물이 필요합니다. 1. Visual Sudio Code Visual Studio Code는 Microsoft에서 개발한 코드 에디터 어플리게이션입니다. 무료로 사용할 수 있는 소스 코드 편집기이죠. 다양한 프로그래밍 언어를 다양한환경에서 지원하는데 가볍기까지해서 인기가 많은 IDE입니다. Visual Studio Code가 아직 설치되어 있지 않다면 아래 링크에서 설치해주세요. https://code.visualstudio.com/download 2. Extention 설치 Visual Studio Code의 왼쪽 메뉴바에서 extention이모티콘을 클릭한 뒤, 원하는 플러인 명을 검색해주세요. 그리고 오른쪽에서 install을 클릭하면 끝! Ve.. 2022. 4. 5. [onvif] 프로토콜에 없는 focus 기능 구현하기 https://github.com/futomi/node-onvif node onfiv를 이용하여 PTZ(pan, tilt, zoom) 기능을 구현하였다. focus 기능도 구현해야하는데 불행히도 focus 기능은 지원하지 않았다. 그래서 외부API를 받아서 직접 focus 기능을 구현하였다. 먼저 카메라가 연결된 사이트로 들어가자. 카메라 ip를 입력해주고( ex) http://10.50.0.154/index.html), id와 password를 입력하고 로그인한다. Focus 조절은 설정-고급설정-초첨에 있다. focus모드를 바꾼뒤 url이 어떻게 바뀌는지 보려고 한다. focus모드를 아무거나 변경하자. 그리고 F12를 눌러서 개발자모드를 켠다. Network에 들어가서 왼쪽메뉴의 방금보낸 요청을 .. 2022. 3. 29. Node.js] 이벤트 처리 - EventEmitter node.js에서는 이벤트를 처리할 때 'events'모듈을 사용합니다. 'events'모듈의 'EventEmitter'객체를 사용하면 이벤트와 이벤트 헨들러를 연동시킬 수 있습니다. EventEmitter를 이용해서 이벤트가 발생할 때 일어나는콜백함수를 만들어보겠습니다. 먼저, require함수를 이용해서 'events'모듈을 불러와주세요. 그리고 이 모듈을 이용하여 'EventEmitter'객체를 로드해주세요. 1. on 메소드 : 이벤트 핸들러를 설정하는 메소드. addListner 메소드도 동일하게 이벤트를 생성해주는데, 보통은 더 짧은 on메소드를 많이 씁니다. 2. emit 메소드 : 이벤트를 발생시티는 메소드. 이번에는 테스트를 하기위해서 이벤트를 강제로 발생시켜서 emit메소드를 사용합니다.. 2022. 2. 4. 이전 1 ··· 5 6 7 8 9 10 11 ··· 21 다음
