본문 바로가기
반응형

vue11

[vue] vuex pathify를 사용한 dialog(모달창, 팝업창) 만들기 이번게시글에서는 vuex-pathify를 사용하여 dialog 창 만드는 방법을 정리합니다. 소스코드는 https://github.com/jaeho310/vue-study (vuex-dialog 브랜치)에서 확인 가능합니다. 이전 게시글에서 내용이 추가된 예제입니다. [vue] vuex-pathify를 사용한 메뉴바 구성하기(vuex-pathify 사용법) vuex-pathify란 vue를 사용하다보면 컴포넌트간 데이터 교환을 해야하는 경우가 많습니다. 부모자식간의 통신의 경우 props emit을 활용하면 되지만 고조할아버지와 손자가 통신하는경우 props를 사용 frozenpond.tistory.com 결과화면 1. CustomDialog.vue 파일 생성 confirm alert ok yes no .. 2021. 11. 2.
[vue] 스프링(spring)에서 vue router 사용법 spring과 vue 프로젝트를 연동한 후 vue router의 위치를 브라우저의 검색창에 입력하면 404 에러를 떨어뜨려줍니다. (spring컨트롤러는 요청한 url 에 대한 정보가 없습니다) modelAndView가 떠오릅니다. controller에 modelAndView를 사용해서 html을 떨어뜨리려고보니 spa 프레임 워크인 vue는 빌드된 html이 하나뿐입니다. 아래의 방법으로 해결 합니다. 1. vue.config.js // vue.config.js const path = require("path"); module.exports = { outputDir: path.resolve(__dirname, "../src/main/resources/static"), indexPath: path.res.. 2021. 11. 2.
[vue] vue와 spring 연동하는법(vue 배포방법) vue를 배포할때는 크게 두가지 방법을 사용합니다. nginx, appach, IIS 등 웹서버에 빌드된 html파일을 넣는다 was에 붙여서 배포한다 aws s3 aws cloudfront 첫번째 방법과 두번째 방법을 정리합니다. 1. nginx, appach, IIS 등 웹서버에 연동하는 방법 저는 nginx를 사용하였습니다. (1). dockerfile 작성 FROM node as build-stage WORKDIR /app COPY . . RUN yarn install -g RUN yarn run build # # production stage FROM nginx:stable-alpine as production-stage COPY ./nginx/nginx.conf /etc/nginx/conf.d.. 2021. 11. 2.
[vue] vuex pathify를 사용한 메뉴바 구성하기(vuex pathify 사용법) vuex-pathify란 vue를 사용하다보면 컴포넌트간 데이터 교환을 해야하는 경우가 많습니다. 부모자식간의 통신의 경우 props emit을 활용하면 되지만 손자가 고조할아버지나 삼촌 사촌 등과 통신하는경우 props를 사용할 수는 없습니다.(vue 라이프사이클 이슈 포함: 부모 mount 이전에 자식들은 모두 create와 mount가 진행되어버립니다) 그럴때 사용하는것이 vuex입니다. 모든 데이터 통신을 한 곳에서(중앙 집중식) 관리할 수 있습니다. (캡틴판교님의 vuex) Vuex 시작하기 1 - Vuex와 State Vue 중급으로 레벨업 하기. 상태 관리란 무엇인가? Vuex를 이용한 상태 관리. state 소개 joshua1988.github.io 그러나 vuex의 사용법을 숙지하고나면 .. 2021. 10. 27.
[vue] vue 프로젝트에 jest 연동, 사용하기 vue프로젝트에 jest를 연동 예제입니다. 정리가 잘됐다고 느낀 캡틴판교님의 글 Cracking Vue.js(https://joshua1988.github.io/vue-camp/testing/jest-testing.html)를 참고하여 적용하던중 만난 에러들 입니다. 1. 프로젝트 생성 $ vue create jest-tutorial vue-cli를 통해 프로젝트를 생성합니다. 저는 vue2로 만들었습니다. 2. HelloWorld.vue 에 변수 추가 HelloWorld.vue 파일에 abc라는 변수를 추가합니다. 3. helloWorld.spec.js(helloWorld.test.js 추가 test('HelloWorld Test', () => { expect(true).toBe(true); }); .. 2021. 10. 26.
[vue] vue tutorial 뷰 튜토리얼 -6- (vuetify 테이블 input박스) 소스코드 첨부합니다(https://github.com/jaeho310/vue-tutorial) 목차 vue tutorial -1- (뷰 시작하기) vue tutorial -2- (컴포넌트와 인스턴스) vue tutorial -3- (앱바 만들기) vue tutorial -4- (props 사용하기) vue tutorial -5- (뷰 라우터 사용하기) vue tutorial -6- (뷰티파이 테이블) 이번 게시글에서는 상단앱바를 이용해 화면이동하는 방법과 vuetify를 사용하여 테이블, input 박스를 만드는 방법에 대해 정리합니다. 1. AppBar.vue 홈 생성 목록 상단 앱바 파일입니다. 버튼클릭 이벤트에 this.$router.push("원하는 url")을 입력해줍니다. url이 변경되며 r.. 2021. 9. 21.
[vue] vue tutorial 뷰 튜토리얼 -5- (vue router 뷰 라우터를 사용하여 화면이동하기) 소스코드 첨부합니다(https://github.com/jaeho310/vue-tutorial) 목차 vue tutorial -1- (뷰 시작하기) vue tutorial -2- (컴포넌트와 인스턴스) vue tutorial -3- (앱바 만들기) vue tutorial -4- (props 사용하기) vue tutorial -5- (뷰 라우터 사용하기) vue tutorial -6- (뷰티파이 테이블) 이번 게시글에서는 vue router를 사용하여 화면이동을 하는 방법에 대해 정리합니다. 프로젝트 구조 디렉토리 구조는 다음과 같습니다. . |-- App.vue |-- assets | |-- logo.png | `-- logo.svg |-- components | |-- Create.vue | |-- Ho.. 2021. 9. 21.
[vue] vue tutorial 뷰 튜토리얼 -4- (뷰 부모자식 통신 props 사용법) 소스코드 첨부합니다(https://github.com/jaeho310/vue-tutorial) 목차 vue tutorial -1- (뷰 시작하기) vue tutorial -2- (컴포넌트와 인스턴스) vue tutorial -3- (앱바 만들기) vue tutorial -4- (props 사용하기) vue tutorial -5- (뷰 라우터 사용하기) vue tutorial -6- (뷰티파이 테이블) 이번 게시글에서는 vuetify를 사용한 footer 퍼블리싱과 부모 컴포넌트와 자식컴포넌트의 데이터 교환방법, vue에서의 document.ready(function()) 을 정리합니다. 1. footer.vue © {{ year }}, Made by mdi-vuetify {{author}} (1) 퍼블리.. 2021. 9. 14.
[vue] vue tutorial 뷰 튜토리얼 -3- (뷰 앱바 만들기) 소스코드 첨부합니다(https://github.com/jaeho310/vue-tutorial) 목차 vue tutorial -1- (뷰 시작하기) vue tutorial -2- (컴포넌트와 인스턴스) vue tutorial -3- (앱바 만들기) vue tutorial -4- (props 사용하기) vue tutorial -5- (뷰 라우터 사용하기) vue tutorial -6- (뷰티파이 테이블) 이번 게시글에서는 vuetify를 활용하여 앱바를 만들고 vue 인스턴스 method 사용법을 정리합니다. 1. AppBar.vue Home Page1 Page2 vuetify를 사용합니다. https://vuetifyjs.com/en/components/app-bars/ App-bar component T.. 2021. 9. 14.
반응형

티스토리툴바