잉

프론트 개발환경을 vue로 정했고. https://ing-min.tistory.com/31?category=1052709 Vue_시작하기 [작업 환경 만들기] 0.node 설치(14.18.2 버전) https://nodejs.org/ko/download/releases/ 이전 릴리스 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 윈도.. ing-min.tistory.com 3d 오브젝트를 mqtt를 활용해 제어하고 싶다. 그러기 위해서 three.js를 사용하기로 했고, 내 obj 파일을 three.js의 obj loader 로 올리려고했다 하지만 obj 파일을 경로에서 읽지 못한다...

>>> 검색 옵션) 1. 책 제목 2. 책 저자 3. isbn (IoT에서 비전 인식으로 받아온 바코드 값으로 검색 가능) : 검색 옵션에 맞게 DB에 있는 값과 검색어를 비교하여 일치하는 책 리스트를 출력한다. [결과] 1.메인화면 2. 저자 검색, isbn 검색 3. 제목검색 : '이'가 포함된 모든 책이 나열된다. [구현 ] A. Front 1. home.vue 웹 페이지에서 실행되고 보여지는 것. 검색 이 부분이 [ 검색 옵션 : ____입력 바_____ : 검색 버튼 ] 을 그려주는 HTML이다. 뷰 부트스트랩을 이용하여 팀원 분이 작성해 주셨다. https://bootstrap-vue.org/docs/components/modal#modals 여기서 중요한 부분은 v-model , :optio..

var obj = { "1" : "iOS", "2" : "Android" }; var first_key = Object.keys(obj)[0]; var first_value = obj[Object.keys(obj)[0]]; console.log(first_key); console.log(first_value); 출처: [확장형 뇌 저장소] [Front_JS_객체의 첫 번째 키 or 값 출력하기] const 객체이름 = { "키1" : "값1" , "키2" : "값2" } > 객체의 첫번째 키 = Object.key(객체이름)[0] > 객체의 첫 번째 값 = 객체이름[Object.keys(객체이름)[0]] : 이렇게 하면 값을 뭘 받아왔는지 상관없이 첫 번째 값을 출력할 수 있다.

Data binding 데이터를 실시간 바인딩 /src/views/Test.vue binding test {{ title }} Life-cyle-Hooks vue event, method 이벤트를 발생시켜 method에서 처리할 수 있다. /src/views/TestEvent.vue Event test 1. 클릭/더블클릭 이벤트 나의 나이는: {{ age }} 1살 추가 1살 삭제 10살씩 추가(더블클릭) 1살 추가(한번만) 콘솔 프린트 3. 마우스 추적 이벤트 마우스 X: {{ mouseX }}, 마우스 Y: {{ mouseY }} 4. 키보드 이벤트 이름: (Enter 이벤트) 아이디: (Ctrl-Enter 이벤트) 나의 이름: {{ myName }} 나의 아이디: {{ myId }} (v-on:cl..

Test.vue를 src> views 경로에 만들어준다. test vue src>routher>index.js 에 뷰파일과 주소를 주가해준다. import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [ { path: '/', name: 'Home', component: Home }, { path: '/about', name: 'About', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is..

vue create 이름 오류 : 파일을 로드할 수 없습니다. 보안오류 PS C:\Workspace\git_frontback> vue create vueproj vue : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Program Files\nodejs\vue.ps1 파일을 로드할 수 없습니다. 자세한 내 용은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135170)를 참조하십시오. 위치 줄:1 문자:1 + vue create vueproj + ~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualifiedErrorId : UnauthorizedAccess PS..

Proxy 설정 백엔드의 CORS를 피하기 위해 proxy를 설정해서 사용 한다. 참고: https://velog.io/@skyepodium/vue-proxy-사용하기 vue proxy 사용하기 vue cli 3.x 버전 이상에서 웹팩 개발서버를 이용해서 프록시 요청을 보내봅시다. velog.io cors 교차 출처 리소스 공유 (CORS) - HTTP | MDN 교차 출처 리소스 공유 (CORS) - HTTP | MDN 교차 출처 리소스 공유(Cross-Origin Resource Sharing, CORS)는 추가 HTTP 헤더를 사용하여, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라 developer.mozilla.org .env 파일 생..

https://getbootstrap.com/docs/4.6/layout/overview/ Overview Components and options for laying out your Bootstrap project, including wrapping containers, a powerful grid system, a flexible media object, and responsive utility classes. getbootstrap.com 뷰 문서를 확인하여 코드를 구성한다. 다음과 같이 Header, Sidebar, Content로 세부분으로 나눈다. 다음의 위치에 각각의 파일을 생성 한다. (파일 내용은 타이틀만 써주자) Header 파일: /src/components/layout/Header...

[작업 환경 만들기] 0.node 설치(14.18.2 버전) https://nodejs.org/ko/download/releases/ 이전 릴리스 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 윈도우 64, ***msi 파일 받아야한다 > 설치 및 버전확인 npm -v node -v 1.npm설치 npm : 자바스크립트 프로그래밍 언어를 위한 패키지 관리자 https://github.com/coreybutler/nvm-windows/releases Releases · coreybutler/nvm-windows A node.js version management utility for W..