320x100 분류 전체보기83 [React-native]Context API, Recoil 어떤걸 쓸까? (feat. 렌더링) react-native로 앱을 만들면서 전역으로 상태관리를 해야하는 상황이 필연적으로 찾아왔다. Context API 처음에는 Context API를 사용해서 상태관리를 했었다. 하지만 변수값이 많아지면서 점점 렌더링이 느려지는 현상이 생겼다. Provider에 제공한 value가 달라지면 Context API를 쓰고 있는 모든 컴포넌트가 리렌더링 된다는 것을 간과했었다. Provider를 추가하더라도 Provider의 하위컴포넌트가 모두 렌더링되는 현상은 피할 수 가 없다. (memoization을 통해 일부 문제를 해결할 수 있지만, 모든 것을 해결할 수 있는 방법은 아니며 한계가 있다고한다) 3번째 슬라이드에서 Context Provider를 추가한 후 하위의 모든 것이 다시 마운트된다. 성능에도 .. 2023. 4. 12. [RN]모듈 중복생성 오류 Native module RNDatePicker tried to overrideRNDatePicker. [문제상황] Native module RNDatePicker tried to override RNDatePicker. Check the getPackages0 method in MainApplication java, it might be that module is being created twice. If this was your intention, set canOverrideExistingModule=true. This error may also be present if the package is present only once in getPackages but is also automatically added later during build time by autolinking. Try removin.. 2023. 4. 7. [RN]안드로이드 빌드오류 (Task :react-native-wheel-pick:verifyReleaseResources FAILE Derror: resource android:attr/lStar not found.) [문제상황] 앱배포를 준비하기 위해 release용 apk을 빌드하려던 중 아래와 같은 에러가 났다. > Task :react-native-wheel-pick:verifyReleaseResources FAILED FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':react-native-wheel-pick:verifyReleaseResources'. > A failure occurred while executing co m.android.build.gradle.tasks.VerifyLibraryResourcesTask$Action > Android resource linking failed ERROR.. 2023. 4. 3. [RN]메일보내기 라이브러리 (react-native-mail) 리액트 네이티브에서 메일을 편리하게 보낼 수 있는 라이브러리가 있다. 이 라이브러리를 사용하면 사용자의 메일어플(예: 지메일)을 통해 바로 메일을 보낼 수 있다. 설치방법 npm i --save react-native-mail 사용방법 import React from 'react'; import { Button } from 'react-native'; import Mailer from 'react-native-mail'; const SendMail = () => { const handleSendMail = () => { Mailer.mail({ subject: 'Test Email', recipients: ['recipient1@example.com', 'recipient2@example.com'], c.. 2023. 3. 28. [RN]recoil 중복 키값 에러해결Expectation Violation: Duplicate atom key [문제상황] react-native에서 recoil를 사용중 [Expectation Violation: Duplicate atom key "groupNameState". This is a FATAL ERROR in production. But it is safe to ignore this warning if it occurred because of hot module replacement.] 라는 에러를 만났다. 찾아보니 보통 Next.js 개발환경에서 많이 발생하는 에러라는데 SSR환경이 아닌 react-native에서 왜 이와 같은 현상이 일어나는 것인지 궁금했다. 공식문서를 살펴보니 Fast Refresh를 사용하는 환경에서도 일어나는 현상이라는데.. Fast Refresh? 리액트 네이티브 공식문.. 2023. 3. 22. [RN]react-native-push-notification 커스텀사운드 적용하기(안드로이드) [문제상황] react-native-push-notification라이브러리를 사용하면서 push알림의 커스텀사운드가 적용이 잘 안되어 애를 먹고 있었다. 분명 경로 설정도 잘 되었고 soundName에도 맞게 잘 설정을 했는데 안되는 이유가 답답했다. 이슈를 탐색하던중 위와 같은 답변을 보았고 드디어 궁금증이 해결되었다. 즉 채널을 한번 생성하게 되면 지정된 사운드는 수정이 불가능하다는 소리다. 나는 이제껏 PushNotification.localNotificationSchedule()안에서만 soundName을 설정하고 있었고 이미 채널을 생성할때는 default사운드가 설정되어있기 때문에 수정이 안되었던 것이다.. [해결방법] PushNotification.createChannel()에서 sound.. 2023. 3. 15. [RN]push알림 구현하기(react-native-push-notification) feat. Chat GPT 사이드프로젝트의 알람앱을 만들던중 이제는 가장 중요하고 핵심적인 기능인 알림기능을 구현해야할 때가 왔다. 알람이 울릴때 push 알림이 필요한데 이 push notification기능에는 크게 두가지 방식이 있다. 원격알림과 로컬알림. 원격알림은 서버에서 알림을 관리하지만 로컬알림은 서버가 필요하지 않다. 알람기능에 서버의 사용이 굳이 필요할까 싶어 로컬push 방법을 사용하기로 했다. 여러 라이브러리를 찾던 중 요즘 핫한 chat GPT를 이용해보았다. 역시 똑똑한 해결사.. 코드예시까지 알려주고, 마지막엔 주의사항도 잊지않고 알려준다. 어쨌든 가장 대중적으로 사용하는 라이브러리이기에 react-native-push-notification을 사용해보기로 했다. https://github.com/zo0r.. 2023. 3. 2. [RN] react-native에서 Refresh 하고 싶을때 (useIsFocused 사용하기) 작업을 하다보면 naviagation.goBack() 을 했을 때 리랜더링을 해줘야 할 때가 있다. 그럴 때 유용하게 사용할 수 있는 hook이 있는데 바로 useIsFocused이다. useEffect의 두번째 인자에 넣어주면 뒤로가기를 할 때 refresh를 할 수 있다. import { useIsFocused } from '@react-navigation/native'; const isFocused = useIsFocused(); useEffect(() => { if (isFocused) console.log('Focused!!'); }, [isFocused]); 공식문서 참고 https://reactnavigation.org/docs/use-is-focused/ 2023. 2. 21. [RN] react-native-sound 사용하기 현재 진행하고 있는 프로젝트에서 사운드를 재생해야하는 작업이 있는데 처음 시도해보는거라 이것저것 찾아보다 react-native-sound 라이브러리를 알게 되었다. 다른 사운드플레이어 라이브러리가 있었지만 react-native-sound 라이브러리가 제일 대중적으로 쓰이는것 같아 선택하게 되었다. https://www.npmjs.com/package/react-native-sound react-native-sound React Native module for playing sound clips on iOS, Android, and Windows. Latest version: 0.11.2, last published: a year ago. Start using react-native-sound in y.. 2023. 2. 21. [RN] Realm Studio로 realm file 열기 https://www.mongodb.com/docs/realm/studio/install/ Install Realm Studio — Realm If you want a file type that isn't listed here, such as a .zip file, view the release page for the version you want. You'll find a complete list of installers for each version. www.mongodb.com 위 사이트로 들어가 Realm Studio를 설치한다. 아래처럼 코드를 작성하면 (참고 https://www.mongodb.com/docs/realm/studio/open-realm-file/) // Get on-disk l.. 2023. 1. 18. [RN]rbenv: pod: command not foundThe `pod' command exists in these Ruby versions: 2.7.5 문제상황: react-native init을 하면 cocoapods의 오류발생 -> pod install 또한 안됨, rbenv: pod: command not found The `pod' command exists in these Ruby versions: 2.7.5 이와 같은 에러메세지 나옴. 해결방법: sudo gem install cocoapods 설치하고 cd ios pod install pod --version // 버전확인해서 설치 잘 되었나 확인 해주었더니 작동함 2023. 1. 17. [RN]휠 픽커 'react-native-wheel-pick' https://github.com/TronNatthakorn/react-native-wheel-pick GitHub - TronNatthakorn/react-native-wheel-pick Contribute to TronNatthakorn/react-native-wheel-pick development by creating an account on GitHub. github.com 아이템 및 날짜를 선택할때 유용한 라이브러리 설치 npm install react-native-wheel-pick --save --legacy-peer-deps npm install @react-native-picker/picker --save --legacy-peer-deps npm install @react-native-.. 2023. 1. 10. [RN]날짜, 시간 선택 라이브러리<react-native-date-picker> https://github.com/henninghall/react-native-date-picker GitHub - henninghall/react-native-date-picker: React Native Date Picker is datetime picker for Android and iOS. It includes date React Native Date Picker is datetime picker for Android and iOS. It includes date, time and datetime picker modes. The datepicker is customizable and is supporting different languages. It's wri... github.com 날짜&시간.. 2023. 1. 8. [RN]Drawer Navigator 오류해결 문제상황 Drawer Navigator를 사용하려고 모듈들을 설치하면 시뮬레이터 화면이 하얗게 뜨면서 빌드가 안되는 현상 발생.. https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation/ Installation | React Native Reanimated Installing Reanimated requires a couple of additional steps compared to installing most of the popular react-native packages. docs.swmansion.com 를 따라해보기도 했지만 해결 X 마지막에 SHA-1 for file … is not 오류에서 npm in.. 2023. 1. 5. [React-Native]ios 빌드오류 삽질기.. 안드로이드는 애뮬레이터가 잘 작동되지만 ios는 정말 하라는데로 다해보고 온갖 방법을 총 동원했는데도 ** BUILD FAILED ** 메세지와 함께 run ios가 제대로 되지 않았다.. m1문제인가 싶어서 pod install 할때도 x86_64 아키텍처로 ffi와 pod 를 설치 해줘도 여전히 빌드에러.. (혹시 모르니 기록은 해둔다..) m1 pod install 하기 1. x86_64 아키텍처로 ffi와 pod 설치 sudo arch -x86_64 gem install ffi 2. cd ios 경로로 이동해서 x86_64로 pod install arch -x86_64 pod install (만약 설치중 루비버전에러가 나온다면..) 1. 루비 버전확인 $ rbenv version 2. 원하는 버전.. 2023. 1. 4. [스프링부트] spring initializr 사용하기 https://start.spring.io/ 위 사이트에 접속후 아래와같이 설정해준다. Dependencies에서 Thymeleaf (html 자동생성 기능), Spring Web를 추가한뒤 GENERATE를 클릭하면 zip파일로 자동 다운로드 된다. 2023. 1. 3. react-native-vector-icons 사용법 / 엑박문제 해결 react-native-vector-icons 은 리엑트네이티브에서 벡터아이콘을 사용할수 있도록 해주는 라이브러리이다. 설치 npm install --save react-native-vector-icons npm install --save @types/react-native-vector-icons 사용방법 (1) 파일 상단에 import 한다. (2) 아래 주소로 들어가 원하는 아이콘이름을 복사한다. react-native-vector-icons directory oblador.github.io import끝엔 빨간박스에 있는 이름 적기 name엔 아이콘 이름 적기 (3) name, size, color값을 입력한다. import Icon from 'react-native-vector-icons/AntD.. 2022. 12. 13. [react-native]리액트JS와의 차이점 (코어컴포넌트와 style) 리액트JS와의 차이점 컴포넌트 reactJs처럼 html 문법을 사용하지 못한다. 왜냐하면 브라우저가 아닌 네이티브기기를 사용하기 때문이다. 네이티브 기기는 DOM을 가지고 있지 않고 Html요소를 지원하지 않는다. 또한 컴포넌트를 쓸때마다 import를 해주어야 한다. import {Text, View, Button} from 'react-native' 코어 컴포넌트 Text 텍스트는 무조건 사이에 들어가야 된다. hello View div와 비슷한 용도로 쓰인다. 하지만 네이티브에선 유일한 컴포넌트를 담는 컨테이너 컴포넌트이다. hello Button 기존에는 요소 사이에 텍스트를 배치했지만 (BUTTON!) 네이티브에서는 하나의 닫힌 컴포넌트 안에서 타이틀 프로퍼티를 사용해 텍스트를 입력한다 () .. 2022. 12. 5. [React]Hook: useLayoutEffect useLayoutEffect란? useEffect와 비슷한 이름을 가진 useLayoutEffect는 사용방법은 같지만 실행원리는 다르다. useEffect(() => { // do side effects return () => /* cleanup */ }, [dependancy array]); useLayoutEffect(() => { // do side effects return () => /* cleanup */ }, [dependancy array]); useEffect는 렌더링된 요소가 화면에 그려진 후 비동기적 으로 실행된다. 그러나 useLayoutEffect는 렌더링 후 요소가 화면에 그려지기 전에 동기적으로 실행된다. 그래서 데이터를 가져오는 시간이 오래걸린다면 그 시간만큼 사용자는 빈 .. 2022. 12. 5. [android studio]애뮬레이터 분리하기 최근 업데이트 된 안드로이드 스튜디오에선 애뮬레이터가 고정되어 있다. 다른 IDE로 작업하려면 분리가 필수이다. 분리하는 방법은 어렵지 않다. 1. command + , 를 눌러 환경설정 창을 띄운다. 2. 왼쪽 상단 검색창에 emu(까지만 적어도 검색가능..ㅎㅎ) 적고 Tools - Emulator로 들어간다. 3. Launch in a tool window의 체크박스를 해제한다. 4. 안드로이드 스튜디오를 종료 후 다시 킨다. 5. 오른쪽에 점세개 아이콘을 눌러 Virtual Device Manager에 들어간다. 6. Device를 실행한다. 분리하기 성공🌝 2022. 12. 2. [react-native] 개발환경설정중 발생한 에러 모음 cocoapods 설치 에러 해결하기 [react-native]ERROR: Error installing cocoapods: 발생상황: react native 개발환경 셋업중, cocoapods설치 중.. sudo gem install cocoapods Ignoring ffi-1.15.5 because its extensions are not built. Try: gem pristine ffi --version 1.15.5 ERROR: Error installing cocoapods: ERROR: Failed to build g jaylee-log.tistory.com ruby 버전 에러 해결하기 (mac) ruby 버전 업데이트 하기 문제상황 react-native init을 했는데 error Your.. 2022. 12. 2. [react-native] npx react-native run-android 에러 해결하기 문제상황 npx react-native run-android을 실행하려 하는데 에러가.. error Failed to launch emulator. Reason: No emulators found as an output of `emulator -list-avds`. error Failed to start the app. Error: spawnSync adb ENOENT 문제원인 android-platform-tools 가 없어서 나는 오류라고 한다. 공식문서에 보면 안드로이드 스튜디오를 설치할때 설치마법사가 나올때 아래항목을 체크하라 되어있었다. 하지만 그사이에 버전이 업데이트된건지 설치마법사는 안나오고 바로 화면이 나와서 sdk등을 수동으로 다운받았었다. 중간에 설치가 누락이 됐었나보다. 해결방법 br.. 2022. 12. 2. [react-native]error warn Multiple Podfiles were found 발생상황 터미널에 npx react-native init projectName을 입력하고 새로운 에러와 마주쳤다..^^ ✖ Installing CocoaPods dependencies (this may take a few minutes) error warn Multiple Podfiles were found: ios/Podfile,vendor/bundle/ruby/2.7.0/gems/cocoapods-core-1.11.3/lib/cocoapods-core/Podfile. Choosing ios/Podfile automatically. If you would like to select a different one, you can configure it via "project.ios.sourceDir". Y.. 2022. 12. 2. (mac) ruby 버전 업데이트 하기 문제상황 react-native init을 했는데 error Your Ruby version is 2.6.10, but your Gemfile specified 2.7.5 이런 오류가 났다. 찾아보니 맥에선 기본으로 2.6.10버전이 설치되어 있다고하는데 react native와 맞지 않는 버전이였다. 해결방법 1. rbenv 설치(homebrew가 설치되어 있다는 가정하에) brew install rbenv 2. 2.7.5버전 설치 rbenv install 2.7.5 rbenv global 2.7.5 3. 두 개의 버전이 맞는지 확인 rbenv versions // system //* 2.7.5 (set by /Users/user/.ruby-version) ruby --version //ruby 2.7.. 2022. 12. 2. [react-native]ERROR: Error installing cocoapods: 발생상황: react native 개발환경 셋업중, cocoapods설치 중.. sudo gem install cocoapods Ignoring ffi-1.15.5 because its extensions are not built. Try: gem pristine ffi --version 1.15.5 ERROR: Error installing cocoapods: ERROR: Failed to build gem native extension. current directory: /Library/Ruby/Gems/2.6.0/gems/ffi-1.15.5/ext/ffi_c /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/bin/ruby -I /System/.. 2022. 12. 1. [java]printf()의 지시자 println()의 단점 - 출력 형식 지정 불가 실수의 자리수 조절 불가 ex) System.out.println(10.0/3); // 3.333333 10진수로만 출력 - 8진수, 16진수로 출력하려면? System.out.println(0x1A); //26 printf() 출력 형식 지정 가능 System.out.printf("%.2f", 10.0/3); // 3.33 소수점 둘째 자리 까지 출력 System.out.printf("%d", 0x1A); // 26 10진수 System.out.printf("%X", 0x1A); //1A 16진수 printf()는 println() 처럼 자동 줄바꿈이 안된다. 그래서 \n 또는 %n을 사용하여 줄바꿈을 해줄 수 있다. 지시자 설명 %b 불리언(boole.. 2022. 12. 1. [java] 변수의 타입 기본형(Primitive type) 기본형 타입에는 8가지가 있다. 실제값을 저장한다. 데이터 크키가 정해져 있다. 문자형: char(문자가 하나일때만 문자’형’. 2개 이상은 문자’열’이 된다. 예: ‘a’→문자형 char, “ab” → 문자열 String) 정수형: int (가장 많이 사용, 접두사 0이 붙으면 8진수, 0x가붙으면 16진수) long(21억 이상의 수, 접미사 L이 있음), byte(2진법 데이터 다룸, -128~127범위의 수만 가능), short(c언어 호환) 실수형: float(연산속도나 메모리 절약할때, 접미사 f가 있음), double(7자리 이상의 정밀함을 요할때, 접미사 d가 있으나 생략가능) 논리형: boolean 참조형(Reference type) 기본형을 제외한 나.. 2022. 12. 1. React Native CLI 설치하기(mac) React Native란? 자바스크립트 언어로 React의 방식을 이용하여 모바일 안드로이드와 iOS를 만들 수 있는 프레임워크이다. 리액트 네이티브를 개발할 수 있는 방법엔 두가지가 있다. React Native CLI와 Expo CLI. 이 둘을 간단하게 비교하자면 1. Expo CLI - 초기설정 간단 - 손쉬운 사용 - 네이티브파일과 라이브러리사용에 제한이 있다. - 용량이 크다. 2. React Native CLI - 초기설정 까다로움 - 원하는 기능이나 라이브러리 자유롭게 사용 가능 - Android Studio(Android용) 및 XCode(iOS용)를 설치해야 한다. 이런 특징들을 가지고 있다. 목적에 따라 설치를 선택하면 될것같다. React Native CLI를 사용할것이기 때문에 설.. 2022. 12. 1. 이전 1 2 3 다음 320x100
