상대경로 > 절대경로로 수정

---

1. /src/components/App.js에서 firebase import하기
   1-1. 상대경로 가져오기

import AppRouter from "./Router";
import { useState } from "react";
//🔥상대 경로(relative import, = 파일 경로)로 임포트
import firebase from "../firebase";

function App() {
  //useState Hook
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  //Router 렌더하기
  //AppRouter에 prop 전달하기
  return (
    <>
      <AppRouter isLoggedIn={isLoggedIn} />
      <footer>&copy; twinkle {new Date().getFullYear()}</footer>
    </>
  );
}

export default App;

1-2. 절대경로 가져오기(absolute import)를 사용해보자

절대경로 가져오기(absolute import)
절대 경로를 사용하여 모듈 가져오기를 지원하도록 응용 프로그램을 구성할 수 있다.
이 작업은 프로젝트의 루트에 jsconfig.json 또는 tsconfig.json 파일을 구성하여 수행할 수 있다.
프로젝트에서 TypeScript를 사용하는 경우 tsconfig.json 파일이 이미 있을 것이다.
아래는 JavaScript 프로젝트의 jsconfig.json 파일의 예이다.
파일이 존재하지 않는 경우 다음과 같이 만들 수 있다.

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

TypeScript를 사용하는 경우 프로젝트의 tsconfig.json 파일의 compilerOptions 내에서 baseUrl 설정을 구성할 수 있다.
절대경로 가져오기를 지원하도록 프로젝트를 구성했으므로 src/components/Button.js에 위치한 모듈을 가져오려면 다음과 같이 모듈을 가져올 수 있다.

import Button from 'components/Button';

1-2-1. 따라서 절대경로를 사용하기 위해 트윙클 폴더에 jsconfig.json 파일을 생성하여 다음과 같이 작성한다.

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

1-2-2. 그러고 나서 firebase를 다음과 같이 절대경로로 가져온다.

import firebase from "firebase";

그리고 다른 경로도 절대경로로 바꿔주자.

//절대 경로(absolute import)
import AppRouter from "components/Router";
import { useState } from "react";
//절대 경로(absolute import)
import firebase from "firebase";

function App() {
  //useState Hook
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  //Router 렌더하기
  //AppRouter에 prop 전달하기
  return (
    <>
      <AppRouter isLoggedIn={isLoggedIn} />
      <footer>&copy; twinkle {new Date().getFullYear()}</footer>
    </>
  );
}

export default App;

그리고 여기서 잠깐, firebase.js 파일 이름을 fbase.js로 바꾸고 가자.

---

firebase에서 임포트 해오고 그러는데 이름이 같아서 헷갈린다..^^...
다행히 똑똑한 VSC는 파일 이름 바꾸면 자동으로 import 경로 업뎃해준다.
App.js, index.js에 import firebase from "fbase";로!!

Auth

---

auth는 신규 사용자 가입 및 기존 사용자 로그인 등의 기능을 제공한다.

기본 셋업

1. auth 관련 doc를 확인하자.

🔥 (Firebase v.9로 진행)
아래처럼 작성하면 Firebase 서비스(Cloud Firestore, 인증, 실시간 데이터베이스, 원격 구성 등)를 개별 하위 패키지 내에서 가져올 수 있다.
import { } from 'firebase/<service>';

• 웹에 사용 가능한 Firebase 서비스 중 웹용 인증
  import { } from 'firebase/auth';
• 웹용 Cloud Firestore
  import { } from 'firebase/firestore';
• 웹용 Cloud Storage
  import { } from 'firebase/storage';

2. /src/firebase.js 작성

import { initializeApp } from "firebase/app";
//🔥
import { getAuth } from "firebase/auth";
// Follow this pattern to import other Firebase services
// import { } from 'firebase/<service>';

// Your web app's Firebase configuration
const firebaseConfig = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  projectId: process.env.REACT_APP_PROJECT_ID,
  storageBucket: process.env.REACT_APP_STORAGE_BUCKET,
  messagingSenderId: process.env.REACT_APP_MESSAGING_SENDER_ID,
  appId: process.env.REACT_APP_APP_ID,
};

// Initialize Firebase(Firebase 프로젝트 앱)
const app = initializeApp(firebaseConfig);
//🔥 굳이 firebase 전체 다 안내보내고 authService만 export할 수 있다.
//🔥 authService 사용하고 싶을 때 마다 getAuth(app) 호출해야 하니까 app.js에서 단 한 번만 호출하고 export 시키면 된다.
export const authService = getAuth(app);

3. /src/components/App.js 작성

//절대 경로(absolute import)
import AppRouter from "components/Router";
import { useState } from "react";
//절대 경로(absolute import)
//🔥 fbase에서 authService 가져오기(export로 내보냈기 때문에 {} 중괄호 쳐서 가져와야 함)
import { authService } from "fbase";

