[React-native TIL]npm start 오류 TypeError: Invalid character in header content ["X-React-Native-Project-Root"]

react native 프로젝트르 생성후 npm start를 해주었더니...

npm start로 web열기

web으로 열수가 없다.....무슨 문제일까 봤는데

이렇게 설치하라고 해서

$ npx expo install react-native-web react-dom @expo/metro-runtime

설치해주었더니

웹에서 잘 열린다! 웹에서 열리는데.... 문제는 expo go 앱에서 안드로이드에서 안열리는 것이다...
qr 찍어서 expo go 앱 들어가 보니 아래와 같이 안열린다...

npm start로 안드로이도 앱 열기

구굴링해서 찾아봤더니 작업하고있는 컴퓨터와 동일한 무선 네트워크에 연결해야 한다는 것이다.

그래서 같은 네트워크로 연결해주었다. 그래도 아래와 같이 에러가 발생하였는데

TypeError: Invalid character in header content ["X-React-Native-Project-Root"]

열심히 구굴링해본 결과 아래와 같은 글을 발견했고


https://github.com/react-native-community/cli/issues/2279


node_modules/@react-native-community/cli-server-api/build/statusPageMiddleware.js에서

위의 코드를 아래와 같이 process.cwd()를 새 URL()로 래핑했다.

그리고 다시 npm using npm cache clean --force를 해주었는데 또 안먹힌다...쩝

그래서 또 열심히 구굴링을 해본 결과 아래와 같은 글을 찾았고


https://velog.io/@zzaoman/npm-cache-%EB%AC%B8%EC%A0%9C

npm cache verify을 하였더니

npm start를 하고 expo go앱에서 qr을 찍었더니... 잘돌아간다!!!!! react-native 환경설정하는 과정에서 node버전을 맞추려고 다운그레이드하였더니 npm 버전이 제각각 설치되어서 버전 꼬임이 발생한 것 같다.

웹

안드로이드 모바일

dev-tools UI는 새 버전의 CLI에서 삭제되었습니다.

그런데.....web으로 열었을시 웹만 열리고 expo devtools가 실행이 안되는 것이다...구글링을 해보니...


https://blog.expo.dev/sunsetting-the-web-ui-for-expo-cli-ab12936d2206

dev-tools UI는 새 버전의 CLI에서 삭제되었습니다. Expo SDK 45-46을 사용하면 더 이상 존재하지 않는다는 것이다!! 굳이 위에서 웹에서 열려고 노력했던 것들이 물거품...호호