본문 바로가기

Projects

 (39)
#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..
#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) 가운데에는 포스트를 입력할 수 있는 공간과 작성되었던 포스트들이 최신순으로..

티스토리툴바