Blog Content

url에서 /#/ 태그를 지우려고 vueRouter에서 Mode를 'hash' -> 'history'로 변경했다 vue.js를 빌드해서 IIS에 배포했는데 첫 index.html 페이지는 잘 열리는데 하위 페이지들이 안 열리고 404 오류가 나온다 해결방법 URL Rewrite를 설치한다 URL Rewrite 설치 URL Rewrite : The Official Microsoft IIS Site Overview IIS URL Rewrite 2.1 enables Web administrators to create powerful rules to implement URLs that are easier for users to remember and easier for search engines to find...

vue.js 에서 윈도우 팝업 띄우는 예제 컴포넌트 폴더에 popup.vue 파일을 추가 src\components\winPopup.vue 팝업입니다 팝업을 띄울 페이지에 코드 추가 pages\pageEx1.vue routes.js에 winPopup 추가 { path: "/popup", component: () => import("layouts/PopupLayout.vue"), children: [ { path: "/winPopup", component: () => import("components/popup/winPopup.vue"), }, ], }, routes.js 전체코드 const routes = [ { path: "/", component: () => import("layouts/MainLay..

quasar 로 프로젝트를 생성하고 터미널에서 quasar dev 입력 했더니 오류가 난다 그래서 npx quasar dev 입력하니 프로젝트가 실행된다 나는 quasar dev 만 입력해서 프로젝트를 실행하고 싶어서 찾아봤는데 아래처럼 하니 잘된다 PowerShell 을 관리자 권한으로 실행을 하고 나서 아래 명령어를 입력하면 된다 Set-ExecutionPolicy RemoteSigned Set-ExecutionPolicy Unrestricted

https://godffs.tistory.com/3806 vue 3 js - 게시판 만들기 6 - 공용(글로벌) js를 만들어서 사용해보자 https://godffs.tistory.com/3805 vue 3 js - quasar 게시판 방명록 만들기 5 - 컴포넌트로 데이터 바인딩 https://godffs.tistory.com/3800 vue 3 js - quasar 게시판 방명록 만들기 4 - get api 데이터 받기 htt.. godffs.tistory.com 이어서... Vue 라우터란? - vue router 는 공식 라이브러리 - 페이지를 이동할때 서버에 요청해서 불러오는 방법이 아닌 미리 해당 페이지를 받아 놓고 페이지 이동 - 화면 전환이 깔끔하다 this.$router == VueRou..

https://godffs.tistory.com/3805 vue 3 js - quasar 게시판 방명록 만들기 5 - 컴포넌트로 데이터 바인딩 https://godffs.tistory.com/3800 vue 3 js - quasar 게시판 방명록 만들기 4 - get api 데이터 받기 https://godffs.tistory.com/3795 vue 3 js - quasar 게시판 방명록 만들기 3 - 테이블 사용하기 https://godf.. godffs.tistory.com 이어서... 전역변수, 전역 함수로 만들어서 어느 페이지에서든지 사용 가능한 변수, 함수를 만드는 방법을 찾았다 vue3로 넘어오면서 이전과 많이 달라졌는데 자세한건 좀 더 봐야겠다 참고 : Plugins | Vue.js (vue..

https://godffs.tistory.com/3800 vue 3 js - quasar 게시판 방명록 만들기 4 - get api 데이터 받기 https://godffs.tistory.com/3795 vue 3 js - quasar 게시판 방명록 만들기 3 - 테이블 사용하기 https://godffs.tistory.com/3794 vue 3 js - quasar 로 게시판 방명록 만들기 2 https://godffs.tistory.com/3791.. godffs.tistory.com 이어서... 글 목록을 가져오는 페이지에 컴포넌트를 사용했다 src \ pages \ community \ GuestBook.vue 파일에 컴포넌트를 선언하고 바인딩하는 코드를 삭제했다 src \ components \ ..

vue axios get으로 api 호출 해서 결과값을 받을려고 하니깐 오류가 난다 quasar로 프로젝트를 만들어서 바로 쓸수있는줄 알았는데 설정이 필요한것 같다 잘못된거면 알려주시면 수정하겠습니다 CORS 오류가 발생할때 proxy를 설정한다 quasar.config.js devServer: { // https: true open: true, // opens browser window automatically proxy: { "/api": { target: "http://godffs.**********.com", //api 호출 도메인을 입력한다 changeOrigin: true, }, }, }, 호출하려는 페이지로 가서 api를 호출해본다 src \ pages \ comunity \ GuestBoo..

https://godffs.tistory.com/3795 vue 3 js - quasar 게시판 방명록 만들기 3 - 테이블 사용하기 https://godffs.tistory.com/3794 vue 3 js - quasar 로 게시판 방명록 만들기 2 https://godffs.tistory.com/3791 vue 3 js - quasar 로 게시판 방명록 만들기 1 https://godffs.tistory.com/3753 quasar vue3 설.. godffs.tistory.com 이어서 작업... api 호출하는데 CROS 오류, Access-Control-Allow-Origin 애러 나오면 https://godffs.tistory.com/3801 Vue axios error CROS Access-..

https://godffs.tistory.com/3794 vue 3 js - quasar 로 게시판 방명록 만들기 2 https://godffs.tistory.com/3791 vue 3 js - quasar 로 게시판 방명록 만들기 1 https://godffs.tistory.com/3753 quasar vue3 설치 퀘이사를 설치 하는 방법 4가지가 있다 (quasar v2.7.7) Quasar CLI로 설치를.. godffs.tistory.com 이어서 작업... 방명록 리스트 작업 결과화면 데이터를 바인딩해주는 리스트를 표현하려고 이것저것 사용해봤다. 데이터는 하드코딩으로 작업되어 있다

https://godffs.tistory.com/3791 vue 3 js - quasar 로 게시판 방명록 만들기 1 https://godffs.tistory.com/3753 quasar vue3 설치 퀘이사를 설치 하는 방법 4가지가 있다 (quasar v2.7.7) Quasar CLI로 설치를 했다 ( 참고 : https://quasar.dev/start/pick-quasar-flavour ) npm init quasar.. godffs.tistory.com 이어서 작업... 전체 레이아웃을 디자인부터 하려고 하는데 디자인을 할 줄 모른다 quasar 공식 사이트에 들어가면 레이아웃을 마우스 클릭으로 만들 수 있다 https://quasar.dev/layout/layout#introduction La..

https://godffs.tistory.com/3753 quasar vue3 설치 퀘이사를 설치 하는 방법 4가지가 있다 (quasar v2.7.7) Quasar CLI로 설치를 했다 ( 참고 : https://quasar.dev/start/pick-quasar-flavour ) npm init quasar 만들 폴더명을 물어본다 vue3 선택 나는 타입스.. godffs.tistory.com - 레이아웃 추가 - 페이지 추가 - router 설정 quasar 로 설치를 진행했으면 페이지를 추가한다 레이아웃을 추가했다 src \ layouts \ comunity \ LayoutGuestBook.vue 파일 추가 페이지를 추가했다 src \ pages \ comunity \ GuestBook.vue 파일..

https://godffs.tistory.com/3785 vue js 3 - props 자식 컴포넌트에 데이터 전달 prop : 부모가 자식에게 데이터를 넘길때 사용 자식이 부모에게 보낼때는 emit(event)를 이용한다 https://v3.ko.vuejs.org/guide/component-props.html#prop-%E1%84%90%E1%85%A1%E1%84%8B%E1%85%B5%E1%86%B8.. godffs.tistory.com prop 로 데이터를 넘겨서 컴포넌트로 메뉴를 만들었다 layouts \ myPage \ MyIndex.vue // 메뉴 컴포넌트 만들기 컴포넌트 파일 만들기 src \ components \ my \ TopMenuPropsItems.vue 파일 생성 TopMenuPr..

부모 페이지에서 자식에게 데이터 넘겨주는 소스에 추가했습니다 https://godffs.tistory.com/3785 vue js - props 자식 컴포넌트에 데이터 전달 prop : 부모가 자식에게 데이터를 넘길때 사용 자식이 부모에게 보낼때는 emit(event)를 이용한다 https://v3.ko.vuejs.org/guide/component-props.html#prop-%E1%84%90%E1%85%A1%E1%84%8B%E1%85%B5%E1%86%B8.. godffs.tistory.com 컴포넌트 파일 만들기 (component 파일명은 대문자로 시작합니다) src > components > my > TopMenuProps.vue 파일 생성 TopMenuDataBind.vue {{ data.tit..

prop : 부모가 자식에게 데이터를 넘길때 사용 자식이 부모에게 보낼때는 emit(event)를 이용한다 https://v3.ko.vuejs.org/guide/component-props.html#prop-%E1%84%90%E1%85%A1%E1%84%8B%E1%85%B5%E1%86%B8 Props | Vue.js Props 이 페이지는 여러분이 이미 컴포넌트 기초를 읽었다고 가정하고 쓴 내용입니다. 컴포넌트가 처음이라면 기초 문서를 먼저 읽으시기 바랍니다. Prop 타입 이제까지는 문자열 배열로 나열 된 p v3.ko.vuejs.org 컴포넌트 파일 만들기 (component 파일명은 대문자로 시작합니다) src > components > my > TopMenuProps.vue 파일 생성 TopMenu..

퀘이사를 설치 하는 방법 4가지가 있다 (quasar v2.7.7) Quasar CLI로 설치를 했다 ( 참고 : https://quasar.dev/start/pick-quasar-flavour ) npm init quasar 만들 폴더명을 물어본다 vue3 선택 나는 타입스크립트 선택함 여기서 Quasar App CLI with Webpack, Quasar App CLI with Vite 둘중 하나를 선택해야 하는데 Quasar App CLI with Webpack를 하게 되면 App만 사용할게 아니라서 Quasar App CLI with Vite 로 선택했다 패키치 이름을 물어본다 프로젝트 문서 이름을 물어본다 프로젝트 설명을 물어본다 프로젝트 작성자를 물어본다 api 설정을 하라고 하는데 난 추천하..