본문 바로가기

분류 전체보기

 (268)
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)을 넣으면 자료형의 데이터 갯수만큼 동작한다 작명한 변소는 데이터안..
11월 3주차 1. Vue.js 공부 vue.js & springboot 1~6 : https://dwc04112.tistory.com/129 6. Vue + Springboot 연동 4 axios 통신 이번 연습에는 서버에서 boardList를 받아와서 원하는 내용 보여주자 Home.vue {{user.content}} v-for 지시문으로, for문을 돌려 users를 탐색하여 content를 보여준다. Script data()안에 users 배열.. dwc04112.tistory.com 2. Maven과 Gradle 대표적인 빌드 관리 툴에 대해서
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..
(Vue.js환경 만들기 4) proxy 설정 3. Springboot + Vue 개발환경 만들기1 Springboot는 이때까지 작업한 MySpringbootApi 를 사용해볼것 (안되면 새로 만들어야함..) vue cli로 src 디렉토리 아래에 vue.js 프로젝트를 하나 만들어 볼것이다 1. Vue create vue create 기능은 CLI 3.xx.. dwc04112.tistory.com 위 글에서 이어집니다 vue.js dev서버에 proxy 설정을 해서 spring으로 오게 될 요청들을 모두 vue.js dev서버에서 proxing 하여 받고, spring쪽으로 보내주도록 설정을 해볼것이다 클라이언트에서 8081(vue)포트로 요청을 보내면 특정 url을 지정해 놓고, 8081에 해당 url로 온 요청을 다 8080(spring) 으..
(Vue.js환경 만들기 3) Springboot + Vue create Springboot는 이때까지 작업한 MySpringbootApi 를 사용해볼것 (안되면 새로 만들어야함..) vue cli로 src 디렉토리 아래에 vue.js 프로젝트를 하나 만들어 볼것이다 1. Vue create vue create 기능은 CLI 3.xx 버전부터 지원한다고 한다.. 바로 이전에 2.xx버전을 다운받았지만 참고하는 글과 같은 환경을 만들기 위해서 npm을 uninstall하고 다시 install 한다 (여기선 Vue3버전을 사용했지만 Vue 2버전을 설치하자..) 다시 Springboot 프로젝트의 src아래에 vue create frontend를 생성하자 -> default로 시작하면 새로운 프로젝트가 시작된다 만약 intellij Terminal에서 vue 버전을 확인할때 오류..
(Vue.js환경 만들기 2) Vue -cli 설치 및 프로젝트 생성 Vue -cli 여기서 CLI 란 ? 명령 줄 인터페이스(CLI, Command line interface) 또는 명령어 인터페이스는 텍스트 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식을 뜻한다. Vue project 실행을 보면 더 쉽게 이해될것 그렇다면 vue-cli 는 기본 vue 개발 환경을 설정해주는 도구라고 볼 수 있다. 1. vue-cli 설치 Node.js 환경변수 설정까지 마치고 이제 vue -cli를 설치한다 vue는 현재 2가지 버전에 대한 설치를 제공한다. 2.x와 3.x 버전이 있는데 2.x 버전이 안정화 되어있고 많이 사용한다고 한다. 따라서 2.x 버전 설치! ver 2.x : npm install vue-cli -global ver 3.x : npm install @v..

티스토리툴바