본문 바로가기

Projects/React + Firebase 링크드인 클론

 (11)
#2. 헤더 부분 구현 | Header, HeaderOption 헤더 부분은 로그인 여부와 상관없이 계속 보여지는 부분이다. 이 부분을 구현하기 위해 Header, HeaderOption으로 컴포넌트를 구성하였다. 우선 Header.js의 코드를 작성하였다. import React from 'react'; import "./Header.css"; import SearchIcon from '@material-ui/icons/Search'; import HeaderOption from './HeaderOption'; import HomeIcon from '@material-ui/icons/Home'; import SupervisorAccountIcon from '@material-ui/icons/SupervisorAccount'; import BusinessCenterI..
#1. 사용된 컴포넌트들 정리 프로젝트 구성을 위해 상당히 많은 양의 컴포넌트들이 사용되었다. 그래서 각 컴포넌트가 화면에서 어느 부분에 적용되었는지를 정리해보았다. Header, HeaderOption, Login, Sidebar, Feed, InputOption, Post, Widgets 순으로 완성을 하였다. 우선 App.js에 이러한 컴포넌트들을 import하여, 코드를 작성하였다. import React, { useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import './App.css'; import { login, logout, selectUser } from './features/userSlice'; import Feed..
#0. 프로젝트 개요 React와 Firebase를 가지고 간단한 링크드인 클론을 구현하였다. React만을 가지고서는 UI만 흉내낼 수 있기 때문에, 유저정보를 저장하는 부분 그리고 작성한 포스트를 저장하고 불러오는 기능을 구현하기 위해 Firebase를 연동하였다. 서비스의 전반적인 작동 Flow는 다음과 같다. 1. 처음 사이트를 들어오면 로그인 페이지가 뜬다. 1) 계정이 없으면 회원정보를 입력하고 Register Now를 클릭한다. 2) 계정이 있다면 이메일과 비밀번호만 입력하고 Sign In을 눌러 로그인을 한다. 2. 로그인이 된 경우에만 정보들을 표시해준다. 1) 왼쪽 사이드바에는 로그인한 정보(이름, 이메일, 프로필사진)이 뜬다. 2) 가운데에는 포스트를 입력할 수 있는 공간과 작성되었던 포스트들이 최신순으로..

티스토리툴바