프로그래밍/vue (8) 썸네일형 리스트형 [Vue.js] FirebaseError: Missing or insufficient permissions 개인적으로 Vue & Firebase를 사용해서 만들어보다가 어느정도 흐른뒤에 다시 수정좀 하려고 서버를 실행시켰더니 에러가 뜨더라구요! 그래서 구글링을 해본 결과 Firebase Console에 들어가서 설정을 변경을 해주어야한다고.... Firebase 콘솔에 Cloud Firestore 규칙탭에 들어갑니다. 그러면 위의 이미지와 같이 2022.7.14일까지 권한이 자동으로 잡혀있는것을 볼수있습니다. 해당부분 주석처리하고 true로 변경하여 게시하면 권한 에러없이 바로 정상 작동😆 [vue.js] 라우터 이동시 스크롤 위치 상단이동 Vue 프로젝트 작업때 스크롤을 내린 후에 라우터 이동을 하면 이전의 스크롤 위치 그대로 새로운 라우터에도 적용이 되어지게 됩니당 하지만 보통은 페이지 이동시에는 제일 상단으로 원위치 시켜줘야하죱 Vue에 이런한 작업을 해주는 내장함수가 있더라구요ㅎ_ㅎ!!! 하지만 history모드일때만 적용이 가능하다고합니다 속닥... - Vue의 history와 hash mode에 대해서는 아래글에 정리해두었어습니다! [vue.js] hash mode는 도대체 뭐지? Vue로 프로젝트 작업을 하다보면 hash mode라는 것을 접하게 됩니다. 여기서 단순하게 보면 hash mode : url에 #이 붙음 history mode : url에 #이 없음 하지만, 대부분의 사람들은 #이 너무나도 보기에 거슬리 lily-c.. [vue.js] 왜 Vue는 axios를 권장할까? 안녕하세요😊 Vue 프로젝트를 진행중에 갑자기 Vue는 왜 axios 사용을 권장하는지 의문이 생겨서 찾아보고 공유를 하려고 합니다! aixos란 "자바스크립트 어플리케이션에서 서버와의 통신을 위한 HTTP 비동기 통신 라이브러리" 즉, 프론트에서 백에드랑 서로 주고 받고 통신을 하려면 필요한 친구입니다ㅎㅎ! 그리고 axios 라이브러리는 Vue에서 뿐만이 아니라 다른 자바스크립트 어플리케이션에서도 사용이 가능합니다. 그리고 부제로 비동기랑 동기의 차이점은 동기는 서버의 작업이 끝날때까지 얌전히 기다리는 방식이며, 비동기는 서버의 작업이 끝나든말든 우선 다른 작업도 진행을 하는 방식입니다. 넵 다시 돌아와서, 많은 분들이 Vue에서는 axios를 많이 사용하고 계실텐데요! 보편적으로 많이들 알고계시는 a.. [vue.js] hash mode는 도대체 뭐지? Vue로 프로젝트 작업을 하다보면 hash mode라는 것을 접하게 됩니다. 여기서 단순하게 보면 hash mode : url에 #이 붙음 history mode : url에 #이 없음 하지만, 대부분의 사람들은 #이 너무나도 보기에 거슬리기 때문에 history mode를 적용시킵니다. 아니 그럼 그래서 hash mode는 도대체 무엇을 위해 있는 걸까... vue 창시자도 심심해서 만들지는 않았을거고, 다 이유가 있었을텐데... 하지만, hash mode가 생겨난 이유에 대해서는 깊게 설명된게 없고, 공식 문서에서 조차도 크게 언급하지 않고 있습니다. 그렇게 잘 설명되어져있는 외국사이트를 발견...!!! 정리를 해보자면, 프론트엔드 개발의 목적은 백엔드에 어떠한 요청 없이 스스로 view를 전환하고 .. [vue.js] vue & springboot 404 에러 참고문서 https://gilu-world.tistory.com/m/107 vue.js에서 history 모드를 사용하여 작업을 진행하게 될 경우 제일 먼저 맞이하게 되는 에러죠... 바로 history mode로 적용하고 원하는 페이지로 접근하기 위해 url을 직접 입력하거나 새로고침을 하게 되면 바로 위와 같은 404 에러 페이지를 보실 수 있게되죠... 왜...이러나 찾아본 결과! 원인은 vue는 싱글페이지어플리케이션! 이기 때문에 원하는 url을 직접 접근을 하고자하면 에러가 발생하게 되는데요. 즉 모든 주소가 index.html로 향하게 되는것이죠! 그러니까 실질적으로 서버에는 해당 페이지의 url이 할당되지 않게되는거고, 우리가 바라는 것은 해당 url로 이동이라기 보다는 해당 라우터로 이동을.. [vue.js] vue에 대한 지식들 안녕하세요✌️ vue를 접하게 되면서 알게된 vue에 관한 잡다한 지식들을 정리해보려고 합니다😌 이렇게라도 정리를 안해둔다면 점점 까먹고 제 머릿속은 비어있을게 분명하기 때문....... 그렇기 때문에 여기에 vue에 관한 잡다한 지식은 차곡차곡 정리해두려고 해요! ▷ Vue.js 란 : vue.js란 구글에서 일하던 직원 에반유의 의해 창시된 웹 페이지 화면을 개발하기 위한 프레임워크 (vue는 라이브러리이자 프레임워크라고 볼수있음) ▷ Vue.js의 특징 : 컴포넌트 기반 프레임워크 레고 블럭을 잘 조합해서 쌓고 조립하면 원하는 모형을 만들 수 있듯이 컴포넌트들을 모아서 화면을 만듦 ▷ Vue.js의 라이프사이클 1) beforeCreate : 인스턴스가 가장 처음 실행되고 제일 첫 라이프사이클 단계.. [vue.js] 다국어 로컬스토리지 저장 - i18n 안녕하세요👏 이번에는 다국어 설정에 이어서 로컬스토리지에 저장하는 코드로 변경해보도록 하겠습니당☺️ [vue.js] 다국어 적용하기 - i18n Vue.js에서 사용자의 선택에 따라 한국어 또는 영어 두가지의 다국어를 적용시키는 방법!🤔 (저는 vue3에서 진행했습니다!) 우선 다국어를 적용 시키기 위해 프로젝트에 vue-i18n (다국어 처리를 쉽 lily-choi.tistory.com 기존의 버튼으로 클릭시 변경되는거외에 선택 박스로 다국어 변경시에 로컬스토리지에 함께 저장되어 다른 페이지 이동 혹은 새로고침을 해도 기존 언어로 돌아가지 않게 합니다! // Test.vue 다국어 적용 테스트 {{ $t('titleCd') }} {{ $t('bananaCd') }} 한국어 영어 {{ lang }} 셀렉.. [vue.js] 다국어 적용하기 - i18n Vue.js에서 사용자의 선택에 따라 한국어 또는 영어 두가지의 다국어를 적용시키는 방법!🤔 (저는 vue3에서 진행했습니다!) 우선 다국어를 적용 시키기 위해 프로젝트에 vue-i18n (다국어 처리를 쉽게 도와주는 라이브러리)을 설치합니다. npm install vue-i18n 설치 후 저는 경로를 아래와 같이 잡았고, 언어는 각각의 json 파일로 분리 시켜 관리가 편하도록 하였습니다 src/ ... ├── i18n │ └── i18n.js ├── locales │ ├── ko.json │ └── en.json ├── store │ └── index.js ├── App.vue └── main.js 그리고 i18n에 대한 설정을 잡아주기 위해서 i18n.js 파일에는 아래와 같이 설정을 추가해주었습니.. 이전 1 다음
