로그인 페이지 구현 - Firebase 사용

로그인 페이지 구현

오늘 한 내용

React 개발 환경을 구축하고 로그인 페이지를 구현

firebase를 이용해 구글, 깃허브 로그인

캡쳐

음... 오타 남....

깃허브 로그인은 이미 한 상태여서 캡쳐할 수가 없었음.

로그아웃 기능을 아직 안 만듦.

 

동영상은 노션에 추가했음. 

여기 동영상 넣기 너무 까다로움.

다음 일지에는 움짤로 만들어서 첨부해야겠음.

폴더 구조

src → components → 각 components 폴더 (ex login header ...) → jsx, css 파일 구성

폴더 구성

소문자 시작

.jsx 파일

js 파일은 따로 service 폴더 안에 정리

css는 PostCss로 module화

소감

원래는 node를 사용해 oauth를 사용해보려고 하였으나 무슨 소린지 이해할 수가 없어서 firebase를 이용했다.

나중에 node 실력이 쌓이면 firebase 빼고 직접 만들어보도록 하자.

아직 혼자 firebase를 보고 사용하기엔 무리라 강의의 힘을 빌렸다. 저번에 분명 만들어 본 것인데 또 오류가 났다.

열 받아서 저번 프로젝트 로그인 부분을 복붙 했는데도 오류가 해결되지 않았다. 울 뻔 했다. 😢

 

오류 일지

1. Firebase: Error (auth/invalid-api-key).

 → 이 오류는 API Key가 연결되지 않아서 발생하는 듯 했다. console.log로 API Key를 출력해도 계속 undefined가 나왔다.

아마 auth-service의 import firebase from "firebase"; 가 안먹혀서 그런 것이라는게 나의 추측,,,

원래 저것도 firebase/app/compact ? compact/app? 뭐 저런 식으로 적었다가 고친 것이다.

왜 저렇게 적었냐면 import firebase from "firebase"로 적으면 컴파일 에러가 나서 어쩔 수 없이 한 것이었다.

알고보니 .env 파일을 최상위에 두라고 해서 뒀는데 '진짜' 최상위가 아니라 최상위 폴더였던 것이다..

즉, work-it 폴더안에 같이 두라고... 이유를 알고 나니 더 울고 싶었다....

 

2.Cannot read properties of undefined (reading 'GoogleAuthProvider')

→1번 오류를 반만 고쳤을 때 생긴 오류.

.env 파일 경로를 옮기기 전 이것저것 하다가 1번 오류가 사라진 적이 있었는데 그때 나온 오류다.

1번 오류를 완벽하게 고치면서 사라짐. (내 기억에 의존해서 적는 것이라 정확하지 않을 수 있음)