개발자 기술을 한 단계 끌어올리고 싶습니까, 아니면 미래의 고용주에게 깊은 인상을 주고 싶습니까? 그런 다음 이 LinkedIn 클론을 만드세요!

4부

이 시리즈의 3부 에서는 Feed & Widgets 구성 요소를 빌드하고 Feed 구성 요소를 Firestore에 연결했습니다.

이 마지막 기사에서는 Redux를 설정하여 사용자의 상태를 관리하고 로그인 페이지를 만들고 마지막으로 Firebase에 배포합니다!

1. — Redux 설정

Redux는 애플리케이션 상태를 관리하기 위한 JavaScript 라이브러리입니다. 첫 번째 에피소드에서는 Redux Toolkit 으로 React 애플리케이션 스타터를 만들었습니다 . Redux를 React와 함께 사용하기 위한 템플릿을 만들었습니다. 계속하기 전에 템플릿에 의해 생성된 폴더를 재구성해야 합니다.

• 폴더 에서 Counter.module.css및 Counter.js파일을 삭제 counter합니다.
• counterSlice.js파일을 features폴더로 이동 합니다.
• counter폴더를 삭제하고 counterSlice.js파일 이름 을 userSlice.js.

• 의 코드를 userSlice.js다음으로 바꿉니다 .
• store.js파일 의 내용을 다음으로 바꿉니다 .

사용자가 로그아웃하면 사용자의 상태는 와 같고 null, 사용자가 로그인하면 상태는 action.payload사용자 정보를 포함하는 개체와 같습니다 .

• 이제 App.js다음 코드 로 이동하여 추가하십시오.

const user = useSelector(selectUser)

• 에서 App.js, 그것은 로그인 페이지가 표시됩니다, 사용자가 로그 아웃 또는 프로필이없는 경우 중 하나, 사용자가 로그인 한 경우 기본 응용 프로그램을 표시하거나하는 삼항 연산자를 사용합니다.

이제 로그인 페이지를 만들어야 합니다.

2. — 로그인 페이지 생성

• 에서 폴더라는 이름의 파일을 만듭니다 . Login Login.js
• 파일에 들어가면 ES7 Snippets rfce 의 스니펫 을 사용하도록 입력 합니다 .
• 여전히 Login 폴더에서 Login.css파일을 만들고 Login.js구성 요소 로 가져옵니다 .
• 최종 Login 구성 요소는 다음과 같습니다.

등록은 화살표 기능 관리 register의 사용과 중포 기지 인증 및 createUserWithEmailAndPassword.

인증은 화살표 기능 관리 loginToApp의 사용과 중포 기지 인증 및 signInWithEmailAndPassword.

사용자로부터 수집된 정보는 UseDispatch()hook으로 redux 스토어에 푸시됩니다 .

• Login.js구성 요소에 스타일을 지정하려면 Login.css다음 코드를 열고 추가하십시오.

애플리케이션을 완료하려면 이제 로그아웃 기능을 추가하고 로그인한 사용자를 계속 로그인 상태로 유지 하고 Firestore 데이터베이스 의 Feed 구성 요소에 데이터를 표시해야 합니다.

• App.js구성 요소로 돌아가서 다음 코드를 추가합니다.

• 이제 함수 HeaderOption.js에 onClick이벤트를 추가하십시오 HeaderOption.
• 이동 Header.js하여 다음 코드를 추가하십시오.

• 이제 Sidebar.js파일 로 이동하여 내용을 다음과 같이 변경합니다.
• Feed.js파일로 이동하여 내용을 다음과 같이 변경합니다.

축하합니다! LinkedIn 클론을 구축했습니다!!

3. — Firebase에 배포

배포하기 전에 Firebase 도구 를 설치해야 합니다.

• 프로젝트를 배포하려면 콘솔로 이동하여 "firebase init" 명령을 입력하세요.

• 기존 프로젝트를 사용하려면 선택하세요.

• " build " 가 될 공용 디렉토리를 입력하십시오.

• 단일 페이지 앱으로 구성
• 이제 콘솔에서 " npm run build " 명령을 실행합니다 .

빌드가 완료되면 콘솔에 " firebase deploy "를 입력합니다.

이 작업을 완료하면 앱이 온라인으로 호스팅되는 URL을 얻을 수 있습니다. 여기에서 내 것을 확인하십시오.https://linkedin-clone-5ebs.web.app/.

축하합니다!!! Firebase 호스팅에 Google 클론을 배포했습니다!!

결론

놀라운! LinkedIn 클론을 방금 깨달았습니다! 이 프로젝트를 재미있게 구축하고 최종 결과를 얻었기를 바랍니다!

당신은 여기 링크 길을 따라,을 잃었어요 경우 1 부 , 2 부 , 3 부 약속, 그리고, 내 GitHub의에 전체 소스 코드!