목록STUDY/Vue.js & Express.js & JS (16)
개발자 '쑥말고인절미'
서버를 시작할 때 동시에 DB에 필요한 테이블이 생성되도록 구현해보겠다. 나는 DB안에 dataset이라는 테이블과 data_temperature라는 테이블을 생성해줄 것이다. dataset 테이블에는 id, name, type, 생성시간, 수정시간 컬럼을 만들어 줄 것이고, data_temperature 테이블에는 id, temperature, 생성시간, 수정시간 컬럼을 만들어 줄 것이다. 아래는 전체 트리인데 클릭되어 있는 두 파일인 models 폴더의 data_temperature.js 파일과 dataset.js 파일만 중요하게 생각하면 된다. DB에 생성해줄 테이블의 구성을 models 폴더에 작성해보겠다. 나는 dataset이란 테이블과 data_temperature라는 테이블을 생성할 것이다...
vue에 그래프를 그릴 수 있는 방법은 다양하게 있다. 그 중 chart.js를 사용하려 했는데 책임님께서 데이터가 많아지면 로딩이 오래걸린다고 하셔서 추천받은 EChart를 설치해보았다. 현재 vue2를 사용하고 있기 때문에 vue2에 맞는 EChart를 설치해줄 것이다. 아래 명령어로 npm을 이용하여 vue2-echarts를 설치해준다. npm install vue2-echarts 공식 홈페이지를 보니 vue2에서 vue-echarts를 사용하기 위해서는 @vue/composition-api를 설치해야 한다고 한다. 아래 명령어를 통해 설치해주자. npm i -D @vue/composition-api 그 다음 vue파일을 하나 생성해주고 아래 소스를 집어넣어 실행시켜보면 아래와 같이 그래프가 잘 나..
에러 MySql과 node를 연결하는데 에러가 발생해서 한참 애를 먹었다. 에러 화면은 아래와 같다. 사실 캡쳐한 화면보다 에러가 훨씬 길게 나왔고 첫 번째 줄만 구글링을 해보았다. 아래와 같이 에러문이 출력됐는데 여러 해결책이 있었지만 나는 dbeaver로 MySql을 사용하고 있었기 때문에 참고하기 어려웠고, 포스팅 맨 아래에 첨부한 링크를 통해 에러를 해결할 수 있었다. Uncaught Error Error: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client node에서 MySql을 사용하기 위해 아래 명령어로 MySql..
npm run serve를 하는데 자꾸 멈출때 아래 명령어를 입력해 멈추게 하는 오류를 찾아 수정해주면 멈춤현상도 해결된다. npm run lint + 추가 npm run lint에서 오류가 없다고 떴지만 1) 소스에 오타가 있거나 2) 세미클론이 찍히지 않았거나 3) html파일 작성 중 구성을 올바르지 않게한 경우에도 멈춤현상이 발생한다. 나의 경우에 1, 2, 3번 모두 해당했고 3번의 경우에는 button을 2개 만들었는데 div로 영역을 묶어주지 않아서 멈춤현상이 발생했다. npm run lint에서 깨끗하다고 나온다 해도 멈춤현상이 계속해서 발생하면 소스를 하나하나 보는 수 밖에 없겠다. //수정 전. 멈춤현상이 여기서 발생했다. Check Final //아래와 같이 div영역을 설정해준 후엔..
1. Node.js 설치 여부 확인 Vue 설치 전에 Node.js가 설치되어 있는지 cmd창을 열어서 아래 명령어를 통해 확인해보자. node -v 아래와 같이 버전이 나오면 설치가 되어 있는 것이니 2번 단계로 넘어가면 되고, 저렇게 나오지 않으면 Node.js가 설치되어있지 않은 것이니 1-1번 단계를 따라 설치해주자. 1-1. Node.js 설치 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위 링크로 들어가서 설치파일을 다운받을 것인데 아래처럼 다운로드 버튼 두 개의 버튼이 나온다. 그 중 왼쪽에 있는 LTS 버튼을 클릭해서 다운받고 설치..
https://hjink247.tistory.com/31 [Error.006] 웹 크로스 도메인 에러: CORS policy 로컬로 테스트하던 잘 사용하던 중에 난 에러 Access to XMLHttpRequest at 'http://localhost:8080/SFSJ_API/api/001001000/getJsonFromIOExcel.do' from origin 'http://localhost:7080' has been bl.. hjink247.tistory.com
2번째 내용
첫 튜토리얼 소스는 아래와 같이 index.css, index.html, index.js 로 되어 있다. html, body { margin: 5px; padding: 0; } {{ message }} var app = new Vue({ el: '#app', data: { message: 'testing~~~~!' } }); app.message = 'changed message blabla' 처음으로 Vue.js를 써보는 건데 음 지금 첫번째 튜토리얼에서 배운건 1. js파일에서 Vue를 생성하고 그 안에서 작동한다. 그리고 Vue안에 el과 data를 선언하는데 2. el은 html파일의 div영역 id와 연결된다는 것이고, 3. data는 html파일의 div영역 안에 {{ }} 부분과 연결된다..