왜인지 모르게 npm install로 npm install --save @react-native-vector-icons/fontawesome5이런식으로 설치를 해주고 나서 import FontAwesome5 from '@react-native-vector-icons/fontawesome5'; 을 하면 icon을 가지고 오지 못해서 [runtime not ready]: Invariant Violation: TurboModuleRegistry.getEnforcing(...): 'VectorIcons' could not be found. Verify that a module by this name is registered in the native binary., js engine: hermes, stack: invariant@2200:25~ 위에와 같은 오류가 발생합니다,,, font가 제대로 카피되지 않아서 벌어지는 일 같아용,,, 그래서 여러가지 시도해본 결과 다른거 할 필요없이 import FontAwesome5 from '@react-native-vector-icons/fontawesome5'; 이런식으로 Icon이 아니라 FontAwesome5를 해주니까 되더라구요,,? 그런 후에 다시 import Icon from '@react-native-vector-icons/fontawesome5'; 이렇게 Icon으로 해주니까 font들이 제대로 카피가 되더라구요,,? 위에 사진처럼 복사되면 제대로 된거죠? (Icon 잘 나옵니다,,) 혹시 바로 import Icon했을때는 왜 안된건지 아실까요?
강의 설명에서는 아래 사진처럼 되어져 있는데 -> false의 위치가 틀렸어요 이게 맞습니다(아래 사진) 아마 1번 사진처럼 하면, Info.plist오류라고 뜨면서 앱이 실행이 안됩니다! 2번 사진처럼 붙여넣어주셔야 합니다,, 제대로 설정되면 Info.plist를 Property List로 열었을때 오류 없이 잘 열릴꺼에요(1번 처럼하면 PropertyList 안열림) 열려서 Fonts provided by application에 추가한 폰트들이 잘 들어가져있다면 잘 설치된거에요~ cf1) 이렇게 했는데 갑자기 잘 안된다면 podfile제거하고 다시 설치해보세용 cd ios pod deintegrate pod install 이렇게 하시면 되용 cf2) 만약에 No script URL provided. Make sure the packager is running or you have embedded a JS bundle in your application bundle. unsanitizedScriptURLString = (null) 이런 에러가 뜨면 터미널로 가서 npm start해주면 됩니다.. 저처럼 헷갈리시는 분들이 있을까봐 남겨용 학습에 관련된 질문만 해주세요. 질문은 상세하게 무엇이 궁금한지 작성해주세요. 질문은 '마크다운'을 사용하여 할 수 있습니다. 유사한 질문이 있었는지 살펴보고 질문 해주세요. 부담갖지 말고 강의에서 궁금하신 점 전부 질문해주세요 :)
안드로이드 설정 과정이 전체가 약간 헷갈려있게 되어있는 것 같아서,,, 이게 맞는지 궁금해서 남깁니다 npm i react-native-splash-screen --save 을 통해서 npm을 설치한다 앱로고와 스플래시 화면을 준비해준다 아래 사이트에서 앱 로고를 만들어준다 EasyAppIcon - Create Mobile App Icon 앱 아이콘들을 android폴더에 넣어준다 android/app/src/main/res의 아래에 mipmap-hdpi~로 시작하는 파일들에 이름에 맞춰서 앱 아이콘들을 넣어준다 스플래시 화면(아마도 이미지)을 android/app/src/main/res/drawable폴더에 넣어준다 반드시 launch_screen이라는 이름으로 넣어준다 -> launch_screen.png android/setting.gradle에 가서 아래처럼 설정해준다 include ':react-native-splash-screen' project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android') android/app/build.gradle (113번 줄) implementation project(':react-native-splash-screen') android/app/src/main/java/com/coin/MainActivity.kt에 7번째 줄에 import android.os.Bundle; import org.devio.rn.splashscreen.SplashScreen; android/app/src/main/java/com/coin/MainActivity.kt에 12~15번째 줄에 override fun onCreate(savedInstanceState: Bundle?) { SplashScreen.show(this) super.onCreate(null) } . . . /Main Application .kt (14번 줄)에 import org.devio.rn.splashscreen.SplashScreenReactPackage . . . /Main Application .kt (24번 줄)에 SplashScreenReactPackage() 스플래시 화면을 숨겨주기 위해 App.tsx에 아래 내용을 추가해준다 useEffect(() => { setTimeout(() => { SplashScreen.hide(); }, 500); }); // 의존성 배열 없음 - 매 렌더링마다 실행됨 values.colors.xml파일을 만들어서 아래 내용을 추가해준다 <?xml version="1.0" encoding="utf-8"?> <resources> <!-- 다른 색상들이 있다면 유지하세요 --> <color name="status_bar_color">#000000</color> <!-- 원하는 색상 코드로 변경 가능 --> </resources> 질문1. 잘 나오는 것 같기는 한데 총 과정이 이게 맞을까요? 질문2. 그리고 스플래시화면이 뜨기 전에 앱 로고가 전체적으로 뜨고(흰바탕에 설정한 앱 로고가 중앙에 작게 나옴) 스플래시 화면이 뜨는데 원래 이런거 맞나요? 질문3. 그리고 values/colors.xml파일은 왜 설정해주는 건가요?
iOS에서 splash screen을 RN에서 설정해보기 위해서 RN으로 작업을 해봤는데요,,, AppDelegate파일에서 import RNSplashScreen에서 pod install을 하고 진행을 했는데도 모듈을 찾을 수 없다고 뜨더라구요ㅠ podfile에는 RNSplashScreen가 있는거는 확인했습니다.. 그러므로 설치는 된 거 같은데,, 프로젝트가 모듈을 못찾는 것 같아요ㅠ 다른 프로젝트 참고해보려고 해도, 저는 AppDelegate.swift파일이고 .h파일이나 .m파일은 없어서 여기서 설정을 하지를 못하겠어요ㅠ (cf. 찾아보니까 해당 라이브러리가 옛날버전이고 지금 RN의 iOS랑 호환이 되지 않아서 발생하는 문제 같은데, 이때 브릿징 헤더를 설치해야 한다고 본거 같아요 => 이 문제가 맞을까요?) 강의가 android기준으로만 설명되서,,, 혹시 RN으로 어떻게 iOS 스플래시 화면을 설정해야 하는걸까요? 학습에 관련된 질문만 해주세요. 질문은 상세하게 무엇이 궁금한지 작성해주세요. 질문은 '마크다운'을 사용하여 할 수 있습니다. 유사한 질문이 있었는지 살펴보고 질문 해주세요. 부담갖지 말고 강의에서 궁금하신 점 전부 질문해주세요 :)
프로젝트를 수행하는데 당장의 문제는 없는거 같아서 진행하고있었는데 계속해서 로그에 오류가 발생해서 질문드려봅니다. 로그인/로그아웃시 오류가 발생하고 있습니다 터미널에서는 (NOBRIDGE) ERROR [TypeError: unsubscribe is not a function (it is undefined)] 이런 오류로 뜨고 기기에서는 이런식의 오류코드가 나옵니다.
현재 RN0.77 버전으로 프로젝트를 하고있는데, react-native-vector-icons가 강사님께서 강의를 찍으신 당시와 좀 바뀌어서 몇 개의 아이콘 종류들은 사라지고 다른 것들로 대체되거나 몇개는 기존 것이 있는 상황입니다. 근데 옛날과 다르게 github문서( https://github.com/oblador/react-native-vector-icons )의 과정과 강사님의 과정이 좀 차이가 있어서 다음과 같이 수행했습니다. 1. 라이브러리 설치 ```npm install --save @react-native-vector-icons/common``` 에서 common을 제외하고 받았습니다. 2. node_modules 에서 ttf파일 추출 후 Fonts폴더 생성 후 그곳에 넣기 추후에 build phase에서 적용된 것 확인함(5-3 강의 16분23초 쯤인가 그 과정) 3. 라이브러리 호출 후 사용 이 때 계속 아이콘이 깨져서 나옵니다 RN버전이랑 안맞는 건지, 아니면 공식문서와 강의의 설정이 차이가 있는지 잘 모르겠네요. import icon from '@react-native-vector-icons/ionicons 로 호출하게 되면 에러메시지는 안뜨지만 사진처럼 나오고, import icon from 'react-native-vector-icons/ionicons 로 하게되면 아래와 같은 에러 로그가 나옵니다. ``` Error: Unable to resolve module react-native-vector-icons/ionicons from /Users/juhkang/Documents/Github/ReactNative/matzip/Matzip_FE/src/navigations/drawer/MainDrawerNavigator.tsx: react-native-vector-icons/ionicons could not be found within the project or in these directories: ``` 77버전에서 react-native-vector-icons를 자유롭게 사용하고 싶은데 해결책이 있을까요?
강의를 한번 완주하고 다시 복습하는 겸 발생했던 문제들과 해결 방법들에 대해 간단히 적어 넣습니다. npx react-native@0.72.6 init [프로젝트명] --version 0.72.6 우선 저는 루비 버전 3.2 를 설치하여 사용하고 있습니다. cocoapods 이 정상적으로 설치했음에도 다음과 같이 cocoapods 이 정상적으로 설치 되지 않았다고 나옵니다. ✔ Downloading template ✔ Copying template ✔ Processing template ✔ Installing Ruby Gems ✖ Installing CocoaPods dependencies (this may take a few minutes) error bundler: failed to load command: pod (/Users/park/Desktop/project/myfood/food/vendor/bundle/ruby/3.2.0/bin/pod) /Users/park/Desktop/project/myfood/food/vendor/bundle/ruby/3.2.0/gems/activesupport-7.0.8.7/lib/active_support/logger_thread_safe_level.rb:12:in `<module:LoggerThreadSafeLevel>': uninitialized constant ActiveSupport::LoggerThreadSafeLevel::Logger (NameError) 이럴땐 가볍게 무시하고 cocoapods이 설치 되어있으니 ios 폴더로 들어가서 pod install 명령어를 치면됩니다. cd 프로젝트명/ios pod install 이후에 ios 프로젝트를 실행시킬때 정상적으로 작동하면 다행이지만 터미널이 위의 사진과 같이 실행되고 멈추는 현상이 있을 경우 해결 방법은 다음과 같습니다 우선 Xcode 를 실행시켜주고Open Existing Project로 프로젝트를 열어줍니다. 사진은 tttt 지만 강의를 들으신다면 아마 Matzip 일 겁니다. xcworspace 를 열어주시고 좌측 메뉴에 Pods → Flipper → FilpperTransportTypes 파일로 가서 사진처럼 #include <functional> 코드를 넣어주면 다시 vscode로 가서 실행시켜주면 아마 될 겁니다. 왜 이런 오류가 나는지는 잘 모르겠지만 저와 같은 문제로 고생 안했으면 싶어서 올립니다.
안녕하세요 회원가입창에서 요청자체가 가질 않는데 어떻게 해야하나요? ios입니다. 오류난것도 없고 서버 다 킨 상태입니다. ❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github 을 첨부해주세요. 개발중인 OS, ReactNative, Node 버전 등의 개발환경 을 알려주셔야합니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. ( 일부만 자르거나 일부만 복사하지말아주세요 .)
공익을 위해 첨부합니다... Windows의 경우 Mac과 다른 방식으로 경로가 설정되는 탓인지 상품 업로드 후 홈화면에서 상품이미지가 엑박으로 보이는 오류가 발생합니다. 그동안 질문&답변 게시판에 올라온 모든 질문 및 답변을 참고해 해결을 해보고자 하였는데요, 그 어느 답변을 참고해도 해결이 되지 않아 눈물을 머금고 10분짜리 강의에 몇시간동안 매달려있었습니다. 그렇게 알게된 방법은... 저의 경우 (1) 상품 업로드 화면에서 사진을 첨부한 후 개발자 도구의 Network에서 첨부한 사진의 링크를 보면 http://localhost:8080/upload/(상품이름).jpg 이런 식으로 뜹니다. (2) 업로드 버튼을 누른 후 홈 화면으로 이동 (3) 개발자 도구의 Network에서 새롭게 업로드된 사진의 링크를 보면 http://localhost:3000/upload/(상품이름).jpg 이런 식으로 뜹니다. 이를 해결하기 위해, grab-market-web 폴더 (사용자에 따라 폴더 이름은 다를 수 있음) → src → main → index.js에서 product-card 의 product-img 부분을 확인합니다. <div> <img className="product-img" src={`${API_URL}/${product.imageUrl}`} ></img> </div> src 링크를 다음과 같이 변경합니다. 그럼 상품 업로드 화면에서의 이미지와 홈화면에서의 이미지가 localhost:8080로 동일해지기 때문에 상품 사진이 정상적으로 보입니다. 물론 이렇게 코드를 수정하고 나면 기존에 저장해놨던 상품들의 이미지에 엑박이 뜹니다. (images/products/__ 이런 식으로 폴더 내 이미지와 연결해둔 링크들이 http://localhost:8080/images/products/__ 처럼 변경되니 엑박이 뜨는 것으로 추정됩니다.) 어차피 이제 사진을 서버에 직접 업로드하는 방법으로 진행될 예정이니 그냥 기존의 상품들은 삭제하시면 될 것 같습니다. (DB Browser → 데이터 탐색 → 기존 상품 레코드 선택 → 현재 레코드 삭제하기 → 변경사항 저장하기 이용하면 삭제 가능합니다.) 저와 동일한 이유로 엑박 뜨는게 아니라면... 저도 모르겠습니다. 방법을 찾으시면 공유해주세요. 파이팅! +) 상품 상세페이지를 들어가면 다시 엑박이 뜹니다. <div id="image-box"> <img src={`${API_URL}/${product.imageUrl}`} /> {console.log(product.imageUrl)} </div> 이때는 product 폴더의 index.js에 들어가여 image-box 부분을 다음과 같이 변경해주세요. 원리는 위와 동일합니다. 그러면 상세페이지에서도 정상적으로 작동합니다.
안녕하세요? 강의관련 환경 설정 중 막힌 부분이 있어서 질문드립니다. 현재 환경 설정은 rn75 폴더에서 시작하여 openJDK 11 안드로이드 13.0 티라미수 (api 33) 넥서스5 안드로이드 13.0 티라미수 (api 33) x86_44 gradle 버전 7.2 위에 3번 환경설정까지 셋팅 후 npm run android를 실행하면 첨부드림과 같이 최신 gradle(8.x) 버전에서는 Java 17을 사용해야 한다고 하여 jdk 11버전을 공식 지원한다고 찾아본 7.x버전으로 낮추어 다시 명령어를 입력해보았지만 동일한 상황입니다. 혹시 제가 누락한 부분이 있을지 궁금합니다...!
7.15 :: 상태 변수와 컴포넌트 언마운트 강의 부분에서 SIGN IN 과 SIGN UP 버튼으로 이동시 (NOBRIDGE) LOG SignIn Mount (NOBRIDGE) LOG SignUp Mount (NOBRIDGE) LOG SignIn Mount 로그에 이렇게만 표시가 되고있는 상태입니다. SignUp UnMount 가 되지 않는 상태인데 어떤부분에서 잘못됐는지 찾지를 못해서 질문드려봅니다. 감사합니다! 깃주소입니다. https://github.com/dvrakry/rn-photo
❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github 을 첨부해주세요. 개발중인 OS, ReactNative, Node 버전 등의 개발환경 을 알려주셔야합니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. 제대로 체크되었는지 봐주실 수 있나요? Android 15.0 ("VanillaIceCream")은 처음부터 체크되어있었습니다!
❗ 질문 작성시 꼭 참고해주세요 에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다. 질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github 을 첨부해주세요. 개발중인 OS, ReactNative, Node 버전 등의 개발환경 을 알려주셔야합니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. 일부만 보여주시면 답변이 어렵습니다. Java Development Kit 설치부분 코드가 영상에 나온 부분과 제가 보고있는 부분의 코드가 달라 문의드립니다. 상관없는건가요 혹시? <영상> brew tap homebrew/cask-versions brew install --cask zulu11 brew info --cask zulu11 <현재 링크 들어갔을때 보이는 부분> https://reactnative.dev/docs/set-up-your-environment?platform=android
안드로이드는 빈 하얀화면과 아이폰 빈 까만화면으로 나오는데 버전문제인지 도저히 모르겠어서 질문드립니다... 처음에 실행했을 때 로그에 "react-native-safe-area-context": "^4.12.0", "react-native-screens": "^4.4.0" 이 두 부분 버전때문에 제대로 실행이 안될수도 있다고 expected 되는 버전이 나와서 저 두 부분을 npm uninstall 후 expected 버전으로 수정한후 실행한건데도 그대로 빈화면이 출력됩니다.... 7.3 AuthStack 컴포넌트 만들기 부분에서 화면 출력(SignInScreen부분)이 안되는 상태입니다 실행시 vscode 로그화면 › Scan the QR code above with Expo Go (Android) or the Camera app (iOS) › Using Expo Go › Press s │ switch to development build › Press a │ open Android › Press w │ open web › Press j │ open debugger › Press r │ reload app › Press m │ toggle menu › shift+m │ more tools › Press o │ open project code in your editor › Press ? │ show all commands Logs for your project will appear below. Press Ctrl+C to exit. Android Bundled 1325ms index.js (878 modules) (NOBRIDGE) LOG Bridgeless mode is enabled INFO 💡 JavaScript logs will be removed from Metro in React Native 0.77! Please use React Native DevTools as your default tool. Tip: Type j in the terminal to open (requires Google Chrome or Microsoft Edge).
