firebase를 활용한 to-do list 웹페이지를 만들어 보았다.

웹페이지 경로

• https://simple-todolist.firebaseapp.com/

사용언어, 플랫폼

• HTML/CSS
• Javascript
• firebase¹
• 화면 UI : materialize ui framework

어려웠던 점

• 모든 유저에게 디폴트로 안내 to-do list를 표시하는 부분
  • 로그인시에 push() 메소드를 통해 안내 내용을 DB로 추가하여 표시
  • 매번 로그인시 안내 내용이 중복으로 추가되는 문제 발생 (해결필요)
• 화면을 새로고침 해도 to-do list의 체크박스의 상태가 초기화 되지 않도록 유지
  • DB에서 가져온 특정 체크박스를 자바스크립트, jQuery로 잡아내지 못하는 문제 발생
  • DB에서 화면에 체크박스를 뿌리는 부분에 코드를 넣어서 해결
  • 해당 코드에 대한 충분한 이해 필요
• 체크박스 체크시 해당 레이블 텍스트에 취소선 표시
  • CSS로 해결

개선하고 싶은 점

• 모바일 화면 적용
• 안내문구 중복 표시 수정

오늘 한 일

• 모니터를 찾아봤다. 벤큐 EW2750ZL 마음에 든다. VA 패널에 논글레어 27인치 모니터인데 내가 쓰는 책상이 너무 작아서 불편하지는 않을지 고민이다. LG전자 27MP47HQ 가 더 좋다는 말이 있지만 디자인이 별로라서 제외.

• Jekyll 테마에 사용되는 언어가 뭘까 찾아봤더니 Liquid 템플릿 시스템 이라고 한다. 앞으로 블로그를 변경하거나 할때 참고해야겠다. (지킬 블로그에 페이지네이션과 태그 등 추가 )

• 생활코딩 nodejs 강의를 처음부터 다시 듣기 시작했다. 두번째 듣는 내용이고 마크다운으로 정리하니 이해가 잘 가는 것 같다. 정리하면서 들으려니 보통배속도 빠르게 느껴진다. 평소 1.5배속으로 들어도 느리게 느껴지던 것과 차이가 나서 신기하다.

오늘 느낀 것

• 카페에서는 확실히 집중이 더 잘된다. 내일은 도서관에 가볼까.

• 강의 듣는 속도가 너무 느리다. 너무 꼼꼼하게 하려고 하지 말자.

• nodejs 강의와 윤지수님 강의를 병행해서 같이 들어야겠다. 코드스쿼드 블루코스에 들어가게 된다면 미리 강의 스타일에 익숙해질 필요도 있을 것 같다.

내일 할 일

• 윤지수님 강의 결제하고 듣기 시작
• nodejs 강의 듣기

데이터 수정과 삭제, deploy 배포

데이터 수정

.update()

• 데이터베이스 레퍼런스 객체의 [].update() 메소드](https://firebase.google.com/docs/database/web/save-data) 사용
• 정의된 경로에서 모든 데이터를 대체하지 않고 일부 키를 업데이트

if (selectedKey){
    //update 수정
    memoRef = database.ref('memos/'+userInfo.uid+'/'+selectedKey);
    memoRef.update({
        txt : txt,
        updateDate : new Date().getTime()
    });
}

데이터 삭제

.remove()

• 데이터를 삭제하는 가장 간단한 방법은 해당 데이터 위치의 참조에 대해 remove()를 호출하는 것
• 일반적인 DB는 실시간 변경, 삭제가 불가능하지만 fb는 리얼타임 베이스이기 때문에 가능하다.

deploy

firebase deploy

• firebase 호스팅 기능을 이용한 deploy 전세계 배포!
• CLI 명령어 : firebase deploy

데이터 출력, 저장과 메모 상세보기 기능

데이터 출력

DB 예시 (jason)

{
  "users": {
    "alovelace": {
      "name": "Ada Lovelace",
      "contacts": { "ghopper": true },
    },
    "ghopper": { ... },
    "eclarke": { ... }
  }
}

참고문서

• Firebase 실시간 데이터베이스
• Firebase 데이터베이스 구조화
• Firebase 웹에서 데이터 검색

데이터 저장

.push()

• 데이터베이스 레퍼런스 객체의 push 함수(메소드)를 사용
• A Reference represents a specific location in your Database and can be used for reading or writing data to that Database location.
• You can reference the root or child location in your Database by calling firebase.database().ref() or firebase.database().ref(“child/path”).
• 데이터 목록에 추가, push()를 호출할 때마다 Firebase에서 고유 식별자로도 사용할 수 있는 ***고유 키(예: user-posts//)*** 를 생성
• textarea에 글이 있는 경우만 save를 하는 로직 추가
• 함수 내에서 return이 들아가면 그 부분에서 함수는 종료

function save_data(){
  var memoRef = database.ref('memos/'+userInfo.uid);
  var txt = $(".textarea").val();
  if (txt === ''){
    return; // 함수를 종료시킨다
  }
  //push
  memoRef.push({
    txt : txt,
    creatData : new Date().getTime()
  })
}

데이터 검색 (상세보기 기능)

.ref().once()

• value 이벤트를 사용하여 이벤트 발생 시점에 특정 경로에 있던 내용의 정적 스냅샷을 읽을 수 있습니다.
• 변경을 수신 대기하지 않고 단순히 데이터의 스냅샷만 필요한 경우가 있습니다. 이후에 변경되지 않는 UI 요소를 초기화할 때가 그 예입니다. 이러한 경우 once() 메소드를 사용하면 시나리오가 단순해집니다. 이 메소드는 한 번 호출된 후 다시 호출되지 않습니다.

참고문서

• firebase reference
• 데이터 검색

사용자 인증

firebase 인증 서비스 사용

• Firebase App은 여러 Firebase 서비스를 사용할 수 있습니다. firebase 네임스페이스로 각 서비스에 액세스할 수 있습니다.
  • firebase.auth() - 인증
  • firebase.storage() - 저장소
  • firebase.database() - 실시간 데이터베이스

인증 제공업체 개체의 인스턴스¹ 생성

var provider = new firebase.auth.GoogleAuthProvider();

현재 로그인한 사용자 가져오기

• 현재 사용자를 가져올 때 권장하는 방법은 다음과 같이 Auth 개체에 관찰자를 설정하는 것입니다.

  firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
  } else {
    // No user is signed in.
  }
  });
  

로그인 팝업창 띄우기

firebase.auth().signInWithPopup(provider);

참고문서

• firebase 인증가이드
• JavaScript에서 Google 로그인으로 인증하기
• Firebase에서 사용자 관리하기