GO CAN DO IT

화면단과 서버간의 통신을 위하여 axios 통신을 구현해 보았다. 먼저 아래의 명령어를 통해 axios 라이브러리를 설치해준다. $vue add axios Main.js에 다음과 같이 axios 설정을 해준다. import Vue from 'vue' import './plugins/axios' //####이부분 import App from './App.vue' //####이부분 import router from './router' import vuetify from './plugins/vuetify' //import axios from 'axios' Vue.prototype.$http = axios //####이부분 new Vue({ el: '#app', router, vuetify, axios, //#..

뷰에서는 라우터를 통해 뷰 파일과 url 을 연결해주는 기능을 제공한다. 뷰 예제에서는 보통 App.vue에 직접 라우터 경로를 임포트 하고, 해당 라우터 객체를 뷰인스턴스의 변수로 사용했다. 아래의 코드처뤔. 하지만, 대형 프로젝트에서는 이렇게 하지 않고 index.js라는 파일을 통해 라우터를 한꺼번에 관리한다. $mkdir router $cd router $vi index.js 를 통해 router라는 디렉토리를 하나 만들고, index.js라는 파일을 생성해주었다. 프로젝트 구조는 다음과 같아졌다. - src - components - router - index.js - App.vue main.js에서 우선 설정을 해준다. // 1. main.js import Vue from 'vue' impor..

이제 실제로 내가 뷰 프로젝트를 개발해보도록 하겠다. 백쪽은 JPA로 구현할거라서 우선, 통신은 구현하지않고 화면이랑 공통 레이아웃을 기준으로 우선 프론트쪽을 구현해보겠다. 가장 먼저 할 것은 바로 vuetify 설치! vuetify를 사용하기 위해 먼저 터미널에서 작업하려는 폴더로 이동 후, vuetify 를 깔아준다. $cd vue-form $vue add vuetify 뷰티파이 공식 사이트는 api 설명이 친절하게 잘되어있어서 여기꺼 보고 거의 따라하는 식으로 구현했다. https://vuetifyjs.com Navigation drawer component The navigation drawer component contains internal navigation links for an appli..

이번에는 $ vue create vue-form $ cd vue-form $ npm run serve 명령어를 통해 vue-form 패키지를 만들고 작업을 해주었다. 새로 작성한 App.vue 소스는 다음과 같다. // App.vue id: pw: login 여기서 추가적으로 event.preventDefault() 는 기본적으로 과거 자바스크립트에서 사용되었던 문법이고, Vue에서는 form 태그의 submit 속성값으로 prevent를 넣어줄 수 있다. // event.preventDefault()를 주석처리 submitForm : function () { //event.preventDefault(); console.log('username' + this.username); console.log('p..

App.vue 파일을 활용해서 한번 화면에 데이터를 뿌려보도록 하자. 기존에 html 소스 안에서 뷰 인스턴스를 생성했던 방법과는 아주 조금 다르다. 코드를 통해 알아보자 {{str}} #1. 싱글 파일 컴포넌트에서 html 을 선언할 때는, 가장 상위에 div 태그를 하나 선언하고 , 그 안에 header던, body던 생성을 해줘야 한다. #2. 기존에 html 파일에서 뷰 인스턴스 객체를 선언하고 주입해주었던 방식 #3. 싱글파일 컴포넌트에서는 이런식으로 변수를 선언해주면 안되고 #4. 방식으로 선언을 해주어야 한다. 그 이유는, 여러 객체들의 재사용성을 높이기 위함으로 변수를 함수형으로 선언하고 , 해당 값을 리턴해주는 형태로 사용한다. #싱글파일 컴포넌트 체계에서 컴포넌트 등록하기 컴포넌트를 등..

#뷰 라우터 인스턴스 생성 및 뷰 인스턴스에 연결 아래와 같이 vue 인스턴스에 $route 변수가 주입된 걸 확인할 수 있다. #라우터가 표시되는 영역 라우터 인스턴스에 /login 과 /main url 및 url에 대응하는 컴포넌트 명을 선언해주었다. 만약 해당 url 이 호출 될 경우, 태그 영역에 해당 컴포넌트들이 주입이 될 것이다. 해당 소스 실행 결과는 다음과 같다. 1). http://127.0.0.1:5500/playground/router.html#/login url을 호출 한 경우 2). http://127.0.0.1:5500/playground/router.html#/main url을 호출 한 경우 #라우터 링크 아래와 같이 라우터 링크를 추가해주면 이런식으로 이동 링크를 제공해준다...