728x90

reactnative 설치 (xcode깔려있어야함.)

yarn ios 로 빌드 되는지 확인 !

 

 

빌드 fail경우 

cd ios

pod deintegrate (pods폴더 삭제)

pod cache clean --all (캐시 삭제)

(혹시 안되면 pod install --repo-update)

xcode preference에 들어가서 derived 폴더 안에 삭제. 

이거는 pod install 하면 다시 생김! 

(뭔말인지 모르겠으면 밑에 링크 참고)

 

yarn 

yarn ios

 

 

 

이제 

 

firebase project만들기

https://firebase.google.com/

 

Firebase

Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다.

firebase.google.com

 

Add project

 

프로젝트 이름 넣고 

디폴트 내 계정으로 시작!

 

 

 

다음부터는 쭉 따라하면 되는데 

번들id는 xcode에서 가져와서 붙여넣기 하면 된다. 

(xcode에서 원하는 프로젝트파일 열고, 왼쪽의 프로젝트 파일 누르면 이거 뜸

General 들어가서 

Bundle Identifier 의 값을 복붙하면 됨다. )

 

 

 GoogleService-Info.plist 파일을 

firebase 프로젝트 만드는 곳에서 다운받아서

프로젝트 안에 넣는다 (위치는 거기서 알려줌.)

 

 

그다음에 

AppDelegate.m

에 

 

#import <Firebase.h>

와 

[FIRApp configure];

만 추가!

 

[FIRApp configure]; 이거는 (Bool)로 어플리케이션 실행하는 함수로 보이는 거 하단에 {} 넣어줌. 

위치는 마찬가지로 프로젝트 설명란에 있는데 각자 코드에 맞게 넣으면 된다..

 

 

특이점은 

appPackage를 다운받지 않았다. 

다음단계에서 링크로 들어가서 analytics다운 받는게 있는데 그걸 하지 않고

 

yarn add @react-native-firebase/app

yarn add @react-native-firebase/analytics

 

로 추가했다. (여기에 이미있다고함..)

 

 

아 그리고 analytics는 app과 같은 버전으로 맞춰줘야한다!

 

 

그리고 firebase.json파일을 보면

 

// <project-root>/firebase.json
{
  "react-native": {
    "analytics_auto_collection_enabled": false
  }
}

 

 

false로 꺼져있다.

잘은 모르겠지만 이게  GDPR compliance 정책상으로 꺼져있다고 한다.

앱실행될때 자동으로 집계하게끔 하는게 꺼져있는 것이다. 

대신 이벤트처리하듯

홈화면 들어갈 때 메서드를 이용해서 집계하는 방법을 쓰면 된다.

 

 

To re-enable analytics (e.g. once you have the users consent), call the setAnalyticsCollectionEnabled method:

import { firebase } from '@react-native-firebase/analytics';
// ...
await firebase.analytics().setAnalyticsCollectionEnabled(true);

https://rnfirebase.io/analytics/usage

 

Analytics | React Native Firebase

Copyright © 2017-2020 Invertase Limited. Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. Some partial documentation, under the

rnfirebase.io

 

 

프로젝트 예시 홈화면 들어갈때 추가되도록 했다. 

  const activateAnalytics = async () => {
    await firebase.analytics().setAnalyticsCollectionEnabled(true)
  }
  useEffect(() => {
    activateAnalytics()
  }, [])

 

 

 

 

 

 

 

 

 

 

에러 해결방법 참고한 것들

https://developer.apple.com/forums/thread/703823

 

Xcode 13.3 spits "Requested but di… | Apple Developer Forums

MrtnFbg's answer inspired me to read more about redirections of streams. So I read about Linux STDOUT STDERR. In this specific case when I run this command, there is an output and there are some errors. Since I ran this command on terminal and on terminal

developer.apple.com

https://positiveko-til.vercel.app/til/react-native/error65.html

 

에러 해결🔑 error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. | Positiveko

에러 해결🔑 error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65. 리액트 네이티브에서 가장 유명한 에러가 아닐까.. (아니 나참.. 리네 = 에러 픽스 90 + 개발 10 같다.. 후) 이

positiveko-til.vercel.app

 

 

 

 

 

https://rnfirebase.io/analytics/usage

 

Analytics | React Native Firebase

Copyright © 2017-2020 Invertase Limited. Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 3.0 License, and code samples are licensed under the Apache 2.0 License. Some partial documentation, under the

rnfirebase.io

 

728x90
728x90

yarn build시 에러

 Build optimization failed: found page without a React Component as default export in
pages/types

 

error Command failed with exit code 1.

 

 

페이지마다 export default ,

default를 기본으로 하는애가 있어야한다고 이해해서 

페이지 types에 없어서 그런가 해봤는데 해결안됨

오히려 타입안에 인터페이스에 default붙이니까 못읽음

 

 

 

 

찾아보다가 

 

 

구성 요소를 페이지 폴더 외부로 이동해야 합니다. Pages/ Next.js 라우팅이 구조를 기반으로 하므로 페이지 구성 요소에만 사용해야 합니다 

Next.js에는 페이지 개념을 기반으로 구축된 파일 시스템 기반 라우터가 있습니다. 

파일이 페이지 디렉토리에 추가되면 자동으로 경로로 사용할 수 있습니다. 

위의 동작이 기본 동작이지만 페이지 디렉토리에 페이지가 아닌 파일을 포함하도록 Next.js 앱을 구성할 수 있습니다. 

이렇게 하려면 아래와 같이 next.config.js 파일의 pageExtensions 항목을 수정하면 됩니다. 그런 다음 .page(_document.page.js, _app.page.js, index.page.js )를 포함하는 파일 확장자를 갖도록 페이지 구성 요소의 이름을 바꿉니다.

 module.exports = {

    pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js']

}

이 구성을 사용하면 Next.js는 페이지/API 경로 및 라우팅을 구축하기 위해 .page를 포함하지 않는 모든 파일을 무시합니다.

 

 

 

이거보고 next.config.js에서 페이지별 설정 넣어야한다는 공식문서보고 혹시 넣어봤는데 build되네 호..

잘 모르겠음 그리고 빌드를 하면 out에 서버페이지가 생기는 거 맞나? 

dev는 개발모드고

정확한 차이를 정리해봐야겠다.

 

 

 

 

이 공식문서 봄

https://nextjs.org/docs/api-reference/next.config.js/custom-page-extensions#including-non-page-files-in-the-pages-directory

 

 

 

next.config.js

파일에 이거 추가함

module.exports = {
  pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js'],
}

 

 

다시 원위치..

 

 

문제는 이거를 넣으면 

기존 경로

local:3000 이 404로 페이지를 찾을 수 없다고 뜨고 안열린다. 

 

원래대로 지워줘야 뜨네 흠.. 

 

아 문서를 읽어보니 

pageExtensions를 넣고 나서 

이름을 바꿔줘야되는구나 

 

이름 바꿔줌

 

 

해결됨

 

라고 생각했는데 안떠서 다시..

 

https://stackoverflow.com/questions/65598753/cant-build-react-next-project-found-page-without-a-react-component-as-default

 

 

 

Can't build React/Next project - found page without a React Component as default export (context api file)

I'm trying to build my Next.js project but it keeps giving me this error in the terminal: Error: Build optimization failed: found page without a React Component as default export in pages/components/

stackoverflow.com

 

728x90

+ Recent posts