본문 바로가기

Firebase6

# 6.0 Deploy Firebase 강좌의 마지막, Deploy이다. Firebase console에서 hosting의 get started를 누르면 firebase CLI를 설치하라고 한다. 명령어를 복사해서 설치해주자. $ firebase login 로그인 명령어로 로그인해준다. 본인은 이미 firebase에 로그인돼있는 상태였다. $ firebase init 프로젝트를 초기화해보자. 선택사항들이 주루룩 뜰 것이다. 그 중 firebase hosting을 선택하고, 존재하는 프로젝트를 사용하기로 선택한다. 잠시 멈추고 다른 터미널을 열어 npm run build 명령어를 통해 빌드해준다. build라는 새 폴더가 생긴 것을 확인할 수 있다. 이전의 터미널로 돌아와 이 build 폴더를 빌드 디렉토리로 선택해주면 설정은 .. 2024. 1. 25.
#5.0 User Avatar 1) 사용자의 프로필 이미지를 편집하고 2) 프로필의 timeline, 즉 본인이 작성한 tweet의 목록을 볼 수 있는 기능을 구현한다. 대부분의 기능들은 이전의 내용을 잘 학습했다면 강의를 보지 않고도 구현할 수 있으므로 생략한다. 이 과정에서 새로 배우게 된 몇 가지 내용들만 소개하겠다. Optional chaining 다음과 같은 코드가 있다. { user?.displayname ? user.displayName : "Anonymous" } 여기서 사용된 user?.displayName의 ?.는 optional chaning이다. 속성이 존재하지 않을 시 undefined를 return하여 미리 에러를 방지하는 문법이다. 비교적 안전하게 사용할 수 있다는 장점이 있다. Firebase databa.. 2024. 1. 23.
#4 Tweeting 로그인을 성공했으니 이제는 트윗을 게시할 차례다. 우리는 아래 두 단계를 거쳐 이를 구현 할 것이다. DB에 트윗 저장 Storage에 첨부된 이미지 저장 DB에 트윗 저장하기 Firebase의 database는 none-sql database를 사용한다. 이는 collection과 document로 이루어진다. collection은 폴더, document는 파일과 비슷한 개념이라고 생각해도 좋다. 예를 들어, Twitter 프로젝트에서는 tweets/${tweet's ID}/replies/${tweet's ID}.... 처럼 사용할 수 있다. tweets와 replies는 collection, tweet's ID는 document 이다. 포스팅을 위한 form을 작성하면서 새로 배운 속성들이 있다. i.. 2024. 1. 19.
#3 Authentication firebase는 많은 제품들이 있기 때문에 초기에는 모든 제품들이 비활성화 되어있다. 사용하고자 하는 제품을 활성화 하기 위해서는 firebase console, 우리가 작성하는 코드 양쪽에서 활성화를 해줘야 한다. firebase console에서 project overview - auth - get started를 선택한다. 처음 저 화면에 들어가면 enable된 제품들이 없을 것이다. 일단 이메일, 비밀번호를 통한 로그인을 구현하기 위해 '이메일 및 비밀번호'를 선택하고 활성화하자. 이렇게 하면 firebase console의 활성화는 완료된 것이다. 이제 우리의 코드에 firebase를 활성화하자. src 디렉토리의 하위에 firebase.js를 생성한다. 그리고 firebase console의.. 2024. 1. 2.