본문 바로가기

npm vue11

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.
Vue/Firebase 이용해서 홈페이지 만들기 (7) - Firebase 관리자 권한 넣기 오늘의 목표 Firebase 내 functions를 사용자만 쓸 수 있도록 설정해보자. #1. 관리자 설정하기 #1. 관리자 설정하기 - functions 환경 설정를 위한 참고문서 : Firebase > docs > Cloud Functions > Write functions > Environment configuration - config 설정해주기 : $ firebase functions:config:set 블라블라(이메일, db_url설정 해줌) - 제대로 설정 되었는지 확인 : $ firebase functions:config:get - 실 사용은 functions.config().admin 의 키를 이용해서 사용한다. 아래는 dbURL과 사용자 저장시 level 설정해줄 때 관리자 이메일인지 .. 2020. 10. 25.
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.