{ "componentChunkName": "component---src-templates-blog-template-js", "path": "/start/", "result": {"data":{"cur":{"id":"b50d9862-e9cc-5bb3-bff4-9bd88ea4c271","html":"

w(ﾟДﾟ)w 또 시작

\n

티스토리에서 블로그를 운영하다가 벨로그로 옮겨 운영을 하고, 이제는 github.io 페이지를 따로 만들어서 운영을 하게 됐다.\n왜 이렇게 많이 옮겨다녔나라는 생각이 들지만 솔직히 나도 잘 모르겠다.\n여기서 운영하다보면 저곳이 좋아보이고, 그래서 저곳으로 옮기면 이제는 또 다른 쪽이 좋아보이는 심리가 계속 지속 되었던 것 같다.\n이제는 뭔가 온전한 나의 블로그가 생겼다는 느낌을 가지고 정착을 해야 할것 같다.

\n

뭐 할건데?

\n

당장은 이전에 운영하던 블로그에서의 글들을 옮겨오고, 이후에는 계속 하던 기술/공부 관련 포스트를 할 것 같다.\n여름방학부터는 이전에 시도해보지 않았던 아예 새로운 분야를 공부하게 되기도 하고, 지금도 조금씩은 하고 있었지만 이제는 정말로 알고리즘 공부도 열심히 해야한다.\n정보처리기사, 토익 등 취업 관련 해서 하는 공부들에 관해서도 올릴 예정이다.

\n
\n\n
","excerpt":"w(ﾟДﾟ)w 또 시작 티스토리에서 블로그를 운영하다가 벨로그로 옮겨 운영을 하고, 이제는 github.io 페이지를 따로 만들어서 운영을 하게 됐다.\n왜 이렇게 많이 옮겨다녔나라는 생각이 들지만 솔직히 나도 잘 모르겠다.\n여기서 운영하다보면 저곳이 좋아보이고, 그래서 저곳으로 옮기면 이제는 또 다른 쪽이 좋아보이는 심리가 계속 지속 되었던 것 같다.\n이제는 뭔가 온전한 나의 블로그가 생겼다는 느낌을 가지고 정착을 해야 할것 같다. 뭐 할건데? 당장은 이전에 운영하던 블로그에서의 글들을 옮겨오고, 이후에는 계속 하던 기술/공부 관련 포스트를 할 것 같다.\n여름방학부터는 이전에 시도해보지 않았던 아예 새로운 분야를 공부하게 되기도 하고, 지금도 조금씩은 하고 있었지만 이제는 정말로 알고리즘 공부도 열심히 해야한다.\n정보처리기사, 토익 등 취업 관련 해서 하는 공부들에 관해서도 올릴 예정이다. w(ﾟДﾟ)w 또 시작 뭐 할건데?","frontmatter":{"date":"June 01, 2022","title":"새 블로그 시작","categories":"기타 featured","author":"김형진","emoji":"🏋️‍♀️"},"fields":{"slug":"/start/"}},"next":null,"prev":{"id":"094a6858-baf4-518c-b591-1e65e9c3c2d4","html":"

저번편에서는 Firebase의 설정을 끝마쳤고, 이번편에서는 실제로 구글 로그인 기능을 구현할 차례다.

\n

프로젝트 설정

\n

먼저 필요한 패키지들을 설치한다.

\n
npm install @react-native-firebase/app @react-native-firebase/auth @react-native-google-signin/google-signin
\n

app 모듈은 Firebase의 기능들을 사용하기 전에 반드시 깔아야 하는 모듈이고, auth 모듈은 계정 기능을 사용할 수 있게 해준다. 그리고 google-signin은 문자 그대로 React에서 구글 로그인 기능을 쉽게 만들어주는 패키지다.

\n

패키지들을 설치한 이후에는 프로젝트 자체에서의 설정을 해준다.\nandroid 폴더 안에 있는 build.gradle 파일에 들어가 google-services 플러그인을 추가해준다.

\n
buildscript {\n  dependencies {\n    // ... other dependencies\n    classpath 'com.google.gms:google-services:4.3.10'\n    // Add me --- /\\\n  }\n}
\n

다음으로는 android/app 경로 안에 있는 build.gradle 파일에서 플러그인을 적용한다. 경로가 비슷하니 헷갈리지 말자.

\n
apply plugin: 'com.android.application'\napply plugin: 'com.google.gms.google-services' // <- Add this line
\n

auth 모듈도 같은 파일 안에 추가해준다.

\n
dependencies {\n    // ... other dependencies\n    implementation 'com.google.firebase:firebase-auth'\n}
\n

로그인 기능 구현

\n

이젠 정말로 기능 구현을 할 차례다.

\n

App.js

\n

App.js에 있는 코드를 모두 지우고 필요한 패키지들을 불러오자.

\n
import React, { useEffect, useState } from 'react';\nimport auth from '@react-native-firebase/auth';\nimport { GoogleSignin } from '@react-native-google-signin/google-signin';
\n

다음으로는 구글 로그인 기능을 이용하기 위한 webClientId를 google-services.json에서 가져와야 한다.\n이 파일 안에서 client/oauth_client/client_id를 가져오면 되는데, client_type이 3인 것을 가져와야 한다.

\n
useEffect(() => {\n    GoogleSignin.configure({\n      webClientId:\n        'CLIENT_ID'\n    });\n}, []);
\n

이로써 Google SDK를 사용할 수 있게 됐다.

\n

이제는 로그인 버튼을 눌렀을 때 사용자를 로그인 시키는 기능을 만들어보자.

\n
async function onGoogleButtonPress() {\n    const { idToken } = await GoogleSignin.signIn();\n    const googleCredential = auth.GoogleAuthProvider.credential(idToken);\n    return auth().signInWithCredential(googleCredential);\n}
\n

한줄한줄 살펴보자면\n첫번째 줄은 구글에 로그인하면서 유저의 idToken을 가져온다.\n두번째 줄은 가져온 유저의 idToken을 이용하여 Google credential을 생성한다.\n마지막 줄은 생성된 credential을 이용해 사용자를 앱으로 로그인 시킨다.

\n

다음은 사용자의 접속 유무에 따라서 다른 화면을 보여주는 작업을 해보자.\n사용자가 접속 중일때는 앱의 홈 화면을 보여주고 접속 중이 아닐때는 로그인 화면을 보여주려면 현재 사용자의 상태를 판별하는 state가 필요하다.

\n
const [loggedIn, setLoggedIn] = useState(false);\n\n// ... other codes\n\nauth.onAuthStateChanged((user) => {\n    if (user) {\n    \tsetLoggedIn(true);\n    } else {\n    \tsetLoggedIn(false);\n    }\n});
\n

Firebase에서 제공하는 onAuthStateChanged function을 통해 유저의 접속 유무를 판별 할 수 있다.

\n
if (loggedIn) {\n    return <Home />;\n}\n\nreturn <LoginScreen onGoogleButtonPress={onGoogleButtonPress} />;
\n

로그인 상태에서는 Home 화면을, 아닐때는 LoginScreen 화면을 보인다.\nonGoogleButtonPress function의 정보를 LoginScreen으로 보낸다.

\n

이제는 유저에게 보여질 두 화면을 만들 차례다.

\n

LoginScreen.js

\n

screens 폴더를 생성한 뒤 폴더 안에 LoginScreen.js 파일을 생성한다.

\n
import React from 'react';\nimport { Text, View } from 'react-native';\nimport { GoogleSigninButton } from '@react-native-google-signin/google-signin'
\n

필요한 모듈들을 가져온다.\n다음으로는 구글 로그인 버튼을 이용한 간단한 페이지를 만든다. 스타일

\n
export default function LoginiScreen(props) {\n    return (\n        <View>\n            <Text>Login Page</Text>\n            <GoogleSigninButton onPress={props.onGoogleButtonPress} />\n        </View>\n    );\n}
\n

Home.js

\n

screens 폴더 안에 Home.js 파일을 만들고 필요한 모듈들을 불러온다.

\n
import React from 'react';\nimport { Text, View, Image, Button } from 'react-native';\nimport auth from '@react-native-firebase/auth';
\n

다음은 로그인이 성공했는지를 확인 하기 위해 로그인한 유저의 정보를 불러와 유저의 프로필 사진, 이름, 이메일을 보인다.\nsignOut()을 사용한 로그아웃 버튼도 만들어 준다.

\n
export default function Home() {\n  const user = auth().currentUser;\n  return (\n    <View>\n      <Text>{user?.displayName}</Text>\n      <Text>{user?.email}</Text>\n      <Image source={{ uri: user?.photoURL }} />\n      <View>\n        <Button title=\"Logout\" onPress={() => auth().signOut()} />\n      </View>\n    </View>\n  );\n}
\n

auth.currentUser function을 사용하면 현재 유저의 정보를 불러 올 수 있다.\nEx) user?.photoURL -> 현재 유저의 구글 계정 프로필 사진

\n

결과

\n

LoginScreen\n\"\"\nHome\n\"\"\n가시성이 너무 떨어지고, 이미지를 보여주기 위해 간단히 디자인을 따로 했다.

\n

마치며

\n

그동안 포스트를 안하다가 갑자기 삘을 받아서 준비도 안된 상태에서 포스트를 하다 보니까 시간도 굉장히 오래걸리고 글도 난잡하게 써졌던 것 같습니다. 글 읽는데 불편한 점이 계셨다면 정말 죄송합니다…

\n

아마 앞으로는 간단한 리뷰 기능과 찜 기능, 그리고 이 둘과 계정을 이용하여 내가 쓴 리뷰와 찜한 식당 불러오기에 대해서 다뤄볼 것 같습니다.\n채팅 기능도 언젠가는 포스트를 하겠지만 아직은 제가 글로 풀어낼 실력이 안되는 것 같아서 다음으로 미루고요.

\n

아무튼 긴 글 읽어주셔서 감사합니다!

\n
\n\n
","frontmatter":{"date":"June 02, 2022","title":"[React Native] Firebase를 이용한 Android 구글 로그인 2","categories":"개발 featured","author":"김형진","emoji":"📱"},"fields":{"slug":"/react-native-google-login-2/"}},"site":{"siteMetadata":{"siteUrl":"https://hhjj0506.github.io","comments":{"utterances":{"repo":"hhjj0506/hhjj0506.github.io"}}}}},"pageContext":{"slug":"/start/","nextSlug":"","prevSlug":"/react-native-google-login-2/"}}, "staticQueryHashes": ["1073350324","1956554647","2938748437"]}