quantumcode

nvm (node version management) 1. homebrew 설치하기 : 아래 링크에서 참고 https://quantumcode.tistory.com/56 homebrew 설치 homebrew (홈브류) 소프트웨어 패키지 관리 시스템 : mac OS 운영 체제의 소프트웨어 설치를 단순하게 만들어준다. 설치 링크 : https://brew.sh/index_ko Homebrew The Missing Package Manager for macOS (or Linux). brew.sh 1. quantumcode.tistory.com 2. brew install nvm 3. nvm 을 설치했다면 환경 변수를 설정해야한다. 4. 환경변수를 설정하기위한 폴더 생성 mkdir ~/.nvm 5. vi ~/...

beforeRouteEnter 는 이전 router에서 정보를 가져와 현재 router와 유기적인 코드를 작성할때 사용하고 반면 beforeRouteLeave는 이전 router로 돌아갈때 사용합니다. 여기서 주의 사항은 beforeRouteEnter콜백 전달을 지원하는 유일한 가드 입니다 next. For beforeRouteUpdate및 beforeRouteLeave는 this이미 사용 가능하므로 콜백을 전달할 필요가 없으므로 지원되지 않습니다 . 사용 예 ) 일반적으로 사용자가 저장하지 않은 편집으로 경로를 실수로 떠나는 것을 방지하는 데 사용됩니다 . next(false) 을(를) 호출하여 탐색을 취소할 수 있습니다. beforeRouteLeave (to, from, next) { const an..

1. component 랜더링 완료 후 라우터 이동 시 params 값을 체크하여 데이터를 가져오는 방식으로 아래와 같이 watch를 사용하여 component가 랜더링 완료 후 가져오는 방식이 있습니다. 데이터 로드가 느리거나 로딩 이미지가 필요할 때 사용 created() { // 컴포넌트 생성시 데이터를 패치한다 this.fetchData() }, watch: { '$route': 'fetchData' }, methods: { fetchData () { this.loading = true db.collection('user').where('ep_id', '==', this.$route.params.employee_id).get() .then(querySnapshop => { querySnapshop..

vue.js 프레임워크를 사용시 SPA(single page application) 특성상 router를 사용하여 페이지 이동하게된다. 첫번째 방식 선언적 방식으로 태그형태로 기재하고 속성값에 해당 주소 및 router 이름을 입력하여 사용할 수 있다. 선언적 방식 두번째 방식 프로그래밍 방식으로 script 작성 시 각 라이프 사이클에서 특정 코드가 완료 된 후 페이지 이동이 필요하거나 params 와 같은 속성을 전달 받고 다시 특정 기능을 수행 후 다시 화면 전환이 필요 할 경우 사용할 수 있다. 이 밖에 다양한 경우가 있겠지만 추후 예시를 통해서 알 아보자. 프로그래밍 방식 $router.push router.push(location, onComplete?, onAbort?) 참고: Vue 인스턴..

created 해당 라이프 사이클에서 처리내용 : 테이터처리: data, 계산된속성: computed, 메서드: methods, 감시/이벤트watch 주의 : 마운트되지 않은 상태이기때문에 $el 을 지원하지 않는다. virtual dom 사용 할 수 없다. mounted 해당 라이프 사이클에서 처리내용 : $el이 vm.$el로 대체 인스턴스가 마운트 된 이후 호출 virtual dom, 컴포넌트, 템플릿, dom 접근가능

firebase config 파일을 별도 생성하여 적용 1. firebaseconfig.js 파일 생성 import firebase from 'firebase/app' import 'firebase/firestore' const firebaseConfig = { ... } const firebaseApp = firebase.initializeApp( firebaseConfig ) export default firebaseApp.firestore() 2. 사용을 원하는 component에 import import db from 'firebaseconfig.js'

아래와 같이 코드를 입력하면 v-for 추가하면 v-bind:key 입력 오류가 나타난다. {{i}}{{menu.name}} 아래 내용을 보면 문자열 이나 숫자 타입으로 추가하라는 경고가 나온다. 해결방벙 : 1. key 값에 for의 인덱스 값 입력 {{i}}{{menu.name}} 2. 메뉴별 이름을 특정하고 싶다면 key 값에 for의 인덱스 값 과 메뉴명의 조합으로 입력 {{i}}{{menu.name}}

/*import firebase from "firebase";*/ import firebase from "firebase/app"; import "firebase/firestore"; Vue.config.productionTip = false // Import the functions you need from the SDKs you need // TODO: Add SDKs for Firebase products that you want to use // https://firebase.google.com/docs/web/setup#available-libraries // Your web app's Firebase configuration const firebaseConfig = { apiKey: "AIza..

단일 인스턴스에서는 객체형 data 를 사용하지만 콤포넌트 단위에서 사용 시 인스턴스를 공유하여 data의 침범이 일어날 수 있기 때문에 콤포넌트 단위에서는 함수형으로 사용한다. //ES5 문법 data () { return { 데이터를 넣어주세요 } } //ES6 문법 data:() => ({ 데이터를 넣어주세요 })

vue CLI 이제 Vue CLI를 설치해 보자. 기본적으로 Vue CLI를 설치하기 위해서는 8.9 버전 이상의 Node.js가 필요하다. Node.js를 설치하였다면 Vue-CLI를 설치하자. vue cli 3.0 install npm i -g @vue/cli ( npm install -g @vue/cli ) vue version check vue --version vue update npm update -g @vue/cli Vue CLI를 설치 후 버전을 확인해 보면 3.x이 설치된 것을 확인할 수 있다. 그리고 하나 더 설치하자. vue cli 2 template npm i -g @vue/cli-init @vue/cli-init은 2.x Template을 가져오기 위한 vue init기능을 제공한..