본문 바로가기

728x90

프로그램/Vue19

vscode Sass Compiler 설치 1. 설치하기 확장플러그인에서 검색하여 설치 - SASS 컴파일을 자동으로 해주는 플러그인 - [SASS Lint]도 같이 설치하면 SASS문법을 쉽게 코딩할 수 있다. Sass Lint를 통해 Sass문법을 쉽게 작성가능 2. [Watch SASS] - [Live Sass Compiler]를 설치하면 하단 상태표시줄에 [Watch Sass]버튼이 생성 빨간색으로 체크한 부분이 [Watch Sass]버튼 - [test.scss]에서 구문을 작성 후 [Watch Sass]를 누르면 [test.css]가 바로 생성 1) 자동생성해보기 # HTML코드 SASS테스트 제목태그 # SCSS코드 $mainColor: red; h1{ color: $mainColor; } # 자동 컴파일 과정 # 컴파일된 CSS코드 .. 2021. 11. 27.

vue + 자바 파일다운로드 const form = new FormData() form.append('filepath', 'board') form.append('filename', 'test.pptx') form.append('originFileName', '1634543241310-1897687360') this.$axios({ method: 'POST', url: 'com/systemmng/file/downloadAxiosFiles.do', responseType: 'blob', headers: this.headerWeblog, data: form, params: { param1: 1, parma2: '한글', parma3: 'eng!@' } }) .then(response => { const fileName = 'test.pp.. 2021. 10. 19.

vue Event Bus 우선 Vue Event Bus 사용에는 두가지 방법이 있습니다. - 직접 Event Bus를 만들고 import 해서 사용하는 방법 - Vue에 내장되어있는 Event Bus 를 이용하는 방법 import 해서 사용하는 방법 장점 : 부모-자식 사이가 아니여도 사용이 가능하다. 너무 편하다. 단점 : 너무 많이 쓰이면 후에 관리하기 힘들다(찾기 힘들다) 1. Event Bus // EventBus.js import Vue from 'vue'; const EventBus = new Vue(); export default EventBus; 2. $emit 이벤트 호출 $emit('이벤트 이름', option) option에 값을 넣어서 보낼 수 있다. HelloWorld Change Component 3. .. 2021. 10. 18.

material 아이콘 url https://fonts.google.com/icons 2021. 10. 14.

vue를 이용한 프로젝트 생성 cmd 창을 실행한 후에 프로젝트를 생성할 폴더로 이동한 후에 test프로젝트를 만들어 보자. vue create test Manually select features 를 선택하여 수동으로 셋팅한다. 위와 같이 선택을 한다. 구브라우저와 호환이 필요하면 Babel을 선택한다. 익스플로러11 지원이 필요한 경우 선택후 엔터 2.x 버전을 선택후 엔터 router에서 history모드를 사용할것인지 묻는데 그냥 디폴트로 엔터 나중에 소스에서 수정할수 있다. ESLint 문법 체크 하는 건데 그냥 Standard 선택하고 엔터 저장할때 문법 체크인 Lint on save 선택하고 엔터 지금까지 설정한 환경파일을 분리해서 만들지 package.json에 통합할지 묻는데 분리해서 저장하겠다고 선택후 엔터 향후 프.. 2021. 9. 2.

Vs Code 기본 환경 셋팅 Vue를 사용하기 위해서는 VsCode 확장 패키지를 설치하여야 한다. 먼저 개발자 폰트 부터 설정하자. 코딩을 위한 개발자 폰트 설정 네이버 github.com/naver/d2codingfont GitHub - naver/d2codingfont: D2 Coding 글꼴 D2 Coding 글꼴. Contribute to naver/d2codingfont development by creating an account on GitHub. github.com 개발자 폰트를 다운 받아서 모든 사용자용으로 설치 한다. vscode를 열어서 TextEditor -> Font D2Coding ligature 입력합니다. 그리고 나서 Edit in settings.json 클릭하여 "editor.fontFamily":.. 2021. 9. 2.

vue 개발환경 설정하기 1. node 설치 https://nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. node 설치를 하면 npm도 같이 설치가 된다. npm으로 yarn을 설치한다 npm install -g yarn - node 설치가 잘 되었는지 확인한다. - yarn 설치가 잘 되었는지 확인한다. 3. 에디터 Tool로 Visual Studio Code를 설치한다. https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, Windows Visual Studi.. 2021. 9. 2.

store 저장소 처리 전역적으로 설정하여 값을 가져 가기 위해서는 store 설정을 하여야 한다. import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { memberInfo: JSON.parse(localStorage.getItem('member')), drawer: false, siteTitle: '', appBarShow: true, sb: { act: false, msg: '', color: 'error' }, user: { name: '관리자', id: '없음', img: 'https://randomuser.me/api/portraits/men/85.jpg' } }, mutations: { ge.. 2021. 9. 1.

router 설정 화면에서 메뉴 클릭시 라우터를 거쳐서 해당 페이지를 호출한다. import Vue from 'vue' import Router from 'vue-router' import axios from 'axios' Vue.use(Router) Vue.prototype.$axios = axios const apiRootPath = process.env.NODE_ENV === 'production' ? '/rice/' : '/rice/' Vue.prototype.$apiRootPath = apiRootPath axios.defaults.baseURL = apiRootPath const originalPush = Router.prototype.push Router.prototype.push = function push.. 2021. 9. 1.

로그인시 rsa 암호화 적용하기 위에서 만든 rsa 스크립트 사용방법이다. 로그인시에 암호화 한다. 로그인을 하기 위한 껍데기를 먼저 만든다. views\login\index.vue 파일을 만든다. 로그인 실체 components 파일을 만든다. components\login\login.vue 로그인 로그인 rsa 암호화 사용 방법은 만들어 놓은 js 파일을 import 한다. import RSAKey from '@/js/rsa/rsa.js' 최초 로딩시 자바 컨트롤러 호출하여 공개키를 가지고 온다. getRsaKey () { this.$axios.get('grain/mbr/axiosRsaKey.do') .then((r) => { this.pubRsaKey = r.data }) .catch((e) => { if (!e.response).. 2021. 9. 1.

vue에서 rsa암호화 하여 자바와 통신하기 로그인시에 아이디와, 패스워드를 rsa로 암호화 하여 자바와 통신한다. 먼저 자바에서 rsa로 암호화에 필요한 공개키를 발행하여 vue단으로 넘긴다. vue에서는 공개키를 이용하여 rsa암호화 하여 자바로 보내면, 자바에서 프라이빗 키로 복호화 하여 처리한다. rsa 암호화 자바스크립트는 있는데 vue용으로 만들어진 rsa암호화 모듈이 없어서, rsa.js를 vue에서 사용할수 있도록 약간 컨버트 하였다. 소스는 총4개의 js파일이다. js\rsa 폴더를 만든후에 1. jsbn.js 파일을 만들어서 저장한다. /* eslint-disable */ const BigInteger = (function () { 'use strict' // Bits per digit let dbits // JavaScript .. 2021. 9. 1.

vue 폴더구조 폴더구조는 대충 이렇게 잡았다. src -- assets -- components -- js -- plugins -- router -- store -- views App.vue main.js 이렇게 잡고서 vue는 컴포넌트 개념이라서 views 폴더에는 화면에 표시해 주는 껍데기만 보여주고 실제 작업은 components 폴더에 작업하여 import 하여 처리한다. js 라이브러리는 js 폴더에 모아 놓았다 plugins는 vue에서 제공하는 plugins기능을 모아 놓았다 router는 화면분기시 필요하다. store는 전역변수로 전체에서 접근이 필요할때 필요하다. 2021. 9. 1.

App.vue main.js가 진입점이면 App.vue는 말 그대로 보여주는 모든것을 관리한다. App.vue에서 전체화면을 관리하는 프레임이라고 보면 된다. {{$store.state.siteTitle}} mdi-home {{$store.state.user.name}} {{item.title}} {{ subItem.title}} © {{ new Date().getFullYear() + ' ' + siteCopyright}} {{ $store.state.sb.msg }} 닫기 2021. 9. 1.

엔트리 포인트 진입점 main.js public폴더에 index.html 에 최초이겠지만. 실제 진입점은 main.js로 보면 된다. 기본적인것 import 한다. import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import vuetify from './plugins/vuetify' import VuetifyDialog from 'vuetify-dialog' import 'vuetify-dialog/dist/vuetify-dialog.css' import Autocomplete from 'v-autocomplete' import 'v-autocomplete/dist/v-autocomplete.cs.. 2021. 9. 1.

package.json 의존성 관리를 한다. 기본 로그인과 mvc 적용된 설정이다. { "name": "vpn", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "@mdi/font": "5.9.55", "axios": "0.21.1", "material-design-icons": "3.0.1", "typeface-roboto": "1.1.13", "v-autocomplete": "1.8.2", "vue": "^2.6.11", "vue-router": "^3.2.0", "vu.. 2021. 9. 1.

vue.config.js vue로 개발시 개발환경에서 크로스 도메인 안 생기게 작업을 할려면 vue.config.js 파일에 설정을 해줘야 한다. 프로젝트시 빌드 패스, 배포패스, 프록시 서버 설정을 해줘야 한다. module.exports = { transpileDependencies: [ 'vuetify' ], outputDir: 'c:/eGovFrameDev-3.9.0-64bit/workspace/GGM/src/main/webapp/vpn', publicPath: process.env.NODE_ENV === 'production' ? '/rice/vpn' : '/', devServer: { proxy: { '^/rice': { target: 'http://localhost:9080', ws: true, changeOrigi.. 2021. 9. 1.

vscode 개발환경 설정 파일 vscode 설치를 하면 환경설정 파일을 아래의 경로에 있다. C:\Users\cbw\AppData\Roaming\Code\User\settings.json 내 개발환경 셋팅은 아래와 같다. vscode 설치하고 환경파일을 동일하게 설정하면 다른 pc에서도 동일하게 작동한다. { "git.autofetch": true, "git.enableSmartCommit": true, "python.languageServer": "Pylance", "explorer.confirmDelete": false, "git.confirmSync": false, "editor.codeActionsOnSave": { "source.fixAll": true }, "files.autoSave": "onFocusChange", "w.. 2021. 9. 1.

vue 다른 컴포넌트 끼리의 통신처리 개별의 컴포넌트 사이에서의 데이터 전달(통신) 방법에 대해 정리하겠다. Vue는 자체적으로 이벤트와 관련된 $emit, $on 메소드를 갖고 있어, 보통 EventBus라는 이름의 Vue 객체 생성 후 해당 객체를 사용하여 서로 통신을 한다. 예제를 보자. 다음은 EventBus 생성 파일이다. - EventBus.js import Vue from 'vue'; export const BUS = new Vue(); 다음은 이벤트 호출/처리할 컴포넌트 선언 파일이다. - One.vue (이벤트 호출 컴포넌트) import { BUS } from './EventBus'; export default { name: 'One', mounted() { BUS.$emit('bus:call'); } } - TheOthe.. 2021. 8. 26.

Vue 프로젝트 생성 vue 최초 프로젝트 생성 vue create vpn cd vpn vuetify 플러그인 추가 vue add vuetify /* 실행 */ yarn serve 2021. 8. 24.

이전 1 다음

728x90

"이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다."

티스토리툴바