잉

라이브러리 설치 필수적인 라이브러리들을 다음과 같이 설치해서 사용하도록 한다. dotenv .env파일을 사용하기 위해 dotenv 라이브러리를 설치한다. dotenv 설치 > npm install dotenv --save dotenv 사용 .env환경을 사용하려면 다음과 같이 사용할 수 있다. const dotenv = require('dotenv'); dotenv.config(); const NODE_ENV = process.env.NODE_ENV; bodyparser bodyparser 설치 > npm install body-parser --save bodyparser 설정 /app.js ... const logger = require('morgan'); const bodyParser = requi..

node.js 설치 version: v14.15.4 (nvm을 이용하여 버전관리 할 것. (윈도우용 nvm: https://github.com/coreybutler/nvm-windows/releases )) > nvm install 14.15.4 64 > nvm use 14.15.4 64 > nvm list * 14.15.4 (Currently using 64-bit executable) 12.20.0 express 설치 express-generator를 이용하여 기본 구조를 생성 한다. https://expressjs.com/ko/starter/generator.html (참고로 현재 디렉토리는 C:\Workspace 이다) > npm install express-generator -g > expres..

로그인/아웃 처리는 jwt를 발행/폐기 하는 방식으로 처리 한다. 발급된 토큰정보는 웹브라우저의 localStorage에 저장한다. 백엔드 서버에 전송할때 토큰은 request.headers.token에 전송 한다. (백엔드의 API를 확인할 것) 응답 받을때 토큰은 response.headers.token에 전송 받는다. (백엔드의 API를 확인할 것) 참고 우리는 별도의 헤더 정보를 사용하며 Bearer를 사용하지 않는다. 로그인 화면 로그인 화면은 상단의 app-header부분 없이 독립된 디자인의 페이지로 생성하도록 한다. 1) 로그인용 index.vue 파일 생성 라우터를 처리할 index.vue파일을 생성 한다. /src/views/auth/index.vue 2) 로그인 페이지 생성 로그인용 ..

Axios UserList: http://localhost:8080/test-user/list UserInfo: http://localhost:8080/test-user/info 백엔드의 RestAPI를 호출하기 위해서 axios를 설치 한다. Axios란? https://github.com/axios/axios 1) Axios 설치 > npm install axios vue-axios --save 2) axios 함수 파일 생성 다음과 같이 axios를 처리하는 함수를 만들어서 사용하도록 한다. /src/store/apiUtil.js import axios from 'axios' const api = axios.create() export default api 향후 위 파일에서 api.intercept..

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

https://ing-min.tistory.com/49 https://ing-min.tistory.com/92 : 참고 링크 1-1. Desktop 모스키토 실행 (모스키토 config 수정해준다) : 포트 설정 / ... # listener port-number [ip address/host name/unix socket path] #listener listener 1883 # listener 8883 # protocol mqtt listener 8088 protocol websockets 1-2 라즈베리파이 모스키토 confg ********** 나는 브로커 : 모스키토를 라즈베리파이에서 띄울 거다!!! 따라서 위의 윈도우 모스키토 설정은 안 해도 된다. 아래의 라즈베리 경로에서만 mosquitto...

1. 모스키토 MQTT 브로커로 모스키토 사용 참고 : https://dejavuhyo.github.io/posts/mqtt-broker-mosquitto-install/ a. 모스키토 설치 b. 포트 확인 C:\Windows\system32>netstat -an​ 1833이 기본 포트로 확인된다 c. 모스키토 시작 및 종료 - 통신로그보기 C:\Program Files\mosquitto>mosquitto -v - 실행 **** C:\Program Files\mosquitto>net start mosquitto or - 종료 C:\Program Files\mosquitto>net stop mosquitto 2. 아나콘다 파워쉘에서 a. 파일 경로에 MQTT를 설치해 줘야한다. pythonTest 폴더에서..

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 파일 생..