포트폴리오 만들기/Vue, firebase 게시판 만들기 (15) 썸네일형 리스트형 vuetify 활용하기1(appbar, footer, navigation drwer 만들기) -app bar 앱바 만들기 vuetifyjs.com/ko/components/app-bars App-bar component — Vuetify.js The app bar component is a supercharged toolbar with advanced scrolling techniques and application layout support. vuetifyjs.com -footer 만들기 https://vuetifyjs.com/ko/components/footer/ Footer component — Vuetify.js The footer component provides a container for displaying additional navigation information about a .. router 배워보기 -처음 시작하는 페이지는 main.js 이다. 처음 import 할 자원들을 여기에서 입력해줘야한다. 라우팅 하기 -app.vue 에 xxx로 가는 링크를 만든다. -xxx.vue 페이지를 만든다. (주소창에 http://localhost:8080/xxx 를 입력해도 페이지가 나타나지 않는다. 라우팅을 하지 않았기 때문에) -/router/index.js 페이지 수정하기 -정상적으로 페이지가 뜬다. git 사용하기 -.gitignore : 여기에 쓰여진 파일은 git에 변경사항 올리거나 하지않고 무시한다. vscode 로 깃커밋 git commit 하기 git repository 생성하기 -위에서 git commit 을 했으니 커밋은 생략하고 C:\ionic\TestPp\test> git remote add origin https://github.com/developerkjm/test.git C:\ionic\TestPp\test> git push -u origin master Enumerating objects: 59, done. Counting objects: 100% (59/59), done. Delta compression using up to 8 threads Compressing objects: 100% .. 파이어베이스 호스팅하기(Firebase Hosting) C:\ionic\TestPp\test> npm install -g firebase-tools C:\ionic\TestPp\test> firebase deploy === Deploying to 'test-51087'... i deploying database, storage, firestore, functions, hosting i database: checking rules syntax... + database: rules syntax for database test-51087 is valid i firebase.storage: checking storage.rules for compilation errors... + firebase.storage: rules file storage.rules compi.. 파이어베이스 클라우드스토리지 시작하기(Firebase Cloud Storage) https://firebase.google.com/docs/storage?hl=ko Cloud Storage | Firebase Cloud Storage는 사진, 동영상 등의 사용자 제작 콘텐츠를 저장하고 제공해야 하는 앱 개발자를 위해 만들어졌습니다. firebase.google.com Cloud Storage는 사진, 동영상 등의 사용자 제작 콘텐츠를 저장하고 제공해야 하는 앱 개발자를 위해 만들어졌습니다. firebase 실시간 데이터베이스 firebase 공식문서 https://firebase.google.com/pricing?authuser=0 Firebase Pricing 무료로 Firebase를 시작하고 전 세계 수백만 명의 사용자로 확장하며 사용한 만큼만 비용을 지불합니다. firebase.google.com 1. firebase 프로젝트 만들기 2. 실시간 데이터베이스 사용하기 -실시간 데이터베이스 : 용량이 적다. 뭉텅이로 데이터 취급함. 세팅에 유리. -firestore : 게시판에 적합함. 페이징, 소트 등등. -예전에는 백엔드(신뢰할 수 있는 서버)에 가서 디비에가서 데이터 가져왔었지만, 프론트엔드에서 사용하는 만큼 정해진 룰들이 있다. -read, write를 false 로 잠궈서 인증된 것만 쓰도록 해야 한다. 왜냐면 .. 1. 개발환경구축 & 에디터 설정 개발환경구축 -nodejs ver.10 설치(안정화버전) -npm i -g yarn (-g : 전역설치) -> yarn 을 설치한다. -git 설치 (전부 동의하면 됨) -vscode 설치 :전부동의하면 됨. -vue cli 설치 : npm install -g @vue/cli -vuetify 설치 & 설정 : 아래쪽에 그림과 함께 설명을 해 놓았다. -설치되었는지 확인할 때 : node -v npm -v git --version vue --version vue 골격만들기 -폴더생성후 이동하여 프로젝트를 만들어준다. PS C:\> cd .\ionic PS C:\ionic> mkdir TestPp PS C:\ionic> cd .\TestPp PS C:\ionic\TestPp> vue create test -.. 이전 1 2 다음
