1일 1개발공부˙Day 14(Day 20)

어쩌다보니 6일을 빼먹은 챌린지..
이미 챌린지 실패(?)이지만
그래도 끝까지 완주는 해보고 싶어서
계속 참여하도록 하겠습니다,,
졸업논문 심사가 얼마 안 남았는데
아직 프로젝트 합치는게 해결이 안돼서
기록보다는 해결이 급하다보니
기록을 자꾸 미루게 되더라구요ㅠㅠㅠ
아무튼 오늘 기록 이어가겠습니다!

---

일단 지금까지의 모든 시도는 실패..
대체 왜 이러는지 전혀 감이 안 온다
각각의 프로젝트는 잘 돌아가는데
합치려고 하면 전혀 작동하지 않는...ㅠㅠㅠ

오늘 할 것은
한 단계 한 단계 따라하면서 어느 시점부터 작동이 안 되는지 볼 것이다
시간이 정말 오래 걸릴 것 같은데
(아마 하루 종일 이것만 하고 있을지도)
일단 어디부터 문제인지를 봐야할 것 같다
기능만 작동을 안 하면 이해를 하겠는데
아예 화면도 안 나오고 navigation도 안 먹히는건
뭐가 문제냐구요ㅜㅠㅠ

📁try14

일단 package.jason부터 손을 봤다
expo(아마도 sdk)버전이 다른 것이 신경쓰였기 때문이다
다른 조원이 만든 베이스 프로젝트는 43
내가 만든 캘린더는 46이었다
일단은 베이스 프로젝트를 43에서 46으로 바꾼 후
yarn install을 했다
그런데 그 후 부터 계속 에러가 반복된다
아마도 구 버전에서만 적용되는 무언가가 있는 듯 하다
이 문제를 끝까지 해결해보고
안되면 캘린더를 43으로 다운그레이드해볼 예정

Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.
https://stackoverflow.com/questions/71702392/viewproptypes-will-be-removed-from-react-native-migrate-to-viewproptypes-export

ViewPropTypes will be removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types

아....쓰던 글 날라감....
TypeError: undefined is not an object (evaluating 'Object.keys(_reactNative.ViewPropTypes)')

Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.
https://akashmittal.com/code-example-viewproptypes-has-been-removed-from-react-native/

ViewPropTypes has been removed from React Native - Code Example

https://www.npmjs.com/package/patch-package

patch-package

  get ColorPropType(): $FlowFixMe {
    invariant(
      false,
      'ColorPropType has been removed from React Native. Migrate to ' +
        "ColorPropType exported from 'deprecated-react-native-prop-types'.",
    );
    return require('deprecated-react-native-prop-types').ColorPropType;
  },
  get EdgeInsetsPropType(): $FlowFixMe {
    invariant(
      false,
      'EdgeInsetsPropType has been removed from React Native. Migrate to ' +
        "EdgeInsetsPropType exported from 'deprecated-react-native-prop-types'.",
    );
    return require('deprecated-react-native-prop-types').EdgeInsetsPropType;
  },
  get PointPropType(): $FlowFixMe {
    invariant(
      false,
      'PointPropType has been removed from React Native. Migrate to ' +
        "PointPropType exported from 'deprecated-react-native-prop-types'.",
    );
    return require('deprecated-react-native-prop-types').PointPropType;
  },
  get ViewPropTypes(): $FlowFixMe {
    invariant(
      false,
      'ViewPropTypes has been removed from React Native. Migrate to ' +
        "ViewPropTypes exported from 'deprecated-react-native-prop-types'.",
    );
    return require('deprecated-react-native-prop-types').ViewPropType;
  },
};

유튜브에서 찾은 영상은 이렇게 invariant 밑에 return을 넣었고
위에 stackoverflow에선 return만 넣었다
뭐가 맞는지는 모르겠는데
새벽에 했을 때 return만 넣어서 안 됐으니까(?)
(사실 코드가 갑자기 원래대로 바뀌어 있어서 제대로 했던건지 모르겠다😵‍💫)
유튜브 영상대로 해보기
return만 넣었을 때는 그 다음 단계에서 에러 났는데
이번에는
npx patch-package react-native
성공
근데 아직도 웹에서 안 열린다

expo앱에서도.. 같은 오류가 자꾸 난다
Invariant Violation: ViewPropTypes has been removed from React Native. Migrate to ViewPropTypes exported from 'deprecated-react-native-prop-types'.

