본문 바로가기
반응형

개발로그/ReactNative47

** BUILD FAILED ** pod 캐쉬 삭제 후 재설치 /ExpoModulesCore 업데이트 /xcode 다운그레이드 CompileSwift normal x86_64 (in target 'ExpoModulesCore' from project 'Pods') 제안된 해결방법들 1. pod 캐쉬 삭제 후 재설치 cd ios && rm -rf Pods && pod cache clean --all && pod install && cd .. 2. ExpoModulesCore 업데이트 cd ios pod update ExpoModulesCore 3. xcode 다운그레이드 설치되어있는 xcode 의 버전이 언급되면서 다운그레이드 후 ios빌드가 안되던 문제가 해결되었다는 글을 종종 발견했다. 그래서 다운그레이드 해보기로 함. XCODE 다운그레이드 방법 1. xcode를 삭제한다. 2. 아래 링크에서 하위 버전의 xcode를 다운로.. 2023. 1. 11.
** BUILD FAILED ** Requested but did not find extension point with identifier Xcode.IDEKit.ExtensionSentinelHostApplications for extension Xcode.DebuggerFoundation.AppExtensionHosts.watchOS of plug-in com.apple.dt.IDEWatchSupportCore 내가 해결한 방법을 남겨둔다. Requested but did not find extension point with identifier Xcode.IDEKit.ExtensionSentinelHostApplications for extension Xcode.DebuggerFoundation.AppExtensionHosts.watchOS of plug-in com.apple.dt.IDEWatchSupportCore 이런 에러가 vscode 터미널에 갑자기 발생해서 알아봤다. stactoverflow에서 알아본 봐로는 xcode가 업데이트하면 고질적으로 발생하는 오류가 있는데 대표적으로 저런거란다. commandLineTool을 지우고 재설치하라는 방법도 있는데, 나는 간단한 설정 변경으로 해결하였다. xco.. 2023. 1. 11.
react native 프로젝트에 styled-components 적용하기 Motivation( 적용해야하는 이유) Styled components 는 normal CSS코드를 Native Component 가 써도 스타일 적용을 할 수 있게 해준다. 장점 1) component의 이름을 이해하기 쉬운 단어로 지정할 수 있다. 즉 , 코드를 읽고 이해하기 쉬워진다. 예를 들면 View , touchableopacity -> Btn 장점 2) 쉬운 CSS와 실수 방지 style 적용을 위한 javascript 사용은 CSS코드 작성 방식과 유사하기 때문에 실수를 유발한다. # styled-components 적용 전 const styles = StyleSheet.create({ text: { flex: 1, alignItems: "center", justifyContent: "c.. 2023. 1. 2.
react native 에서 typescript 적용(활성화) 하는 방법 reactnative.dev/docs/typescript 출처: https://reactnative.dev/docs/typescript#adding-typescript-to-an-existing-project 기존에 있는 react native 프로젝트에 typescript를 적용하는 방법입니다. Step 01: Install npm install -D typescript @types/jest @types/react @types/react-native @types/react-test-renderer @tsconfig/react-native Or yarn add -D typescript @types/jest @types/react @types/react-native @types/react-test-rend.. 2023. 1. 2.
node version 변경하기 NVM 명령어 정리 # 노드 버전확인 node -v # 설치된 노드의 리스트(버전) 확인하기 node list # 최신버전의 노드로 글로벌 설치하기 npm install -g npm@latest # 지정한 버전의 node 설치하기 nvm install 16.14.2 #(예) 16.14.2 버전의 node 설치하기 #지정한 버전으로 node 사용하기(선택) nvm use 16.14.2 # 16.14.2 버전의 node 사용하기 # 설치된 최신 버전으로 default 설정하기 nvm alias default node # 지정 버전의 노드 삭제하기 nvm uninstall [version] # 이전 버전의 노드 삭제하기 n prune # change default node version nvm alias default [vers.. 2023. 1. 1.
ReactNative 네비게이터 일반( Stack Navigator , Native Stack Navigator 차이점) 리엑트 네이티브에서 네비게이션(페이지 이동)을 구현하려면 두가지 선택권이 있다. 하나는 Stack Navigator 이고 나머지 하나는 Native Stack Navigator 이다. 어떤것을 선택할지는 각각 어떤 차이가 있는지 알아보면 결정하기 쉬울 것이다. @react-navigation/stack stack 네비게이터 동작 모습 Stack Navigator (스택 네비게이터) Android 와 IOS의 look& fell 에 친숙할 수 있도록 구현되었다. 무슨말이냐면 Stack Navigator 로 구현하면 하나의 코드로 IOS에서는 IOS 의 모습으로 Android에서는 안드로이드의 모습으로 보인다는 뜻이다. 단, 애니메이션은 커스터마이징 할 수 있다. 스택 네비게이터는 자바스크립트로 구현되고, .. 2022. 12. 30.
리엑트네이티브 어플리케이션 생성 방식 종류와 차이점 정리 1) npx react-native 방식 npx react-native init AwesomeProject 아무것도 설치되지 않은 기본만 설치된다. 화면에 아무것도 표시되지 않는다. 그도 그럴 것이 아무것도 기본제공되지 않기 때문이다. 자주 사용하는 TypeScript , React Navigation , AsyncStorage 등도 제공되지 않아 추가 설치해야 한다. 처음에 기능을 찾아 설치하는 연습용으로 맞춤이다. 2) Ignite CLI 사용 Ignite(이그나이트) 는 React Native 앱을 생성해주는 CLI(Command-line Interface) . 초기세팅을 몇 가지 가지고 앱이 생성된다. npx ignite-cli@latest new PizzaApp PizzaApp 이라는 이름으로 .. 2022. 12. 29.
처음 생성한 프로젝트에 필요없는 부분 삭제하기 with npx create-react-native-app 2022.12.28 - [개발로그/ReactNative] - 비어있는 기본 프로젝트를 생성해보자. create-react-native-app App.js 아래 styles 를 비롯한 App() 의 return 도 null 로 바꿔준다. const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, }); 삭제 전 정리 후 App.js 2022. 12. 28.
반응형