바닐라 자바스크립트를 이용한 클론코딩 프로젝트가 끝나고 바로 리액트 공부를 시작했다!
새로운 언어를 익히는데에 기본적인 개념 공부도 반드시 중요하지만, 실습하는 것도 중요하다는 생각에 기본적인 사용법과 문법을 익힌 후 새 프로젝트를 만들어 보기로 했다.
해당 프로젝트는 순수 나의 아이디어로 만들어질 웹 페이지이며 자세한 사항은 모든 기능이 추가된 후 css까지 작성한 최종본이 완성되었을때 포스팅할 예정이다.
현재 웹 페이지의 가장 기본적인 단계인 로그인 페이지를 만들고 있다. 이 부분에서 나는 firebase를 사용하기로 했다.
그리고 firebase에서 구글, 깃허브, 페이스북 등 다양한 sns를 이용한 로그인도 가능하다!
이 게시글은 튜토리얼이 아닙니다.
firebase에서 프로젝트를 하나 생성한다. 나는 내 프로젝트에 걸맞는 이름을 붙였다. 나중에 완성될 서비스의 이름이다!
프로젝트로 들어가면 빌드에 다양한 서비스들을 제공하고 있다. 나는 여기서 데이터베이스(세번째)와 인증(첫번째)을 사용하고 있다. 나중에 필요한 기능이 생기면 더 추가해보도록 할 것이다.
데이터베이스는 리뷰를 다루기 위해 추가하였고, 인증은 이메일과 구글로 했다.
시험삼아 나의 구글 아이디로 로그인을 시도했더니 잘 되는 것을 알 수 있다.
그리고 이렇게 다양한 로그인 방법을 추가할 수 있다. 반드시 코드를 작성하기 전에 여기서 로그인 제공업체를 추가해주어야 한다!
처음에는 좀 두려웠다. 이걸 어떻게 하지..? 너무 어려운거 아닌가...
근데 생각보다 너무 쉽다! firebase에서 모든 방법을 친절히 제공해주고 있기때문에 그대로 사용하기만 하면 된다!
위의 이미지처럼 코드도 친절하게 알려주고 있어 그대로 복사해서 내 코드에 맞게 작성하면 된다.
const loginGoogle = async (e) => {
let provider;
if (e.target.name === "google") {
provider = new GoogleAuthProvider();
}
await signInWithPopup(authService, provider);
};
구글을 이용한 로그인의 코드가 5줄이면 끝난다. 이 5줄로 구글 로그인이 가능해지는 매직. (물론 전체 코드는 이것보다 길지만 입맛에 맞게 수정 가능하고, 모두 async를 사용하므로 이 부분만 주의해주면 된다.)
이렇게 간편한줄 몰랐다! 개인 프로젝트 만들때 꾸준히 사용하면 좋을 것 같다.