초보개발자의 소소한 기록

* react-native 버전을 [0.61.5 -> 0.63.4] 로 변경 후 빌드 중 발생한 에러 > Task :react-native-firebase_app:compileDebugJavaWithJavac FAILED ... /node_modules/@react-native-firebase/app/android/src/reactnative/java/io/invertase/firebase/app/ReactNativeFirebaseAppInitProvider.java:25: error: cannot find symbol BuildConfig.APPLICATION_ID + ".reactnativefirebaseappinitprovider"; ^ symbol: variable APPLICATION_ID lo..

xcode 버전을 11 -> 12 로 변경한 후, npm install 시 아래와 같은 에러가 발행 gyp: No Xcode or CLT version detected! gyp ERR! configure error gyp ERR! stack Error: `gyp` failed with exit code: 1 gyp ERR! stack at ChildProcess.onCpExit xcode-select 를 재설치 해야함 1. 설치된 경로 찾기 xcode-select --print-path 나의 경우는 ' /Library/Developer/CommandLineTools ' 경로임 2. 삭제 sudo rm -r -f /Library/Developer/CommandLineTools 3. 재설치 xcode-sel..

react-native run-android 실행 시, 빌드는 성공되었는데 앱이 실행되면서 어떠한 error log 도 없이 앱이 crash 나서 종료됨 * 참고 : https://stackoverflow.com/questions/49352114/react-native-app-crashes-without-any-error-log 아래와 같이 했을 시 앱이 정상 실행 됨 1. 단말기에서 앱 실행 후 > crashe 나기 전 Metro 에서 "d" 를 클릭 2. 단말기에서 "debug" 클릭 >앱 재실행 하지만 debug 모드를 종료하면 앱이 crashe 나면서 종료됨 ↓↓↓↓↓ react native 에서 가이드해주는 대로, 아래처럼 logcat 에 필터를 걸어서 찍어보아도 나오지 않음 adb logcat..

React Native Upgrade Helper 를 통해, 0.61.5 → 0.64.0 로 버전 업그레이드 하는 중 에러가 발생 * Upgrade Helper 참고 : https://react-native-community.github.io/upgrade-helper/?from=0.61.5&to=0.64.0 모듈이 제대로 설치 안되었나 싶어, react-native-nested-scroll-view 모듈을 재설치 해주었지만 해결되지 않음 npm i --save react-native-nested-scroll-view 기존 파일과 비교해보니 AnimatedImplementation.js 파일의 위치가 다름 - 정상 (reavt-native v0.61.5) : node_modules > react-nati..

* 기본적으로 gradle 은 아래 위치에 설치되어 있음 /User/{사용자명}/.gradle * 특정 프로젝트에서 gradle 버전을 변경하고 싶다면, 아래 위치에서 버전 정보를 변경 /User/{사용자명}/{프로젝트명}/android/gradle/wrapper/gradle-wrapper.properties distributionUrl=https\://services.gradle.org/distributions/gradle-6.6-bin.zip ↓↓↓ distributionUrl=https\://services.gradle.org/distributions/gradle-6.7-bin.zip * 여기서 주의할 점은, 아래 처럼 gradle wrapper clean 을 하면 6.6 버전으로 계속 초기화됨 /..

1. npm 명령어 모음 * 참고 : https://docs.npmjs.com/cli/v7/commands/npm-install # package.json의 모듈 설치 npm install npm i # 의존성으로 추가 npm install {module_name} --save # 개발 의존성으로 추가 npm install {module_name} --save-dev npm install {module_name} -D # 전역으로 추가 npm install {module_name} --global npm install {module_name} -g # 업데이트 npm update --save # 모듈 삭제 npm uninstall {module_name} --save npm uni # 캐시 삭제 npm ..

본 게시글에서는 우리나라 주변 바다의 위치의 좌표를 저장 후, weather API 로 날씨 정보를 읽어와 FlatList 로 표현한다. * 공공데이터 포털 : https://www.data.go.kr/index.do * 기상청 일일예보 : https://www.weather.go.kr/w/ocean/forecast/daily-forecast.do 1. 날씨를 확인할 위치 설정 및 Data.js 파일을 생성하여 좌표값 저장 * 기상청 지도에서 대략적인 해양 경계범위를 확인하고, 구글 지도에서 좌표를 가져옴 * 실제 프로젝트를 진행하면 DB를 별도로 구성하지만, react native 공부 목적으로 소스 내에 위치 정보를 저장함 # screens > WeatherData > Data.js export co..

본 게시글에서는 Open API 를 호출해 날씨 데이터를 읽어온다. 1. API request 를 위해 axios module 추가 * 참고 : https://www.npmjs.com/package/axios yarn add axios 2. weather API 호출 규격 및 개인 key 확인 * weather API : https://openweathermap.org/current * [Home > API > Current Weather Data] 확인 시, 좌표값으로 날씨 정보를 읽어 올 수 있는 규격 있음 * 회원가입 후 [Home > My API keys] 에서 개인 key 확인 가능 3. weather API 테스트 * isLoading || error = true 일 때, 별도로 를 구성하여 ..

본 게시글에서는 Google Maps 를 호출해 화면에 보여주도록 한다. 1. Google Maps 를 불러올 module 추가 * react-native-maps : https://github.com/react-native-maps/react-native-maps yarn add react-native-maps 2. 관련 소스를 추가 * initialRegion : 지도의 초기 좌표값이며, 우리나라가 한 화면에 담기도록 latitudeDelta, longitudeDelta 값을 5로 조정함 * 좌표값은 Google Maps 에서 확인 가능 * useState 참고 : https://ko.reactjs.org/docs/hooks-reference.html * provider={PROVIDER_GOOGLE..

본 게시글에서는 홈 화면 구성 시, 이미지를 읽어와 홈 화면에 보여주도록 한다. * 무료 사진 다운 : https://pixabay.com/ko/ * resize-mode : https://reactnative.dev/docs/image#resizemode * css 참고 : https://developer.mozilla.org/ko/docs/Web/CSS/flex 1. 사진 다운로드 후 저장 # assets > images 2. 저장된 사진 2장을 불러와 1:1 비율로 배치 * 화면을 구성하는 부분과 css 로 꾸며주는 부분을 분리하여, 각각 작성하면 유지보수에 용이함 * : 전체 화면 틀 * : require() 사용하여 이미지를 읽어옴 * resize-mode 를 이용하여 크기가 다른 사진을 알맞게..