20241020 TIL: React Native에서 애플 로그인하기 [진행중]

✅ 오늘 배운 것

그저께 마주한 문제에 대해서 팀원과 상의를 해 본 결과, 일단 안드로이드에서 애플 로그인 버튼을 disable 시키는 것도 하나의 방법이라는 생각이 들었다. 물론 '안드로이드에서도 당연히 애플 로그인 할 수 있어야 하는 거 아니야?' 라는 질문이 들어온다면 좀 많이 죄책감이 들겠지만... 일단 할 일이 많기에 어쩔 수 없다. 임시방편으로 덮어 쓰고 그 다음에 새로운 방법을 찾아보자. 

 

그렇다면 문제의 그 라이브러리(사실 라이브러리가 문제인지 내가 문제인지는 확실하지 않다)를 사용해볼 수 있겠다. 설정을 차근차근히 따라해 보자. 

 

빌드를 다시 하고 캐시를 삭제해준 뒤, 어제 막혔던 명령어를 실행해 주었더니 우선 expo 홈 화면까지 띄우는 것은 성공했다. 

// 빌드 다시 하기
APP_MODE=development npx expo prebuild

// 캐시 삭제하기
rm-rf~/Library/Developer/Xcode/DerivedData

// 어제 막혔던 명령어 실행
APP_MODE=development npx react-native run ios

 

그러나 여기서 'Recently opened'를 누르면 다음과 같은 에러가 났다. 

 

로그를 보니 특정 확장자로 시작하는 index 파일이 없어서 나는 에러 같았다. 보통 루트 디렉토리의 index 파일을 시작점으로 인식한다는 것은 알고 있었고, 아마도 이 ios emulator를 처음 런칭할 때에도 그렇게 생각하는 것 같았다. 그러나 현재 프로젝트에서는 app/_layout.jsx 파일을 진입점으로 사용하고 있었으므로, 이에 대한 설정이 필요한 것일수도 있다는 생각이 들었다. 

 

GPT와 티키타카를 통해서 다음과 같은 방법들을 시도해봤고, 아쉽지만 모두 실패했다. 

 

1. metro.config.js(metro의 설정파일)에서 기존 코드를 주석처리 한 다음에 다음과 같은 코드를 추가해주었다. return 값의 mainFields 값들 중 하나를 진입점으로 보는 것이라고 추측했고, 여기에 기본값인 'index.js/index.ts' 파일 대신에 'app/_layout.jsx' 값을 대신 넣어주었다.

const { getDefaultConfig } = require('metro-config');

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve('react-native-svg-transformer'),
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'jsx', 'js', 'ts', 'tsx'],
      // 여기서 entry 파일을 _layout.jsx로 지정
      mainFields: ['app/_layout.jsx', 'react-native', 'browser', 'main'],
    },
  };
})();

 

2. package.json 파일에서 'main' 속성의 값을 기존의 'expo-router/entry' 대신 'app/_layout.jsx' 파일로 바꿔주었다.

{
  "name": "onestep",
  "version": "1.0.0",
  // "main": "expo-router/entry",	// 기존 코드
  "main": "app/_layout.jsx"		// 추가한 코드
}

 

여전히 똑같은 화면이 나왔다. 위에서 시도한 방법들에 대한 내용을 프롬프트로 넣고 다시 GPT에게 문제 해결 방법을 제시해달라고 요청해 봐야겠다. 

 

✅ 궁금한 점

1. metro의 역할은 정확히 무엇일까? 프론트에서 앱이 어떻게 빌드되는지에 대한 이해가 부족한 것 같은데 꼬리질문을 해봐야겠다.