본문 바로가기

Vue.js

(4)
Vue 에서 바로 firestore 연결하기 firebase 설치 npm install -save firebase firebase init firebase에서 cloudstore 프로젝트 생성해서 App 등록해서 config 정보 가져와서 별도 파일 만들고 불러옴 main.js 에 아래처럼 써주기 (나중에는 firebase 내용 별도 분리) import Vue from 'vue' import App from './App.vue' import router from './router' import firebase from 'firebase/app' import 'firebase/firestore' //firebase config 내용은 별도 파일로 분리 import firebaseConfig from '../firebaseConfig' Vue.conf..
Typescript Serverless Project 서버리스 프레임웍 활용 sls create --template aws-nodejs-typescript 타입스크립트용 설치 npm install --save-dev serverless-offline @types/node ts-loader typescript webpack-node-externals serverless-plugin-typescript GraphQL 개발을 위해 아폴러 서버 설치 npm install --save apollo-server-lambda graphql type-graphql npm install --save subscriptions-transport-ws utf-8-validate bufferutil reflect-metadata
Async & Network Throttling 서버 API 호출 부분 axios 및 async & await 활용 search () { axios.get('API 호출') .then(res => { console.log(res.data) } } //위 내용을 아래처럼 변경 가능 async search () { const res = await axios.get('API 호출') console.log(res.data) } 크롬 브라우저에서 강제로 네트워크 느리게 조정 하는 방법 개발자 도구>Network>아래 Throttling 조절
Vue Project 생성 Vue Cli 설치 후 프로젝트 생성 -> default 설치 npm install -g @vue/cli vue --version vue create movie-app // 설치 완료 후 cd movie-app //dev 모드가 serve npm run serve http://localhost:8080/ 접속 완성~ Vue GUI 사용 시 아래 명령어 입력 후 http://localhost:8080/ 에서 열림 vue ui vuetify 및 vuex 설치 작업목록에서 serve선택 후 실행~ public>index.html에 icon 링크 변경 링크 변경하고 아래와 같이 v-icon 사용하면 Google Icon 쓸 수 있음 search 추가로 manifest.json 에러발생 시 Generate 해주는..