► React Native/개발일기
-
[React Native] 라이브러리 및 속성 사용법 (react-native-image-zoom-viewer)► React Native/개발일기 2023. 5. 25. 23:52
📚 라이브러리 명: react-native-image-zoom-viewer 📚 샘플코드 (from 라이브러리 자료 ) import { Modal } from 'react-native'; import ImageViewer from 'react-native-image-zoom-viewer'; const images = [{ url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460', props: {} }, { url: '', props: {source: require('../background.png')} }] export default class App extends React.Component { render: function() { return..
-
[React Native] 라이브러리 설치 방법► React Native/개발일기 2023. 5. 23. 22:35
1. 터미널창을 연다 2. 터미널창에 다운받으려는 라이브러리의 이름을 넣어 타이핑한다. % npm install 라이브러리명 --legacy-peer-deps // ex) % npm install react-native-device-info --legacy-peer-deps 2-2. 특정 버전의 라이브러리를 다운받고자하면, 특정 버전을 입력해준다. % npm install 라이브러리명@버전 // ex) % npm install react-native-device-info@10.6.0 3. Mac, Xcode에서 ios 개발을 한다면 pods 라는 것도 설치한다. 3-1. ios로 이동한다 % cd iOS 3-2 Pod instal, update 실행 % Pod install % Pod update 3-3..
-
[React Native] Xcode로 시뮬레이터 열기► React Native/개발일기 2023. 5. 22. 23:10
1. Xcode에서 open a project or file 선택 2. 홍길동 프로젝트 파일 선택하기. 루트: 홍길동 프로젝트 파일> iOS> 홍길동.xcworkspace 3. vsc에서 홍길동 프로젝트 파일 열기 4. 터미널에 npx react-native start 실행 5. 맥북 시스템설정> 개인정보 보호 및 보안> 보안 에서 '확인 없이 허용' 클릭 6. xcode에서 start the active scheme (▶︎)클릭 7. Xcode 시뮬레이터 실행 완료 개인적으로 개발시행착오를 겪으면서, 그런 경험들을 기록하기도하고, 모은정보들을 메모하며, 개인공부내용을 공유하는 게시물입니다. 친절한 조언과 다양한 의견 남겨주시고, 소통해주시는분들은 언제든지 환영합니다 :D
-
[React Native] getUniqueId() 사용법: 'device unique ID(장치 고유 ID)' 받아오기► React Native/개발일기 2023. 5. 18. 22:42
라이브러리 react-native-device-info를 업데이트하며 아래와 같은 이슈가 발생하였다. 이슈 해결 후 해결된 이슈의 내용을 정리해보았다. 라이브러리 이름: react-native-device-info 용도: 디바이스 정보를 습득할 수 있다. 필요한 출력값: device unique ID(장치 고유 ID)' 출력 결과: iOS: "FCDBD8EF-62FC-4ECB-B2F5-92C9E79AC7F9" Android: "dd96dec43fb81c97" 구버전: "react-native-device-info": "9.0.2" 활용 코드: DeviceInfo.getUniqueId() 라이브러리 설치 후, DeviceInfo.getUniqueId()를 작성하면 원하는 디바이스 고유 ID 값을 받을 수 ..
-
[React Native] 에러해결_ Unhandled JS Exception: Unexpected token ':'.► React Native/개발일기 2023. 4. 17. 20:34
에러내용: Xcode를 실행하니 아래의 에러화면 발생▼ 에러내용Unhandled JS Exception: Unexpected token':'. Expected a ')' or a ' after a parameter declaration.no stack1.구글링하다 같은 에러이지만, 오타가 아닌 'barbel.config.js'의 내용을 수정하면된다는 내용을 발견하였다.🔗 참고링크: https://github.com/babel/babel/issues/14139#issuecomment-1011836916 2. ':'토큰을 어디에 잘못쓴줄 알고, 지난주에 작성해놨던 코드를 모두 뒤지다가,결국 모두 지워버렸다. 에러 해결방법▼ [왼] 수정전 코드내용 / [오] 수정후 코드내용▼ 수정전 코드내..
-
[터미널] MAC에서 사용중인 포트 찾아서 kill 하기► React Native/개발일기 2023. 4. 11. 20:53
아래와 같이 npx react-native start 하였더니 에러가 났다. % npx react-native start ▼ 에러 error listen EADDRINUSE: address already in use :::8081. Run CLI with --verbose flag for more details. ▼ 해결 % sudo lsof -i :8081 % kill -9 37318 맥에서 위의 명령어를 실행한다 에러가 난 포트 8081를 사용하는 프로세스를 찾는다. 그리고 PID 에 적힌 숫자를 넣어서, 해당 프로세스를 종료한다. ▼ 결과 % npx react-native start 정상적으로 작동하였다. [ 명령어 정리 ] 찾기 lsof -i :포트번호 Kill 하기 kill -9 참고링크: ht..
-
[Android] 'SDK location not found' 에러 해결► React Native/개발일기 2023. 4. 11. 20:52
아래와 같이 npx react-native run-android 하였더니 에러가 났다. % npx react-native run-android ▼ 에러 * What went wrong: A problem occurred configuring project ':lottie-react-native'. > SDK location not found. Define location with an ANDROID_SDK_ROOT environment variable or by setting the sdk.dir path in your project's local properties file at '/Users/...../android/local.properties'. lottie-react-native 만 열심히 보다..
-
[터미널] npm install 에러► React Native/개발일기 2023. 4. 7. 20:55
선배에게 전달받은 react native 프로젝트를 xcode에서 실행하면서, 아래와 같은 에러가 발생하였다. ▼ 에러코드 % npm install npm WARN ERESOLVE overriding peer dependency npm WARN While resolving: @typescript-eslint/eslint-plugin@1.13.0 npm WARN Found: eslint@6.8.0 npm WARN node_modules/eslint npm WARN dev eslint@"6.8.0" from the root project npm WARN 7 more (@react-native-community/eslint-config, ...) npm WARN npm WARN Could not resolve..