본문 바로가기

Vue

 (45)
4. axios & vuetify (Vue + Springboot 연동 2) 어제까지 Vue build후 Springboot를 실행하면 Vue화면이 나오는 것 까지 성공적으로 실행했습니다. 이번에는 Vue와 Springboot 연동을 위해 axios와 vuetify를 설치할 것입니다 (vuetify는 3.xx 버전을 지원하지 않아서 2.xx버전을 다운받았음..) 1. Axios javascript 어플리케이션에서 서버 통신을 하기 위한 HTTP 통신 라이브러리. Vue.js에 종속되는 것이 아니라 다른 js 어플리케이션에서도 일반적으로 많이 사용된다 npm install axios vue의 node_modules에 설치하기 위해서 처음에 만든 vue파일 위치에서 axios를 받자. import Vue from 'vue' import App from './App.vue' impor..
3. Vue + Springboot 연동 1 시작하기 전에 Springboot 와 Vue를 쉽게(?) 연동하기 위해서 security를 구현하기 전 프로젝트를 사용 Vue.js 에서 Vuetify를 사용하기 위해서 2버전을 사용했다 Router 추가. vue add router를 터미널에 입력하여 추가 (default로 설치했기 때문) proxy & 빌드위치 변경 -- vue.config.js -- module.exports = { outputDir: "../main/resources/static", indexPath: "../static/index.html", devServer: { proxy: "http://localhost:8080" }, chainWebpack: config => { const svgRule = config.module.ru..
2. Vue.js 시작하기 Vue 인스턴스 new Vue를 통해 인스턴스를 생성하고 안에 el, data등 옵션을 넣어 인스턴스를 생성하고 화면을 컨트롤 할 수 있다 우선 우리가 사용할 파일은 기존의 App.vue 파일이다 데이터 바인딩 {{데이터바인딩}}은 JS부분의 데이터를 HTML로 넣어준다 데이터는 object 자료로 넣어둘것 (자료이름 : 자료내용) 데이터바인딩 사용 이유? 유지보수가 편해진다 -> 자주 변하는 데이터 Vue의 실시간 랜더링 기능을 사용하기 위해서 바인딩 위 코드와 같이 HTML속성도 데이터 바인딩이 가능하다 :속성 = "데이터이름" Vue의 반복문 v-for {{ i }} (:key="작명"도 필요) 횟수에 자료형(array/object)을 넣으면 자료형의 데이터 갯수만큼 동작한다 작명한 변소는 데이터안..
1. Vue.js 의 구조와 빌드하기 Vue 디렉토리의 구조 public 공용으로 접근 가능한 정적 파일이 저장 된다. 배포버전을 빌드할 때 필요한 파일이 저장 된다. src 개발자가 작성한 코드가 저장 된다. main.js : 새로운 라이브러리를 설정할 때 해당 파일에 연결해서 사용 package.json 지정된 의존성이 node_modules에 설치 된다. dist 빌드한 결과물이 저장 된다. (운영 서버에 배포할 파일) (아직 빌드를 실행하지 않아서 위 사진에는 없다) -> 빌드위치를 설정하여 java/resources/static 에 결과물을 저장할 것 Vue.js에서 build란? Vue 프로젝트를 빌드하게되면 html-css-javascript 파일로 추출된다. Vue 프로젝트 빌드하려면 해당 Vue위치에서 npm run build
0. Vue.js 목표 - Springboot의 프론트엔드 부분을 만들기위해 Vue.js를 사용할것. 원래는 따로 글을 쓰지 않으려했지만.. 아무런 지식 없이 개발하기가 힘들 것 같아서 오늘부터 Vue.js에 대해서 간단하게 공부해보려 한다 어제까지 진행한 "Vue개발환경 만들기 4" 에서부터 시작 개발환경 Vue Cli version -2 IntelliJ mariaDB (DBeaver) 참고한 유튜브나 블로그는 이 글에 올릴 예정입니다 https://jhhan009.tistory.com/39 Spring & Vue.js 스프링-뷰 연동 2번째 포스트 입니다. 별로 적을 것이 없다고 생각해서 뭘 적을까 생각하다가 스프링과 뷰 사이의 통신을 어떻게 해야하는지에 대해 간략하게 적어보려고 합니다. 뷰에서 통신은 jhhan009..

티스토리툴바