vue firebase 홈페이지6 Vue/Firebase 이용해서 홈페이지 만들기 (6) - Firebase Realtime Database Read and Write 오늘의 목표 Firebase Realtime Database에 데이터를 쓰고 읽는 방법을 알아보자. (Read는 on과 once 두 가지 방식이 있다.) #1. firebase 전역에서 쓸 수 있도록 설정하기 #2. Read and Write #1. firebase 전역에서 쓸 수 있도록 설정하기 - firebase.js 파일 생성 후 main.js에 import - firebase를 전역에서 사용하기 위해 firebase.js에 아래의 코드 생성 - config 파일은 firebase 프로젝트에 웹앱 추가하면 관련 snippet을 얻을 수 있다. 이후 프로젝트 최상단에 firebaseConfig.js 파일을 만들고 아래와 같이 설정해주자. (아래 * 표시는 각자 만든 firebase project의 웹.. 2020. 10. 21. Vue/Firebase 이용해서 홈페이지 만들기 (5) - Firebase 프로젝트 생성 및 연결하기 오늘의 목표 Firebase 프로젝트를 생성하고 내가 작업하고 있는 vue 프로젝트와 연결해보자. #1. firebase 프로젝트 중 web 어플리케이션 생성 #2. vscode에서 firebase-tools 설치 #3. firebase login #4. firebase init #1. firebase 프로젝트 중 web 어플리케이션 생성 - 기존에 앱을 만들때 만든 프로젝트에 android, ios만 연결해주었고 이제 web을 추가로 생성해보자. #2. vscode에서 firebase-tools 설치 - vscode를 열고 아래의 명령어를 실행해서 firebase-tools를 설치하자. sudo npm install -g firebase-tools (mac 기준이고 windows 사용자라면 앞에 sud.. 2020. 10. 20. Vue/Firebase 이용해서 홈페이지 만들기 (4) - Component 만들기 오늘의 목표 앞서 복잡한 App.vue 파일의 코드들을 여러개의 Component로 나누고 보다 가독성이 좋은 코드로 변경해보자. #1. Component용 vue 파일 생성하기 #2. Component를 가져다 사용하기 (import, components에 추가, 해당 component 사용하기) #1. Component용 vue 파일 생성하기 - 아래의 기존 소스에서 title 부분을 별도의 vue 파일을 생성하고 옮겨보자. - components 폴더에 title.vue 파일 생성 후 위 코드를 옮기자. 여기서 주의해야 할 것은, 하나의 component는 하나의 태그로 구성돼야 하고, 반드시 template으로 감싸줘야 한다. #2. Component를 가져다 사용하기 (import, compon.. 2020. 10. 13. Vue/Firebase 이용해서 홈페이지 만들기 (3) - Navigation drawers 만들기 오늘의 목표 Navigation drawers에 대해 알아보고 내 홈페이지에 추가해보자. #1. Navigation drawers란? - 앱에서 좌측 상단에 나오는 버튼을 이용하여 홈페이지의 곳곳을 이동할 수 있게 도와주는 역할을 한다. - 아래의 사이트로 접속하여 Navigation drawers에 대한 예제코드를 살펴보면 도움이 될 것이다. Navigation drawer component The navigation drawer component contains internal navigation links for an application and can be permanently on-scre... vuetifyjs.com - 위 사이트에 나온 예제의 소스를 참고하여 작성한 것이니 직접 타이핑하거나.. 2020. 10. 13. Vue/Firebase 이용해서 홈페이지 만들기 (2) - Vuetify 추가, app bar/footer 만들기 오늘의 목표 Vuetify css framework 추가한 후 기본적인 홈페이지 틀에 대해 익혀보자. #1. Vuetify 추가하기 #2. app bar, footer 셋팅하기 #1. Vuetify 추가하기 - 프로젝트가 있는 폴더에서 터미널을 열어 vue add vuetify 명령어를 실행시키자. 옵션은 아래와 같이 선택하였다. - 다시 서버를 띄우고 (npm run serve) 로컬서버에 접속해보았다. - 이제 Vuetify에서 미리 구현된 버튼, 앱바, 툴바, 네비게이션 등의 여러 기능을 가져다 쓸 수 있게 되었다. #2. app bar, footer 셋팅하기 - app bar 추가하기 : vuetify에서 v-app-bar-nav-icon은 좌측 상단의 네비게이션을 위한 아이콘이다. 아래와 같이 .. 2020. 10. 13. Vue/Firebase 이용해서 홈페이지 만들기 (1) - 개발환경셋팅, Vue프로젝트 생성 오늘의 목표 Vue 사용을 위한 개발환경 셋팅 후 첫 Vue 프로젝트를 만들어 서버를 띄우고 접속해보자. #1. 개발환경 셋팅 (npm, vue cli, vscode) #2. vue 프로젝트 생성 #1. 개발환경 셋팅 (npm, vue cli, vscode) - npm 설치 (google 에서 node.js 검색 후 나오는 홈페이지에서 설치파일을 받아 설치하자.) - vue cli 설치 : npm install -g @vue/cli - vscode : google에서 vscode 검색 후 나오는 홈페이지에서 다운로드 받고 설치하자 (실제 개발에 필요한 에디터) * 유용하게 쓰이는 extension : vuetify(vue 라이브러리), ESLint(자동 문법체크), vetur(소스에 색상 표시) #2. .. 2020. 10. 7. 이전 1 다음
