Server/Firebase (8) 썸네일형 리스트형 <파이어베이스> 배포 및 보안 1. 배포 * 준비 - cra를 깃허브를 통해 배포하기위해 패키지를 하나 설치해야한다. 아래의 명령어로 설치하자. npm i gh-pages - 설치가 완료되면 package.json 파일을 수정해야한다. 먼저 패키지를 설치했을 때 안내문구가 떴을 것이다. 이를 따라 "homepage" 를 추가해주자. "homepage": "https://haesoo9410.github.io/testtest" - 위 처럼 작성한다. 가장 끝에는 연결된 레포지토리를 작성한다. 연결된 레포지토리 확인은 git remote -v 를 입력하여 확인할 수 있다. 만일 연결된 레포지토리가 없다면 remote명령어로 연결시켜야한다. * 배포 - 배포를 위한 스크립트를 작성하자. 아래의 두 명령어를 package.json의 스크립트에.. <파이어베이스> 프로필 수정 1. 프로필 수정 * 프로필 가져오기 - 사용자의 닉네임 또는 사용자명을 보여주고 싶다고 가정하자. - 우리는 현재 user객체를 userObj라는 객체로 사용하고 있다. (firebase.auth().currentUser) - 이 객체에는 여러가지 프로필 정보와 관련된 속성이 있다. 대표적으로 displayName과 email, photoURL이 있다. 필자는 구글로 로그인 했기 때문에 구글에서 사용하는 사용자명이 그대로 displayName에 담겨 있었다. {userObj.displayName}의 프로필 - 위와 같이 유저 객체를 이용하여 displayName 을 불러왔다. 하지만 userObj가 없다거나 displayName이 없을 경우 오류가 날 수 있으므로 아래와 같이 수정하였다. {userOb.. <파이어베이스> 필터와 정렬 1. 필터 - 우리는 프로필페이지를 별도로 만들어서 로그아웃 기능을 버튼과함께 넣었었다. 이번엔 프로필 페이지에서 로그인한 사용자의 글만 보이도록 필터링해보자. * 쿼리 - 파이어베이스의 Cloud Firestore은 컬렉션이나 그룹에서 검색할 문서를 지정하는 쿼리 기능을 제공한다. // Create a reference to the cities collection var citiesRef = db.collection("cities"); // Create a query against the collection. var query = citiesRef.where("state", "==", "CA"); - 위는 파이어베이스 공식문서에 나온 예시이다. 위 코드는 db에서 cities 컬렉션으로 Ref를 만들고.. <파이어베이스> 파일 업로드 1. 초기 셋팅 * 콘솔 - 파이어베이스 콘솔에서 storage를 시작하자. - 아래와 같이 파일을 저장하는 버킷이 생성되면 끝이다. * 코드 - 셋팅을 위해 만들어 둔 fbase.js 파일에 storage를 추가한다. // fbase.js // ... import "firebase/storage" const firebaseConfig = { // ... }; firebase.initializeApp(firebaseConfig); // ... export const storageService = firebase.storage(); - firebase.storage() 를 storageService라는 변수로 export 해주었다. 2. 첨부 * 파일 첨부 - 위처럼 파일선택을 하고, 파일명을 띄우고, 미.. <파이어베이스> 게시글 CRUD 1. 초기 세팅 * 파이어베이스 - 이번 장에서는 파이어베이스를 이용해서 realtime database를 만들어 볼 것이다. - 실시간으로 글이 만들어지고 지워지는 환경을 구축하는데 있어 파이어베이스는 아주 좋은 도구이다. - 데이터베이스를 만들어 보자. - 데이터베이스 만들기를 클릭하고, 테스트모드를 클릭하여 다음으로 넘어간다. 파이어스토어 위치는 가까울수록 좋기때문에 asia-northeast 중에서 선택한다. - 데이터베이스가 만들어지면 위와같이 표시된다. 직접 컬렉션을 만들 수도 있지만 우리는 코드를 통해 만들고 접근할 것이다. - 참고로 위 DB의 구조는 컬렉션 > 다큐먼트 > 데이터 순으로 이루어진다. 컬렉션은 다큐먼트의 집합이며 하나의 폴더라고 생각하면 좋다. 다큐먼트는 데이터 하나를 갖고.. <파이어베이스> 로그인과 로그아웃 1. 들어가기 전에 * 프로젝트 구조 - 앞선 장에 이어 프로젝트 디렉토리 구조는 다음과 같이 설정해두었다. - 컴포넌트 기능을 할 파일들과 routes 페이지 파일을 분리하였다. - baseURL을 수정하여 import문에 기본적으로 src가 들어갈 수 있도록 설정하기 위해 jsconfig.json을 만들었다. // jsconfig.json { "compilerOptions": { "baseUrl": "src" }, "include": ["src"] } - 라우터 파일은 다음과 같다. // components/Router.js import React from 'react'; import { HashRouter as Router, Route, Switch, Redirect } from 'react-rou.. <파이어베이스> 파이어베이스와 리액트 준비 1. 파이어 베이스 준비 * 가입 - 파이어베이스는 현재 구글의 서비스이므로 구글에 로그인하여 파이어 베이스에 접근할 수 있다. - 시작하기 버튼을 눌러서 프로젝트에 접근하자. * 프로젝트 만들기 - 프로젝트 만들기를 클릭하여 첫 프로젝트를 만들 수 있다. - 프로젝트 이름을 적고, 다음으로 넘어가도록 하자. 약관에 동의하고 계속하면 프로젝트가 생성된다. - 프로젝트가 생성되면 앱에 파이어베이스를 추가할 수 있게 된다. 필자는 리액트 웹앱에 추가할 것이므로 웹을 클릭한다. - 그러면 앱 등록이 뜨게되며 Firebase SDK를 추가할 수 있는 창이 뜬다. 이 때 예시로 CDN방식을 사용하고 있지만 우리는 아래에서 npm 방식으로 SDK를 추가할 것이다. 2. 리액트 준비 * CRA - SDK를 추가하기 .. <파이어베이스> 파이어베이스 소개 1. 소개 * Firebase - 파이어베이스(Firebase)는 2011년 파이어베이스(Firebase, Inc)사가 개발하고 2014년 구글에 인수된 모바일 및 웹 애플리케이션 개발 플랫폼이다.(위키백과) - 파이어베이스는 초기 스타트업 당시에 채팅기능의 API를 제공하는 서비스였다. 그러나 개발자들 사이에서 이 서비스를 데이터를 전달하는데 사용하였는데, 여기서 파이어베이스의 발전이 시작됐다. - 결국 파이어 베이스는 리얼타임 데이터베이스나 다름 없었고, 구글에 인수되면서 통합 앱 플랫폼으로 확장되었다. - 현재 파이어베이스는 웹과 모바일 개발에 필요한 다양한 기능을 제공하는 대표적인 BaaS(Backend as a Service)로 자리 잡았다. 이를 통해 서버는 구글이 설계 및 구현해주므로 프론트.. 이전 1 다음