function App() {
  //useState Hook
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  console.log(authService);
  //Router 렌더하기
  //AppRouter에 prop 전달하기
  return (
    <>
      <AppRouter isLoggedIn={isLoggedIn} />
      <footer>&copy; twinkle {new Date().getFullYear()}</footer>
    </>
  );
}

export default App;

App.js에서 authService 사용해보자.

Firebase > Docs > Reference > JavaScript - version 9 > auth > Auth

1. 콘솔에 authService.currentUser를 로그로 찍어보자.
   

//App.js

//절대 경로(absolute import)
import AppRouter from "components/Router";
import { useState } from "react";
//절대 경로(absolute import)
//fbase에서 authService 가져오기(export로 내보냈기 때문에 {} 중괄호 쳐서 가져와야 함)
import { authService } from "fbase";

function App() {
  //🔥 인증서비스의 현재 유저 알아보기
  console.log(authService.currentUser);
  //useState Hook
  const [isLoggedIn, setIsLoggedIn] = useState(false);
  //Router 렌더하기
  //AppRouter에 prop 전달하기
  return (
    <>
      <AppRouter isLoggedIn={isLoggedIn} />
      <footer>&copy; twinkle {new Date().getFullYear()}</footer>
    </>
  );
}

export default App;

• 결과
  null이 뜬다. 정상! 인증한 회원이 아무도 없기 때문이다. ^3^~

• authService.currentUser()
  오케이 이제 이걸 어디다 쓰면 좋을까? 바로 useState에 넣어서 로그인 인증을 확인 해 주자.

//App.js

//절대 경로(absolute import)
import AppRouter from "components/Router";
import { useState } from "react";
//절대 경로(absolute import)
//fbase에서 authService 가져오기(export로 내보냈기 때문에 {} 중괄호 쳐서 가져와야 함)
import { authService } from "fbase";

function App() {
  //🔥 인증서비스의 현재 유저가 참인지 거짓인지에 따라 (로그인했는지 안했는지에 따라)state 달라짐
  const [isLoggedIn, setIsLoggedIn] = useState(authService.currentUser);
  //Router 렌더하기
  //AppRouter에 prop 전달하기
  return (
    <>
      <AppRouter isLoggedIn={isLoggedIn} />
      <footer>&copy; twinkle {new Date().getFullYear()}</footer>
    </>
  );
}

export default App;

User interface

Firebase > Docs > Reference > JavaScript - version 9 > auth > User

Properties

Property	Type	Description
emailVerified	boolean	Whether the email has been verified with sendEmailVerification() and applyActionCode().
isAnonymous	boolean	Whether the user is authenticated using the ProviderId.ANONYMOUS provider.
metadata	UserMetadata	Additional metadata around user creation and sign-in times.
providerData	UserInfo[]	Additional per provider such as displayName and profile information.
refreshToken	string	Refresh token used to reauthenticate the user. Avoid using this directly and prefer User.getIdToken() to refresh the ID token instead.
tenantId	string/null	The user's tenant ID.

Methods

Method	Description
delete()	Deletes and signs out the user.
getIdToken(forceRefresh)	Returns a JSON Web Token (JWT) used to identify the user to a Firebase service.
getIdTokenResult(forceRefresh)	Returns a deserialized JSON Web Token (JWT) used to identitfy the user to a Firebase service.
reload()	Refreshes the user, if signed in.
toJSON()	Returns a JSON-serializable representation of this object.

Firebase 콘솔 > Authentification

---

Firebase 콘솔에서 Authentification으로 가면 아직 유저가 아무도 없는 것을 확인할 수 있다.

로그인 방법 설정

로그인 방법 설정 버튼을 클릭해 보자.

"이메일/비밀번호"로 로그인하기

로그인 제공 업체 항목에서 이메일/비밀번호를 선택한다.

• 그러고 나서 이메일/비밀번호를 사용 설정으로 바꾼 후 저장한다.
  

"구글"로 로그인하기

새 제공업체 추가 버튼을 클릭하여 구글도 선택한다.

• 사용 설정으로 바꿔주고 프로젝트 지원 이메일에 내 이메일을 선택하여 저장한다.
  

"깃허브"로 로그인하기

새 제공업체 추가 버튼을 클릭하여 깃허브도 추가하자.

• 먼저 아래의 승인 콜백 URL을 GitHub 앱 구성에 추가해야 한다.
  
• GitHub 앱 구성에 추가하러 가보자.
  ✅ GitHub > Settings > Developer settings > OAuth App > New OAuth App
  
  
  
• Applicaion name을 입력 한 후, Homepage URL은 위의 콜백url에서 뒷 부분을 뺀 url을 입력하고, Authorization callback URL에 위의 콜백 url 전체를 입력해 두자. 이는 GitHub을 위한 부분이다.
  
• Register application을 클릭하면 Client ID와 Client secret이 뜬다. 이를 복사하자.
  
• GitHub를 사용 설정으로 바꿔주고 클라이언트 ID와 클라이언트 보안 비밀번호를 입력한 후 저장한다.