[TIL] 20230720 - firebase 구글,깃허브,페이스북 로그인 연동 / 가우스 등차수열의 합

파이어베이스 Authentication 에서 sign-in method 탭으로 들어가서 새 제공업체 추가 ! 

제공없체 google 선택!

프로젝트 지원 이메일은 그냥 내걸로 했다 ! 그럼 잘된다 ㅎㅎ

 

 

import { auth } from '../../firebase';
import { signInWithPopup, GoogleAuthProvider } from 'firebase/auth';

const GoogleLogin = () => {
  const googleProvider = new GoogleAuthProvider();
  const signInWithGoogle = async () => {
    return await signInWithPopup(auth, googleProvider);
  };

  const googleLoginHendler = e => {
    e.preventDefault();
    signInWithGoogle()
      .then(result => {
        const credential = googleProvider.credentialFromResult(result);
        console.log(result);
        const token = credential.accessToken;
        const user = credential.user;
        console.log(token);
        console.log(user);

        // local storage에 token, username 저장해주기
        // setToken(token);
        // setUserName(userName);
      })
      .catch(error => {
        console.error(error);
      });
  };

  return (
    <StSnsIcon onClick={googleLoginHendler} style={{ padding: '1px' }}>
      <img src={googleIcon} alt="" />
    </StSnsIcon>
  );
};

export default GoogleLogin;

그리고 버튼 넣을 곳에 컴포넌트 import 해서 사용!

 

 

firebase github 로그인

깃허브또한 파이어베이스 Authentication 에서 sign-in method 탭으로 들어가서 새 제공업체 추가 ! 

해야하는데 먼저 github 에서 클라이언트 ID랑 비밀번호를 받아와야하니

github로 먼저 간다

 

settings > 왼쪽제일 아래 developer settings > github apps 

 

앱이름은 마음대로 설정 !

앱에 클라이언트 아이디를 가져온다!

비밀번호도 생성해서 넣어주기

import { auth } from '../../firebase';
import { signInWithPopup, GithubAuthProvider } from 'firebase/auth';


const GithubLogin = () => {
  const githubProvider = new GithubAuthProvider();
  const signInWithGithub = async () => {
    return await signInWithPopup(auth, githubProvider);
  };
  const githubLoginHandler = e => {
    e.preventDefault();
    signInWithGithub()
      .then(result => {
        const credential = githubProvider.credentialFromResult(result);
        // const token = cred;
        const token = credential.accessToken;
        const user = credential.user;
        console.log('github Login-info :', token, user);
      })
      .catch(error => {
        const errorCode = error.code;
        const errorMessage = error.message;
        console.log('error', errorCode, errorMessage);
        // const email = error.customData.email;
        // const credential = githubProvider.credentialFromError(error);
      });
  };
  return (
    <StSnsIcon onClick={githubLoginHandler}>
      <img src={gitIcon} alt="" />
    </StSnsIcon>
  );
};

export default GithubLogin;

 

페북 개발자 사이트

https://developers.facebook.com/?locale=ko_KR 

Meta for Developers

앱생성!

여기서 빠른시작으로 !!

설정 > 기본설정 들어가면 아이디랑 시크릿코드가 있다 

이거 가져오기

import { auth } from '../../firebase';
import { signInWithPopup, FacebookAuthProvider } from 'firebase/auth';

const FacebookLogin = () => {
  const faceBookProvider = new FacebookAuthProvider();
  const signInWithFacebook = async () => {
    return await signInWithPopup(auth, faceBookProvider);
  };
  const facebookLoginHandler = e => {
    e.preventDefault();
    signInWithFacebook()
      .then(result => {
        const credential = faceBookProvider.credentialFromResult(result);
        // const token = cred;
        const token = credential.accessToken;
        const user = credential.user;
        console.log('github Login-info :', token, user);
      })
      .catch(error => {
        const errorCode = error.code;
        const errorMessage = error.message;
        console.log('error', errorCode, errorMessage);
        // const email = error.customData.email;
        // const credential = githubProvider.credentialFromError(error);
      });
  };
  return (
    <StSnsIcon onClick={facebookLoginHandler}>
      <img src={facebookIcon} alt="" />
    </StSnsIcon>
  );
};

export default FacebookLogin;

---

[ 등차수열의 합 ]

(등차수열의 합) = {(첫 항 + 마지막 항) * (항의 개수)} / 2

 

 

문제 : 두 정수 a, b가 주어졌을 때 a와 b 사이에 속한 모든 정수의 합을 리턴하는 함수, solution을 완성하세요.
예를 들어 a = 3, b = 5인 경우, 3 + 4 + 5 = 12이므로 12를 리턴합니다.

 

나는 for / if문을 사용했는데 가우스의 등차 수열의 합으로 푼 풀이를 봤다 ㅎㅎ

function adder(a, b){
    var result = 0
    //함수를 완성하세요
    return (a+b) * (Math.abs(a-b)+1) / 2;
}

 

예를 들어 a = 3이고 b = 5라면, 3 + 4 + 5 = 12 와 같은 방식입니다.

정수는 연속하는 두 항의 차가 1인 등차수열이므로 등차수열의 합 공식을 적용할 수 있습니다.

 

위의 예시에 적용해보면,

(첫 항 + 마지막 항) = a + b

(항의 개수) = b - a + 1

 

이런 식으로 공식에 대입하고, 제한 조건에 따라 코드를 수정하면 됩니다. 특히 항의 개수는 주어지지 않는 경우가 일반적이므로 테스트 코드의 입출력을 보면서 적절하게 식을 만들면 되겠습니다. 또한 해당 프로그래머스 문제에서는 a 와 b의 대수관계가 정해져있지 않다는 제한을 두고 있습니다. 따라서 앞서 본 풀이(feat. 가우스의 재림...)에서는 항의 개수가 음수가 나오지 않도록 Math.abs 메서드를 사용하여 절대값을 반환하도록 하고 있습니다.   

 

 

프로그래머스 Level 1 문제들을 풀면서 유독 자주 보이던 풀이가 바로 가우스 계산법이라고도 불리는 등차수열의 합입니다. 연속한 두 항의 차가 일정한 등차수열의 합은 첫 항과 마지막 항을 더한 뒤 항의 개수를 곱하고 2로 나눈 값이 됩니다. 프로그래머스 문제 중에서는 '두 정수 사이의 합', '부족한 금액 계산하기'에서 활용할 수 있습니다.

 

https://www.ebsmath.co.kr/resource/rscView?cate=11009&cate2=11041&cate3=11123&rscTpDscd=RTP15&grdCd=HGRD02&sno=29453&type=S&historyYn=study