앱플레이어 expo 연동, 구글 로그인 구현 중

앱개발을 위해 에뮬레이터를 설치했다. 처음에는 에뮬레이터를 설치할 수 있는 안드로이드 스튜디오 프로그램을 사용했는데, vscode에 비해 불편한 부분도 많고 무엇보다 렉이 걸려서 좀 버벅거리는 감이 있었다. 

vscode로 넘어왔으나 에뮬레이터를 사용하려면 안드로이드 스튜디오를 들어가서 실행시켜줘야 사용할 수 있는 매우 귀찮은 단점이 생겼다.

이를 위해 앱플레이어를 설치했고 최종적으론 뮤뮤앱플레이어라는 프로그램으로 앱을 실행했다.

 

앱플레이어로 프로젝트를 연동하려면, 현재 실행되고 있는 에뮬레이터를 연동해줄 필요가 있다.

모든 앱플레이어를 설치하면 설치 폴더 내에 adb라는 실행 파일이 존재하는데, 본인이 설치한 뮤뮤앱플레이어는 설치 파일의 shell폴더에 adb파일이 들어있었다.

---

1. 해당 경로를 환경 변수 Path에 등록

 

2. cmd를 실행해서 "adb connect 127.0.0.1:7555"를 입력

본인은 이미 연동해서 이런 메세지가 뜨지만 처음 연동하면 연결됐다는 메세지가 뜬다. (7555 포트는 기본적으로 제공되는 내장 adb라고 함)

 

3. 프로젝트를 실행하여 화면이 연동되는지 확인

2번 과정에서 연동이 되었을 때, 프로젝트 실행 시 바로 화면이 띄워지는 걸 확인했다.

---

안되는 분들은 설치 폴더의 경로를 다시 확인하거나, 앱플레이어 설정의 adb옵션을 확인해보자.

특정 앱플레이어들은 예전에 adb 설정을 켤 시 채굴 위험이 있었다고 하는데, 해결이 된 플레이어와 해결이 안된 플레이어를 잘 모르기 때문에 구글링해서 최근 동향을 찾아보고 사용할 필요가 있을 것 같다.

사용 중인 뮤뮤앱플레이어는 따로 설정하는 부분이 안보여서 아직은 좀 불안하다.

---

오늘까지 구글 로그인을 완료하려 했는데 인증 오류가 계속 발생하여 아직 구현 중이다.

현재 페이지의 구조인데, (tabs)는 앱 하단의 탭바에 표시될 페이지를 의미한다. 기본적으로 expo는 next와 같이 폴더 별 라우터 기능을 가지고 있으며, explore를 예로 들면 localhost/(tabs)/explore가 경로가 된다.

기본적으로 (tabs)가 시작경로라고 생각하면 되고, login 페이지를 바깥으로 뺀 이유는 하단의 탭바를 안 보이게 하고 싶었다.

(tabs)안에 있는 페이지들은 전부 하단에 탭바가 보여지는데, 라이브러리를 사용해서 안보이게 해도 된다곤 하나 아직 RN의 코드에 익숙하지 않아 해당 방식을 채택했다.

export default function TabLayout() {
  const colorScheme = useColorScheme();
  const { isAuthenticated } = useAuth();

  if (!isAuthenticated) {
    return <Redirect href="/login" />;
  }

  return (
    <Tabs
      screenOptions={{
        tabBarActiveTintColor: Colors[colorScheme ?? "light"].tint,
        headerShown: false,
        tabBarButton: HapticTab,
        tabBarBackground: TabBarBackground,
        tabBarStyle: Platform.select({
          ios: {
            // Use a transparent background on iOS to show the blur effect
            position: "absolute",
          },
          default: {},
        }),
      }}
    >
      <Tabs.Screen
        name="index"
        options={{
          title: "Home",
          tabBarIcon: ({ color }) => (
            <IconSymbol size={28} name="house.fill" color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="explore"
        options={{
          title: "Explore",
          tabBarIcon: ({ color }) => (
            <IconSymbol size={28} name="paperplane.fill" color={color} />
          ),
        }}
      />
      <Tabs.Screen
        name="mypage"
        options={{
          title: "Mypage",
          tabBarIcon: ({ color }) => (
            <IconSymbol
              size={28}
              name="figure.sailing.circle.fill"
              color={color}
            />
          ),
        }}
      />
    </Tabs>
  );
}

tabs의 layout 코드에 로그인하지 않으면 로그인 페이지로 이동되게 해놨는데, 이 부분은 구글 로그인을 구현하면서 수정될 수 있다.

---

import { useState } from "react";
import { create } from "zustand";
import { persist } from "zustand/middleware";

interface AuthProps {
  isAuthenticated: boolean;
  login: () => void;
  logout: () => void;
}

export const useAuth = create<AuthProps>((set) => ({
  isAuthenticated: false,
  login: () => set({ isAuthenticated: true }),
  logout: () => set({ isAuthenticated: false }),
}));

인증 코드를 따로 작성하여 hooks폴더에 넣어놨으며, 로그인 성공 시 해당 코드에 인자로 login()을 보내주고 로그아웃 시 logout()을 보내는 구조이다.

---

로그인 페이지를 쌈뽕하게 꾸몄다.

본인은 디자인 감각이 없기 때문에 색감은 지피티한테 맡겼다. 트렌디하게 색을 달랬는데 그라데이션을 줬네;

하단의 텍스트까지 야무지게 박아주고 이미지도 다른 걸로 바꿔줘야겠다. 만들고 나서 글 쓸 때 보니까 뭔가 뭔가다.

 

구글로그인은 google cloud에서 OAuth Client ID를 받아야 한다.

---

구글 로그인을 진행하고 클라이언트 생성을 누르면 해당 페이지로 오며 생성을 진행할 수 있다.

원래 어플리케이션 유형을 안드로이드로 해야 하는데, 인증서 등록 절차도 있어서 잘못 건들 것 같아 일단 웹으로 등록해놨다.

 

 

연동할 개발주소도 등록해주고 클라이언트를 생성하면 ID와 비밀번호를 확인할 수 있다.

 

현재 웹 구글 로그인 버튼은 작동되는데 cors에러가 발생해서 이 부분부터 해결하거나, 인증서 부분을 해결하면 구현 될 것같다.

 

정처기 실기 시험이 20일이라 정처기 공부해야 하는데 개발 학습에서 계속 막히니 답답해서 손을 못 놓겠다.. 잠깐 멈추고 2주 남짓한 시간동안 쭉 달려야 하나 생각 중