19.01.30 수요일

D+18

오늘은 각잡고 firebase공부했다.

영상 보고 따라했는데 중간에 막힘 ㅠㅠ 짜증나ㅠㅠㅠㅠㅠㅠㅜㅠㅜㅠㅜ

언제 쯤 완벽하게 이해할 수 있을런지

그래서 막히기 전까지 공부한 부분 정리했다.

정리 다 하고 보니 내용이 얼마 안 된다,,, 막혀서 어버버만 몇 시간 동안 했나보다

<firebase공부>

* firebase를 사용하지 않을 경우의 구조 : 기획/설계 - 서버 구성 및 서버 개발 - 프론트 엔드 개발 - 테스트 디버그 및 릴리즈

* firebase를 도입한 후 : 기획/설계 - firebase - 프론트 엔드 개발 - 테스트 디버그 및 릴리즈

> firebase를 통해 백엔드 개발의 부담을 줄이고 시간도 줄일 수 있다.

1. firebase사용

<firebase 홈페이지 화면>

프로젝트 명과 국가 설정 후 프로젝트를 생성할 수 있다.

Authentication은 사용자 인증을 설정하는 메뉴이다. Authentication의 사용자 메뉴에서는 내가 만든 홈페이지에서 어떤 계정이 로그인을 할 수 있도록 승인이 되었는지 저장이 되는 곳이다. 로그인 방법 메뉴에서는 로그인 제공 업체를 선택할 수 있는데, 어떤 홈페이지(google, facebook twitter 등)로 인증해서 로그인 할 것인지를 선택할 수 있다. 여기서는 구글만 사용하도록 설정하였다. 그 아래에 있는 승인된 도메인 파트는 OAuth기능을 사용할 때 리다이렉션 되는 주소를 저장한다. 이는 승인된 도메인만 지정이 가능하다. 그 다음 템플릿 메뉴에서는 이메일과 비번을 이요해서 인증을 하는 사용자들에게 인증이 가능한 이메일을 저장할 수 있도록 하는 곳이다. 이메일 주소를 user가 기입하면 그 이메일이 유효한 이메일인지 인증메일을 보내는 템플릿을 저장할 수 있다.

firebase의 Database는 실시간 클라우드 호스팅 DB이다. 모두 json형태로 저장되며, 연결되어 있는 모든 클라우드에 실시간으로 동기화가 된다. 데이터 메뉴에서는 DB에 데이터를 저장함으로서 실시간으로 동기화를 시킨다. 규칙 메뉴에서는 해당 DB의 읽기/쓰기의 권한 규칙과 데이터 구조를 알 수 있다. 사용량 메뉴에서는 실시간 DB로 전송된 용량을 알려주며, 백업 메뉴에는 하루에 한 번 자동으로 백업해주는 기능이 있다.

2. 개발환경 구성

node.js + firebase CLI를 사용하는데, 이는 컴퓨터와 firebase를 연결하고 프로젝트에 대한 엑세스를 허용한다. 또한 npm에서 firebase모듈을 설치해야 하며 firebase login을 통해 컴퓨터와 firebase를 연결하고 프로젝트에 대한 엑세스를 허용한다. 그 후 firebase init을 통해서 firebase를 초기화 해주는데, 이 과정에서 database와 hosting을 선택하여 필요한 파일과 폴더를 생성하여 준다. 이 파일들 중에서 database.rule.json파일은 firebase의 기본 DB정책이 들어있고, firebas.json는 firebase환경설정 파일이다.

이를 다 마친상태에서 firebase sever를 통해 서버를 켜면 포트 번호 5000으로 localhost에 들어갈 수 있다.

3. 구현(메모 앱 구현하기)

* 구현할 기능 *

1) 인증 기능을 이용한 구글창 호출

2) 인증에 성공했을 경우에는 메모 리스트를 출력, 실패했을 경우에는구글창을 다시 호출

3) 메모 저장 기능

4) 메모 수정/삭제 기능

이 코드를 public폴더 안의 index.html파일에 붙여넣는다. 이 코드 아래에 아래 코드를 작성하여 주는데, 이는 팝업창을 통해서 구글로 로그인을 할 것인지의 여부를 물어본다.

1 2 3 4

var auth; auth = firebase.auth(); var authProvider = new firebase.auth.GoogleAuthProvider(); auth.signInWithPopup(authProvider);

auth는 firebase에서 인증 객체를 담아둘 변수를 말하며 구글 계정으로 액세스할 것이기 때문에 GoogleProvider()로 써주었다. Twitter일 경우에는 TwitterAuthProvider()이 되고, facebook일 경우에는 FacebookAuthProvider()이 된다.

<팝업창>