xLinks.pro - bio.link 복제본

최근에는 모든 소셜 미디어 링크를 함께 연결하는 플랫폼xlinks.pro을 구축했습니다. MERN 스택 기술을 사용하여 이 전체 스택 애플리케이션을 개발했습니다.
REST Api에서 CRUD 작업을 구현했습니다. CRUD 작업에 대해 잘 모르더라도 걱정하지 마십시오. 제가 설명해 드리겠습니다.

C - Create
R - Read
U - Update
D - Delete

REST Api를 사용하는 백엔드의 일종의 데이터베이스(MongoDB) 작업입니다.

이 MERN 스택 애플리케이션을 구축하는 이유는 무엇입니까?

그리고 내 개발자 친구는 내가 백엔드 인증 및 이와 유사한 모든 종류의 작업을 하는 큰 프로젝트에서 작업하고 있습니다. Google 로그인을 다룰 때 Google 로그인을 어떻게 처리할 수 있는지, 클라이언트(React) 또는 백엔드(Node.Js & Express.Js).

시도를 위해 Javascript에서 널리 사용되는 인증 라이브러리인 passport.js로 구현하기 위해 해당 기능을 시작했습니다. Passport.Js에는 사용자를 인증하는 많은 전략이 있습니다. 또한 타사 인증을 위한 전략도 있습니다.

Here is the difference between authorization and authentication.

Node.Js와 Express.Js로 passport.js를 다루다 보니 Google 로그인으로 구현하는 것이 피곤하고 어렵습니다.
그런 다음 답변을 찾으려고 노력했습니다. 반응 패키지를 사용하여 Google 로그인을 구현하고 Google 로그인을 React.Js와 통합하는 패키지를 만들었습니다.
Google 로그인과 통합할 수 있는 2개의 인기 있는 패키지가 있습니다.

react-google-login

react-oauth/google

둘 다 반응 애플리케이션에 로그인 기능을 통합하는 좋은 패키지입니다.
하지만 첫 번째 react-google-login 패키지를 설치하는 동안 react-google-login이 react > 18을 지원하지 않는다는 것을 보여주는 몇 가지 문제에 직면했습니다.
그래서 배포 빌드 과정에서 몇 가지 문제에 직면했고 이러한 npm 오류를 해결할 솔루션을 찾을 수 없었고 결국에는 react, react-dom 및 react-scripts의 버전을 줄이고 모든 오류를 수정했습니다. 내 응용 프로그램.

이 MERN 스택 애플리케이션의 기능

클라이언트측 Google 로그인 기능

Tailwindcss를 사용한 아름다운 UI 및 UX

종속성

고객 입장에서

구운

React-google-login

악시오스

반응 아이콘

반응 메타 태그

React share : 트위터에서 공유하기

Tailwindcss, Autoprefixer, Postcss

서버 측

코르스

도트환경

익스프레스

몽구스

이 응용 프로그램을 개발하는 목적

Api에서 CRUD 작업을 구현합니다.

REST API를 생성합니다.

로그인 기능 구현 - Google과 통합

npm 패키지를 설치하는 동안 터미널에 대한 빠른 팁

ctrl + c 터미널 프로세스를 중단합니다.

--force 모든 패키지를 강제로 설치합니다.

Linux 터미널(또는 git)에서 파일 또는 폴더를 삭제하려면

rm -rf <filename or foldername>

xlinks.pro 소개

우선, 사용자는 이 singin in with google에서 application 해야 합니다.
로그인 후 사용자는 대시보드로 이동하여 소셜 미디어 링크 데이터를 양식에 입력하여 프로필을 생성한 다음 사용자가 프로필 업데이트를 클릭하면 이 애플리케이션이 데이터베이스에 사용자 데이터를 추가하는 데 약간의 시간이 걸립니다.
그런 다음 사용자는 내가 사용한react-share npm 패키지가 있는 Twitter에서 자신의 프로필을 공유할 수 있습니다. (여기서 모든 소셜 미디어 공유 링크와 통합할 수 있습니다.)

I used toastify (official website) to give better ui and ux in xlinks.pro

결론

이 블로그를 읽어주셔서 감사합니다. xlinks.pro에 대해 이해하셨기를 바랍니다. xlinks에서 프로필을 만들고 프로필 링크를 모든 소셜 미디어 계정에 추가하는 것을 잊지 마십시오.