뭐라도 해보자 하는 마음으로
expo-cli upgrade
Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from`
https://stackoverflow.com/questions/72927722/export-namespace-should-be-first-transformed-by-babel-plugin-proposal-export-n

Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from`

아가가가가가각
일단 된다!!!

AsyncStorage has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '@react-native-async-storage/async-storage' instead of 'react-native'. See https://github.com/react-native-async-storage/async-storage

GitHub - react-native-async-storage/async-storage: An asynchronous, persistent, key-value storage system for React Native.

src/components/index.js

import Button from './Button';
import Image from './Image';
import Input from './Input';
import ErrorMessage from './ErrorMessage';
import Spinner from './Spinner';

import FloatingWriteButton from './FloatingWriteButton';
import FeedList from './FeedList';
import FeedListItem from './FeedListItem';

export { Button, Image, Input, ErrorMessage, Spinner, FloatingWriteButton, FeedList, FeedListItem };

필요한 것들을 더 설치하는데
$ patch-package
patch-package 6.4.7
Applying patches...

**ERROR** Failed to apply patch for package react-native at path

node_modules/react-native

This error was caused because react-native has changed since you
made the patch file for it. This introduced conflicts with your patch,
just like a merge conflict in Git when separate incompatible changes are
made to the same piece of code.

Maybe this means your patch file is no longer necessary, in which case
hooray! Just delete it!

Otherwise, you need to generate a new patch file.

To generate a new one, just repeat the steps you made to generate the first
one.

i.e. manually make the appropriate file changes, then run

patch-package react-native

Info:
Patch file: patches/react-native+0.69.6.patch
Patch was made for version: 0.69.6
Installed version: 0.69.5

---
patch-package finished with 1 error(s).
Done in 12.13s.

이런 오류가 난다,,
https://lightrun.com/answers/ds300-patch-package-error-failed-to-apply-patch-for-package-react-native-at-path-after-deleting-node_modules

"**ERROR** Failed to apply patch for package react-native at path" After deleting node_modules

Unable to resolve "@react-navigation/native-stack" from "src\screens\RootStack.js"
yarn add @react-navigation/native-stack



AsyncStorage has been extracted from react-native core and will be removed in a future release. It can now be installed and imported from '@react-native-async-storage/async-storage' instead of 'react-native'. See https://github.com/react-native-async-storage/async-storage

Error: Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass 'independent={true}' explicitly. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them.
그래..차라리 이렇게 오류를 띄워줘,..
아무런 오류 없이 화면만 안 뜨면 답답해 죽어요
네비게이션을 줄여보자...
어떻게 줄여야할지 모르겠지만..
다 필요한 네비게이션 태그 같지만..
어떻게든 줄여보자...

FeedsScreen에 있던 floatingButton도 CalendarScreen으로 옮김
그럼 Calendar Screen이 모든 기능을 할 수 있으니
FeedsScreen과 MainScreen을 삭제함
RootStack의 MainScreen을 CalendarScreen으로 바꿈
하지만 여전히 NavigationContainer 중복 문제가....
src/screens/Calendar의 NavigationContainer를 삭제해야하는 듯 한데,,,
괜찮은건가ㅠㅠㅠㅠㅠ

원본 Calendar.js

...

import {NavigationContainer} from '@react-navigation/native';

...

function Calendar() {
  return (
    <NavigationContainer>
        <LogContextProvider>
          <RootStack />
        </LogContextProvider>
    </NavigationContainer>
  );
}

...

드디어ㅠㅠㅠㅠ화면도 뜨고 기능도 작동한다!!!ㅠㅠㅠㅠㅠㅠㅠ
🎉🎉🎉🎉🎉

일단 expo go 앱에서는 실행됐으니
apk파일을 만들어보려고 했는데
Accessing credentials for (아이디) in project (이전프로젝트이름)
read ECONNRESET
Error: read ECONNRESET
at (혹시나해서..올리지 않기)
하는 에러가 떴다
아마 전에 작업하던 프로젝트에 저 계정이 연결되어
새로운 apk가 만들어지지 않는 게 아닌가 싶은데..
구글링해도 딱히 나오는 건 없다..
빨리 apk파일 만들어보고 싶은데ㅠㅠㅠㅠ

명령어 다시 실행하니까
일단 진행되고는 있다

apk까지 성공했습니다ㅠㅠㅠ!!!!!!!!!!!!