[Reactjs]
무료 12 시간 과정에서 React를 사용하여 Instagram 클론을 만드는 방법 알아보기
페이지 정보
작성자 운영자작성일 21-05-20 13:32 조회 1,051댓글 0
인기 있는 웹 앱의 클론을 빌드하는 방법에 대한 많은 자습서가 있지만 대부분은 짧고 많은 기능을 다루지 않습니다.
나만의 Instagram 버전을 만드는 방법을 보여주는 방대한 12 시간 과정을 방금 출시했습니다. 이 과정은 웹 앱 클론 생성에 대한 대부분의 다른 과정보다 훨씬 포괄적입니다.
Karl Hadwen이이 과정을 개발했습니다. Karl은 자신의 채널과 freeCodeCamp.org 채널에 있는 많은 인기 코스를 만들었습니다.
이 과정에서 만들 프로젝트는 React (커스텀 후크, useContext, useState, useEffect 및 useRef 포함), Firebase, Tailwind CSS, LoadTest, Lighthouse, Vercel, React Testing Library 및 Cypress E2E Testing을 사용합니다.
로그인 페이지, 가입 페이지, 대시 보드 (사진보기 / 좋아요 / 댓글 작성) 및 사용자 프로필을 포함하여 여러 페이지를 만드는 방법을 배웁니다. 사용자가 로그인을 시도하면 로그인 페이지가 Firebase에 연결됩니다. 사용자가 가입하면 앱은 Firebase 인증을 사용하여 사용자를 Firebase 인증 데이터베이스에 저장합니다.
Vercel을 사용하여 앱을 완전히 배포하는 방법도 배우게 됩니다.
이 포괄적 인 과정의 모든 섹션은 다음과 같습니다.
Introduction
Showcase
Create React App (yarn)
Project Folder Structure
Installing Dependencies
Refactoring unnecessary files, refactoring code
Install ESLint
Creating Folder Structure & Architecture
Setup Firebase
Firestore
Firestore Rules
Firestore (Collections & Docs)
Firebase Authentication
Realtime Database (Explanation)
createContext in firebase.js
Creating App in Firebase
Start working on Login Page
Install React Router Dom
Create Routes
Continue working on Login Page (Part 2)
Tailwind.css Introduction
Continue working on Login Page (Part 3)
Install more dependencies
Change how all scripts work
yarn add postcss -D
Create components folder
Tailwind.css setup
Completed Tailwind Setup, Continue working on Login Page (Part 4)
Interjection: Field Value
Continue working on Login Page
Tailwind.config
Login Functionality (with Firebase)
Signup Page
Check for user created is a duplicate
Not Found & Dashboard Page
Created Timeline Component
Created Sidebar Component
Created Header Component
use-auth-listener.js Hook
users.js UserContext
Back to Header Component
Working on Dashboard Page
Working on Sidebar Component
use-user.js hook
In user.js ⇒ Introduction to prop types
Created Timeline.js
Explanation on useMemo
Add WhyDidYouRender
Struggling with some issues
Finally Figuring out some problems with WhyDidYouRender
Working on suggestion.js (sidebar completed)
Get suggested profiles
Functionality: Remove followed user from suggestion
Functionality: Update user’s following & followers
Overview on Timeline
Creating Post Component
Creating more custom hooks (usePhotos)
Rendering out the photos (using React skeleton)
Start work on Post Component
Components within Post
Header Component
Image & Actions
Service call in Firebase
Show Comments
Add Comments
Adding Protected Routes
Profile
Lazy load explanation
Continue working on Profile Page
Header Component in Profile Page
Profile Specific Header
Get User Photos
Continue working on header
Information in header
Photos Component in Profile Page
Recap of everything we’ve done
Start of Review
Not found header
Review of usePhotos, useUsers, isUserLoggedIn, ProtectedRoute
Review of contexts: firebase.js and user.js
Review of Routes & Posts
loadtest (Npm install -g loadtest)
Create a production build
Deployment to Vercel done but with issues
Issues fixed
Lighthouse
Wrapping up
Changes and Refactoring (Fixing Bugs)
Quick Look at Paid Version
Cypress
Signing Off
아래 또는 freeCodeCamp.org YouTube 채널 (12 시간 시청)에서 전체 과정을 시청하세요.
