본문 바로가기

Vue firebase 게시판4

Vue/Firebase 이용해서 홈페이지 만들기 (11) axios 이용해서 storage에 파일 업/다운로드 하기 오늘의 목표 axios 이용해서 storage에 파일을 업/다운로드 하는 법을 알아보자. #1. axios 설치 및 테스트코드 작성 #2. CORS 정책을 위한 google cloud sdk 설치 및 설정 #1. axios 설치 및 테스트코드 작성 - axios 사용법 . 설치 : yarn add axios . 사용 : import axios from 'axios' - write와 read 버튼 만들어서 제대로 동작하는지 테스트 read write #2. CORS 정책을 위한 google cloud sdk 설치 및 설정 - CORS오류 발생할 것임 : localhost와 실제 도메인이 달라서 오류가 남. . 해결법 : CORS 설정해줘야 함 (google cloud SDK 설치돼야 함 : https://.. 2020. 10. 26.
Vue/Firebase 이용해서 홈페이지 만들기 (10) 게시글 페이징 처리하기 (total count 관리, watch) 오늘의 목표 게시판의 페이징 처리가 되도록 게시글의 total count를 관리하고 페이징 개수별로 처리되도록 해보자. #1. total count 관리를 위한 functions 만들기 (increment / decrement) #2. 페이징 처리를 위한 v-data-table 옵션 셋팅 #3. head, last 이용해서 첫번째, 마지막 게시물 정보 가져오기 #4. startAfter, endBefore 이용해서 전/후 페이지 이동하기 #1. total count 관리를 위한 functions 만들기 (increment / decrement) - 페이징 처리를 하기 위해선 게시글의 총 개수 (total count)가 별도로 관리돼야 한다. 이를 위해 게시글이 생성되거나 삭제될 때 총 개수를 제어하는 f.. 2020. 10. 25.
Vue/Firebase 이용해서 홈페이지 만들기 (9) - Firebase 게시판 실시간 조회로 변경하기 오늘의 목표 게시판을 실시간으로 조회하도록 변경하자. (정적 -> 동적) #1. 기존의 read는 사용하지 않으므로 삭제 #2. subscribe (onSnapshot 구독) / unsubscribe (구독해지) #1. 기존의 read는 사용하지 않으므로 삭제 - 기존의 read는 버튼을 눌러야만 데이터를 가져와서 뿌려주는 방식으로 실시간으로 알아서 읽히도록 (다음에서 좋아요/싫어요 실시간으로 바뀌는 것처럼) read 메소드는 과감히 삭제하자 #2. subscribe (onSnapshot 구독) / unsubscribe (구독해지) - subscribe : 화면이 렌더링되기 전 (created 메소드) firestore의 게시판을 구독하자. (onSnapshot) created () { this.subs.. 2020. 10. 25.
Vue/Firebase 이용해서 홈페이지 만들기 (8) - Firebase 게시판 만들기 (CRUD) 오늘의 목표 Firebase firestore에 게시판 내용을 저장(Create)/조회(Read)/수정(Update)/삭제(Delete) 해보자. #1. Board 페이지 라우터 설정하기 (메뉴에서 눌렀을 때 이동할 수 있도록) #2. 글쓰기를 위한 다이얼로그 띄우기 #3. 버튼 클릭시 Firestore에 동작하도록 구현하기 #4. ㅁㅁㅁ #1. Board 페이지 라우터 설정하기 (메뉴에서 눌렀을 때 이동할 수 있도록) - router/index.js 에 board 경로를 추가하자 - 메뉴에 추가된것 확인 #2. 글쓰기를 위한 다이얼로그 띄우기 - 먼저 저장기능을 해보도록 글쓰기를 누르면 다이얼로그가 뜨고 title과 content를 입력 후 저장누르면 firestore에 저장되도록 구현해보자. boar.. 2020. 10. 25.