#0. 프로젝트 개요

Firebase와 연동하여 로그인화면 구현

마찬가지로 Firebase에서 유저정보를 가져와 Post로 띄워준다

React와 Firebase를 가지고 간단한 링크드인 클론을 구현하였다. React만을 가지고서는 UI만 흉내낼 수 있기 때문에, 유저정보를 저장하는 부분 그리고 작성한 포스트를 저장하고 불러오는 기능을 구현하기 위해 Firebase를 연동하였다.

 

서비스의 전반적인 작동 Flow는 다음과 같다.

 

1. 처음 사이트를 들어오면 로그인 페이지가 뜬다.

1) 계정이 없으면 회원정보를 입력하고 Register Now를 클릭한다.

2) 계정이 있다면 이메일과 비밀번호만 입력하고 Sign In을 눌러 로그인을 한다.

 

2. 로그인이 된 경우에만 정보들을 표시해준다.

1) 왼쪽 사이드바에는 로그인한 정보(이름, 이메일, 프로필사진)이 뜬다.

2) 가운데에는 포스트를 입력할 수 있는 공간과 작성되었던 포스트들이 최신순으로 뜬다.

3) 오른쪽 위젯에는 각종 뉴스들을 띄운다.

 

3. 로그아웃을 원한다면, 오른쪽 상단 위에 'me' 버튼을 누르면 로그아웃이 된다.

 

사용된 프레임워크와 기술들은 다음과 같다.

React, Redux, Firebase

 

해당 프로젝트를 위해 다음 영상을 참고하였다.

https://www.youtube.com/watch?v=QaYts9sPmcY