좋은앱개발자가되고싶다

killall -9 node

rm -rf ios/build

react-native run-ios

xattr -d com.apple.quarantine /Applications/Flipper.app 

• yarn add -D babel-plugin-transform-remove-console
  Task actions

  • Convert to task
  • Delete
• babel.config.js 에서 아래와 같이 변경

module.exports = {
//  ...
  env: {
     // ...
    production: {
      //...
      plugins: ['babel-plugin-transform-remove-console'],
    },
  },
};

npx react-native-clean-project

@react-natvigation/native 를 사용하면서

stack을 쌓으며 기존 페이지를 스텍에서 남기지 않고 다른 페이지로 전환을 해야 하는 경우가있었다.

A->B->C 이렇게 페이지 전환을 할때,

A 에서 B로 C 로 이동을 하고, C에서 goBack() 을했을때 A로 이동하고 싶을때

B에서

navigation.replace('C', { param: '파람' });

로 사용하면

스텍이  ABC 로 쌓이지않고, AC로 쌓인다

자연스럽게 배열값에 접근을 하다가

이런 코드를 작성할 일이 생겼다.

콘솔로 찍어보니 해당 데이터들이 key값은 유지되고 value 값들이 null 값들이 나와서

deep copy를 사용했다

해당코드 중 retrun구분을

형태로 바꿔줬더니 정상 작동하였다.

ios js engine 이 업데이트 되고, 기존 react-native-debugger 가 ios real device 에서 정상작동을 하지 않고있다.

그래서 메트로를 통해서 콘솔을 보며 개발하고있었는데

문득

warn no apps connected. sending "reload" to all react native apps failed. make sure your app is running in the simulator or on a phone connected via usb.

이런 에러가 나면서 안되는 문제가 발생했다.

당연히 캐시들을 날리고 시작해보는 시도는 모두 해보았는데,

여전히 디버깅이 안돼서 급한 일정에 초조했다.

stackoverflow에서 어떤 개발자가 

info.plist 에 해당 키값을 추가해보라고했는데,

새로운 키값을 추가하는건 사실 이해가되지않아서 진행하지않았는데

갑자기 메트로가 연결되었다.

문제는 캐시였던것같다.

결국 

1. yarn start --reset-cache
2. yarn start
3. cd ios && pod cache clean --all && pod deintegrate && rm Podfile.lock && pod install
4. rebuild from Xcode and clean the build folder
5. rm -rf node_modules and yarn to install the packages again

가 답이었다.

어떤 프로젝트를 할때마다 항상 한번에 깔끔하게 진행하지 못하는 문제다

getPhotos로 edges 에 해당하는 파일들을 가져올때, ios 는 ph:// 로 시작하는 파일 패스가 나온다.

항상 

이런식으로 ios용으로 form-data 에 들어갈 파일들의 path 를 파싱해주는 함수를 사용한다.

기존에 portrait mode / landscape mode 를 확인하기위해 

const useScreenDimensions = () => {
  const [screenData, setScreenData] = useState(Dimensions.get('screen'));

  useEffect(() => {
    const onChange = (result) => {
      setScreenData(result.screen);
    };

    Dimensions.addEventListener('change', onChange);

    return () => Dimensions.removeEventListener('change', onChange);
  });

  return {
    ...screenData,
    isLandscape: screenData.width > screenData.height,
  };
};

해당하는 훅을 잘사용했는데

이제 훅을 아예 RN에서 만들어줬다

해당훅의 return 타입은

이며

로 사용하면 된다. 

내가 보려고 작성하는 typescript 정리

1. 배열에서 객체의 타입을 지정해주기

json파일에서 가져온 배열의 객체 타입을 따로 타입을 지정하는데 어려움이 있어

이런 방식으로 해결했다.

2. NonNullable ts util 사용하기

NonNullable ts util을 사용하면 파라미터값의 type을 따로 지정해주지않아도된다.

참고

https://www.typescriptlang.org/docs/handbook/utility-types.html