firebase를 이용한 로그인

오늘 한 내용

• firebase google oauth를 이용한 로그인
  • service 폴더를 따로 만들어주고 firebase.js 파일을 만든다.
  • .env 파일을 만들고 firebase 페이지에서 받아온 api key를 입력한다
    
    • (이때, .env 파일은 상단에 위치해야하고, key이름은 'REACT_APP_FIREBASE_KEY이름' 형식으로 작성한다.)
  • firebase.js 파일에 process.env.해당 key를 적어준다.
  • auth_service.js 파일을 만들고 firebase oauth를 위한 코드를 적는다. (firebase login page 참조)
• 로그인 페이지 스타일링

오늘 배운 내용

• p는 block 요소, span은 inline 요소

캡쳐

저번 프로젝트 스타일링을 재사용했다.

x 버튼을 누르면 맨 첫 페이지로 이동

네모 부분에는 따로 이미지 추후 추가

소감

css가 많이 약하다는 것을 깨달았다. 그나마 알고 있던 것도 안쓰니까 다 까먹어버렸다. 기초가 부족한 채 쌓아올리는 것은 부질 없다. 제대로 css를 공부하자.

오류 일지

router와 firebase 버전이 저번 프로젝트랑 다 달라서 이에 수반하는 오류들이 종종 나타남. 그 중 google login에서 page redirect하면 로그인이 되지 않는 오류는 아직 해결법을 찾지 못함 (아예 로그인 console조차 찍히지 않음)