본문 바로가기

Projects/React + Firebase 링크드인 클론

(11)
#10. 프로젝트를 끝내며 https://github.com/chanmin-kim/react-firebase-linkedin chanmin-kim/react-firebase-linkedin react-firebase linkedin clone . Contribute to chanmin-kim/react-firebase-linkedin development by creating an account on GitHub. github.com 최종코드는 여기서 확인할 수 있다. 백엔드를 따로 구성하지 않고, firebase로 백엔드를 구성한 뒤, 프론트엔드는 React오 링크드인 클론앱을 만들어 보았다. React를 사용하면서 느낀 것은, 단순히 UI적인 측면에서의 가독성을 넘어, 백엔드(Firebase)에서 보내준 정보를 state에 담..
#9. 작성한 모든 컴포넌트를 합쳐주기 | App.js 마지막으로 그동한 작성한 모든 컴포넌트들을 App.js에 합쳐준다. function App() { const user = useSelector(selectUser); const dispatch = useDispatch(); useEffect(()=>{ auth.onAuthStateChanged((userAuth)=>{ if (userAuth) { // 로그인상태 유지 dispatch(login({ email: userAuth.email, uid: userAuth.uid, displayName: userAuth.displayName, photoUrl: userAuth.photoURL })) }else { // 로그아웃 dispatch(logout()); } }) },[]); return ( //헤더 컴포넌..
#8. 위젯 부분 구현 | Widgets.js 위젯부분은 특별한 로직이 들어가지 않는다. 다만 UI가 반복되기 때문에 이렇게 반복되는 부분을 커스텀함수로 작성한다. import React from 'react' import './Widgets.css' import InfoIcon from "@material-ui/icons/Info" import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord' function Widgets() { //본문과 내용을 인자로 받는 커스텀 함수 const newsArticle = (heading, subtitle) => ( //뉴스의 아이콘을 구성하는 부분 //뉴스의 제목과 내용을 띄워주는 부분 {heading} {subtitle} ); return (..
#7. 저장한 글들을 피드에 띄워주기 | Post.js Feed 컴포넌트를 만들고, 그 안에 글을 작성할 수 있는 Input 부분을 완성하였다. 이번에는 저장된 글들을 DB에서 불러와 이를 보여주도록 한다. 이를 위해선 컴포넌트 실행시 글을 보여줄 수 있도록 useEffect를 사용하고, 저장된 글을 불러오기 위해 Firebase의 DB를 이용해야 하고, 저장된 내용들을 하나하나 띄워줄 수 있도록 반복문을 사용해야 한다. 이 때 JSX부분에서 반복기능을 구현하기 위해 Map함수를 사용하도록 한다. 먼저 Feed.js를 작성한다 import React, { useState, useEffect } from 'react' import './Feed.css' import CreateIcon from '@material-ui/icons/Create' import In..
#6. 피드와 포스트 입력창 구현 | Feeds, InputOption 메인 화면의 가운데 부분에 해당하는 Feed 컴포넌트를 구현하고자 한다. 이 Feed 컴포넌트 안에는 InputOption과 Post 컴포넌트가 존재한다. Feed 컴포넌트를 구현하기 위해서는 2가지 기능이 필요하다. 1) Input부분에 글을 작성하면, 작성자의 정보와 작성한 글이 DB에 저장되어야 한다. 이 때 DB는 Firebase를 활용한다. 2) 메인화면을 실행하면, 그동한 작성한 Post들을 불러와 Feed 부분에 띄워주어야 한다. Feed 컴포넌트 실행 시 작동하므로, React Hook 중 useEffect를 사용하도록 한다. 우선은 Feed.js를 구현한다. import React, { useState, useEffect } from 'react' import './Feed.css' im..
#5. 메인화면 및 사이드바 구현 | Sidebar.js App.js의 JSX 부분에서 삼항연산자를 사용하여, 로그인 시 메인화면이 보이도록 코드를 작성하였다. 이 때 메인 화면은 Sidebar, Feed 그리고 Widgets 컴포넌트로 구성된다. 우선은 Sidebar 부분을 구현하고자 한다. import { Avatar } from '@material-ui/core' import React from 'react' import { useSelector } from 'react-redux' import { selectUser } from './features/userSlice' import './Sidebar.css' function Sidebar() { //Sidebar에는 로그인한 이름과 이메일이 보여야 한다 //따라서 user 정보를 Selector로 가져..
#4. 로그인 부분 구현 | Login.js Firebase와 Redux 세팅을 마쳤으니, 이제 로그인 부분을 구현해보자. Login.js로 컴포넌트를 만든다. import React, { useState } from 'react' import { useDispatch } from 'react-redux'; import { login } from './features/userSlice'; import { auth } from './firebase'; import './Login.css' function Login() { //실제로 회원가입과 로그인 정보를 담는 부분은 아니다 //우리가 로그인 창에 글자를 입력 시 이를 UI상에 보여주기 위한 State들이다 const [email, setEmail] = useState(""); const [pass..
#3. Firebase와 Redux 설정 | firebase, store, userSlice 이번 링크드인 프로젝트를 까다롭게 만드는 것은, 로그인을 한 정보가 단순히 로그인 화면 뿐 아니라 로그인 이후의 메인화면에서도 사용된다는 점에 있다. 따라서 로그인 기능을 구현하기 위해 Firebase를 세팅해주어야 하고, 또한 로그인 정보를 다른 컴포넌트에서도 계속해서 사용하기 위해 Redux를 세팅해주어야 한다. 우선은 Firebase 세팅부터 진행한다. Firebase 프로젝트를 만들고 나면, 별도의 세팅 페이지가 있다. 이 곳 하단에 있는 Config 키를 복사하여 firebase.js에 붙혀넣는다. import firebase from 'firebase' //firebase 사용을 위해 필요한 정보들 const firebaseConfig = { apiKey: "AIzaSyCiLVYPW9homV0..