티스토리

Dahee's Solution Hub
검색하기
블로그 홈

블로그 홈

Dahee's Solution Hub

coding-dahee.tistory.com/m
신고

배운건 공유해야 진짜 내것이 된다!

구독자
32
방명록 방문하기
구독하기

주요 글 목록

  • WebP 적용하기 React Native는 webp를 지원하지만 , 애니메이션이 있는 webp는 지원하지 않는다.라이브러리의 힘을 빌리자. 1. react-native-webp-format 설치  2. Android 추가 설정 Add the following dependencies to android/app/build.gradle:dependencies { ... implementation 'com.facebook.fresco:webpsupport:2.5.0' // Optionally, to display animated WebP images, you have to add: implementation 'com.facebook.fresco:animated-webp:2.5.0' ...} 3. iOS 추가 .. 공감수 0 댓글수 1 2023. 10. 27.
  • React Native에서 설정된 언어를 Next.js에 전달하기 React Native에서 Next.js로 웹뷰 이동을 할 때, React Native에 미리 세팅된 언어를 Next.js에도 똑같이 적용을 하고 싶다. 1) localStorage에 저장해서 클라이언트 렌더링 때 context 등의 전역변수로 관리한다. - 클라이언트 렌더링 할 때서야 언어를 감지하므로 UX 상 좋지 않다. 2) Next.js는 서버사이드 렌더링이기 때문에 서버에서 미리 유저의 언어를 알아낸다. - 이거다! HTTP Aceept-Language 헤더에 기반해 사용자의 local을 감지하면 된다. // RN 코드 import WebView from "react-native-webview"; // next.js 코드 // next-18next.config.js /** @type {impor.. 공감수 1 댓글수 0 2023. 8. 1.
  • [React Native] 기기에 맞게 폰트 사이즈 대응하는 방법! React Native에서 폰트 사이즈는 어떻게 관리할까? 그냥 피그마에서 본 폰트크기가 10이라면, fontSize: 10 으로 하면 될까? 기기에 맞게 대응해주는 방법이 있다. 물론 더 세세하게 나누자면, 디바이스의 가로가 (a~b)px: 8, (b~c)px: 10, (c~d)px: 12 이런식으로 나눌 수도 있겠다. 그러나 그렇게까지는 세세하게 나눈 상황은 아니라서, 우리는 폰트사이즈르 계산할 때 하나의 함수를 통하고, 그 안에서 PixelRatio를 이용하기로 한다. PixelRatio란? 글꼴 크기에 대한 축척 비율을 반환합니다. 이 비율은 절대적인 글꼴 크기를 계산하는 데 사용되므로 이에 크게 의존하는 모든 요소는 이 비율을 사용해서 계산해야 합니다. 안드로이드: Settings > Displ.. 공감수 1 댓글수 0 2023. 7. 20.
  • [React Native] react native typescript 환경에서 env 파일 사용하기 너무나도 완벽한 블로그가 있어 그대로 첨부하였다.  https://yong-nyong.tistory.com/46#--%--env-d-ts 공감수 0 댓글수 0 2023. 7. 16.
  • [React Native] Dimension height 뿌시기 (안드로이드) import { getStatusBarHeight } from 'react-native-status-bar-height'; const statusBarHeight = getStatusBarHeight(false); // skip android = false; const deviceHeight = Dimensions.get('screen').height; const windowHeight = Dimensions.get('window').height; deviceHeight: 기기 전체 세로길이 windowHeight: 앱이 차지하는 만큼의 세로길이 statusBarHeight는 상태바의 세로길이 공식문서 링크: https://reactnative.dev/docs/dimensions 문제는 windowHei.. 공감수 0 댓글수 0 2023. 7. 8.
  • [React Native] 채팅화면을 구성하는 2가지 방법 (FlatList) 채팅화면을 구성하는 2가지 방법에 대해 알아봅시다!(FlatList의 inverted, onContentSizeChange) 1. FlatList의 inverted prop 사용const data = [ "안녕하세요! 채팅을 입력해주세요", "안녕", "반갑습니다!", "나는 보라야",] inverted prop을 사용하면data는 위가 아닌 아래부터 배치가 됩니다. (좌)이 상태라면, data가 추가될 때마다 위에 쌓이게 됩니다.따라서 data.reverse()를 통해 data의 순서를 역으로 세팅해줍니다. (우) 아주 간단하죠! 그런데 data의 첫원소인 "안녕하세요! 채팅을 입력해주세요"가 빨간박스의 좌상단이 아닌, 파란박스의 좌상단부터 배치되게 할 수는 없을까요? 그렇다면 inverted는 포.. 공감수 1 댓글수 2 2023. 3. 27.
  • Apollo Client query 시 주의점 (variables) 상황 query에 요구되는 variables가 있는데, 항상 같은 값으로 보내면 refetch되지 않는다. 같은 값으로 보냈던 이유: readQuery로 캐시 사용 위해 -> 캐시 사용을 포기하고 variables를 항상 다른 값으로 보낸다. 1️⃣ : 값이 항상 동일해서 refetch해도 query call 처리가 안된다? 2️⃣ : 값이 항상 달라지기 때문에 refetch하면 query call 처리가 잘 된다. 원인 1. apollo 라이브러리의 결함 또는 2. 프로젝트 내 apollo 설정 문제? (cache도 가끔 제대로 업데이트되지 않는데, 다른 프로젝트에서는 cache가 잘만 동작한다.) 어쨌든, 2️⃣로 하니까 해결됐음! const [query, { loading, data }] = use.. 공감수 0 댓글수 0 2023. 1. 21.
  • SharedStorage.java에서 ReactMethod 사용 시 주의점 // 👍 Good Case @ReactMethod public void getAppName(Promise promise) { promise.resolve("Roubit"); } // 👎 Bad Case @ReactMethod public String getAppName(Promise promise) { return "Roubit"; } 항상 promise 처리 해줘야 한다. 참고: https://stackoverflow.com/questions/68213584/native-module-in-react-native-function-returns-undefined 공감수 1 댓글수 0 2023. 1. 17.
  • react native vision camera 이슈 추적용 - 문제가 아직 많아 추적용으로 메모해둠. https://mrousavy.com/react-native-vision-camera/docs/guides/troubleshooting#android https://issuetracker.google.com/issues/242699117 공감수 1 댓글수 0 2022. 8. 26.
  • [React Native] Android TimePicker 색깔 커스텀하는 방법 android/app/src/main/res/values/styles.xml 파일을 수정하면 된다. datepicker: 날짜 선택 -> android:datePickerDialogTheme timepicker: 시간 선택 -> android:timePickerDialogTheme 참고: https://github.com/react-native-datetimepicker/datetimepicker/issues/20#issuecomment-602776708 공감수 1 댓글수 0 2021. 10. 19.
  • [React Native] 인앱리뷰 기능 In-App Review 라이브러리 https://github.com/MinaSamir11/react-native-in-app-review 설치 $ npm install react-native-in-app-review or $ yarn add react-native-in-app-review 사용법 라이브러리에서 제공하는 예제입니다. import InAppReview from 'react-native-in-app-review'; // This package is only available on android version >= 21 and iOS >= 10.3 // Give you result if version of device supported to rate app or not! // trigger UI InAppreview .. 공감수 1 댓글수 1 2021. 8. 26.
  • [React Native] TextInput 부분 스타일 적용하는 방법 [따라해볼 예제] - Tick Tick 이라는 어플에서 TextInput에 해시태그와 제목의 스타일이 달라서 어떻게 구현하는지 궁금했다. - 그래서 따라해보기로 했다! [소스코드] ... import React, { useState } from 'react'; ... interface ValueInfo { str: string; isHT: boolean; idxArr: number[]; } const getValueInfos = (value: string): ValueInfo[] => { if (value.length === 0) { return []; } const splitedArr = value.split(" "); let idx = 0; const valueInfos: ValueInfo[] = s.. 공감수 1 댓글수 1 2021. 8. 17.
  • [React Native] v9 Facebook SDK 적용하기 최근 Facebook SDK를 9로 업데이트하라는 메일이 날라와서 업데이트를 해보려 한다! 환경 react-native: 0.63.4 react-native-fbsdk-next: 4.0.0 FB SDK 9 이상을 사용하려면 위 라이브러리를 사용해야 한다. 9 미만 버전을 사용하려면 react-native-fbsdk를 이용하면 된다. https://www.npmjs.com/package/react-native-fbsdk-next 설치 yarn add react-native-fbsdk-next yarn remove react-native-fbsdk // 이 라이브러리가 설치되어있다면. cd ios && pod install Configure projects 추가설명 참고 링크: https://github.c.. 공감수 0 댓글수 4 2021. 3. 30.
  • [React Native] Upgrade 0.61.5 to 0.63.4 업데이트를 하자! 제가 운영중인 루빗이라는 어플을 처음 init한지 벌써 1년이 되었어요! react-native 버전이 그새 많이 올라서 업그레이드를 해보려고 합니다. Upgrade Helper Step 1 - Edit Code https://react-native-community.github.io/upgrade-helper 이 사이트를 이용하면 원하는 버전으로의 업데이트를 위해 무엇을 해야하는지 알 수 있어요. 저는 0.61.5에서 0.63.4로 업그레이드를 할겁니다! https://react-native-community.github.io/upgrade-helper/?from=0.61.5&to=0.63.4 여기에 나와있는대로 코드를 수정해주세요. 참고) storyboard 추가하기 기존 ios/R.. 공감수 0 댓글수 0 2021. 3. 1.
  • react-native-iap 인앱결제 적용하기 라이브러리react-native-iap: 5.1.3https://github.com/dooboolab/react-native-iap1. 라이브러리 설치$ npm install --save react-native-iap$ cd ios && pod install && cd ..# 그 외 -> https://github.com/dooboolab/react-native-iap#getting-started 참고2. AndroidAPK 등록github.com/dooboolab/react-native-iap/issues/618#issuecomment-523384825상품 등록requestPurchase오류!? 뭘했길래이걸로 바뀌었지?시간이 바뀌어서. - https://www.androidhub4you.com/20.. 공감수 0 댓글수 0 2020. 12. 16.
  • [React] 다양한 개념 정리 1. Babel이란? - 자바스크립트의 문법을 확장해주는 도구 - 자바스크립트 컴파일러 - 코드 변환기 - 최신 자바스크립트 문법을 구형 브라우저에서도 돌 수 있도록 코드 자체를 변환시킨다. 아직 지원되지 않는 최신 문법이나, 편의상 사용하거나 실험적인 자바스크립트 문법들을 정식 자바스크립트 형태로 변환해줌으로서 구형 브라우저같은 환경에서도 제대로 실행 할 수 있게 해주는 역할을 합니다. 입력은 자바스크립트 코드고 출력도 자바스크립트 코드입니다만, 최신 버전의 자바스크립트 문법은 브라우저가 이해하지 못하기 때문에 babel이 브라우저가 이해할 수 있는 문법으로 변환해준다고 생각 하면 될 것 같습니다. 바벨은 왼쪽 코드를 오른쪽처럼 자바스크립트 문법으로 변경시켜준다. 2. Webpack이란? - 여러개 파.. 공감수 1 댓글수 0 2020. 11. 2.
  • [React Native] naver login / 네이버 로그인 0. 환경react-native: 0.62.0@react-native-seoul/naver-login: 2.1.0github.com/react-native-seoul/react-native-naver-login react-native-seoul/react-native-naver-login리엑트 네이티브 네이버 로그인 라이브러리. Contribute to react-native-seoul/react-native-naver-login development by creating an account on GitHub.github.com1. 설치$ npm install @react-native-seoul/naver-login --save또는$ yarn add @react-native-seoul/naver-logi.. 공감수 0 댓글수 0 2020. 10. 6.
  • [React Native] Facebook SDK 적용하기 0. 목적 / 환경 - 앱 설치 이벤트를 위해 Facebook SDK를 적용해야 했다. - react-native: 0.61.5 - react-native-fbsdk: 3.0.0 1. 설치 1) 라이브러리 설치 yarn add react-native-fbsdk cd ios && pod install && cd .. 2) Configuring Your Project 섹션을 보면 더 자세한 설정이 필요하다고 되어 있다. 2-1) Android Link 만약 rn 버전이 0.60 이상이라면, Configure Native Android Project Activity 섹션은 따라하지 않는다. 이미 auto link가 되어 있기 때문. 이하라면 따라한다. Configure the Facebook SDK for A.. 공감수 1 댓글수 0 2020. 9. 30.
  • [React Native] push notification custom sound 설정하기 / 커스텀 사운드 / 푸시알람 [React Native] push notification custom sound 설정하기 / 커스텀 사운드 / 푸시알람 라이브러리: github.com/zo0r/react-native-push-notification버전: 5.1.01. iOS1) project/ios 폴더에 .caf 파일을 추가한다. (xcode에서 말고 finder에서!)2) xcode에서 다음과 같이 프로젝트 이름에서 우클릭 - Add Files to "project" 클릭 후 ios 폴더에 추가해놓은 파일을 선택한다.3) 코드 작성 import PushNotification, { PushNotificationScheduleObject } from 'react-native-push-notification'; .. 공감수 0 댓글수 2 2020. 9. 28.
  • [React Native] Custom Font 적용 (Google Fonts) 1. 폰트 다운로드fonts.google.com/?preview.text=2020.09.11+%EA%B8%88&preview.text_type=custom Google FontsMaking the web more beautiful, fast, and open through great typographyfonts.google.com무료라서 좋음! 나는 fonts.google.com/specimen/Noto+Sans+KR?preview.text=2020.09.11%20%EA%B8%88&preview.text_type=custom 이 폰트를 사용함  2. 적용dev-yakuza.github.io/ko/react-native/react-native-custom-font/ RN(Reacct Native)에서 커스.. 공감수 1 댓글수 0 2020. 9. 12.
  • [React Native] Sentry로 로그 이벤트 확인하기 0. 데브에서 찍는 콘솔을 릴리즈에서도 보고 싶었다. Sentry를 이용하면 된다! 1. 라이브러리 github.com/getsentry/sentry-react-native getsentry/sentry-react-native Official Sentry SDK for react-native. Contribute to getsentry/sentry-react-native development by creating an account on GitHub. github.com 2. 일단 sentry-cli 깔고 docs.sentry.io/cli/installation/ 3. 로그인 등등 docs.sentry.io/cli/configuration/ Configuration and Authentication do.. 공감수 0 댓글수 1 2020. 9. 1.
  • [React Native] Firebase Admob - Rewards 보상형 동영상 광고 띄우기 1. 설치 yarn add @react-native-firebase/admob cd ios && pod install 2. 적용 // /firebase.json { "react-native": { "admob_android_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx", "admob_ios_app_id": "ca-app-pub-xxxxxxxx~xxxxxxxx" } } 3. 실행 3-1. iOS 에러 빌드는 잘 됐는데 xcode 터미널에 이러한 에러가 떴음 Terminating app due to uncaught exception 'GADInvalidInitializationException', reason: 'The Google Mobile Ads SDK was initializ.. 공감수 0 댓글수 6 2020. 8. 29.
  • [React Native] Deep Link 딥링크 1. 딥링크 이해하기https://help.adbrix.io/hc/ko/articles/360039757433-%EB%94%A5%EB%A7%81%ED%81%AC-Deeplink-URI%EC%8A%A4%ED%82%B4-%EC%9C%A0%EB%8B%88%EB%B2%84%EC%85%9C-%EB%A7%81%ED%81%AC-%EC%95%B1%EB%A7%81%ED%81%AC-%EA%B5%AC%EB%B6%84%EA%B3%BC-%EC%9D%B4%ED%95%B4 딥링크(Deeplink) : URI스킴, 유니버셜 링크, 앱링크 구분과 이해  딥링크 (Deeplink) http 혹은 https 로 시작하는 인터넷 주소는 모두 특정 서비스의 웹페이지로 이동합니다. _ https://igaworks.com 을 주소창에 입력하면.. 공감수 0 댓글수 0 2020. 8. 24.
  • [React Native] 앱 화면 캡쳐 후 공유 및 갤러리에 저장하기 (Capture ScreenShot and Share) 목적: 앱 내 화면을 그대로 이미지로 추출하여 카카오톡이나 인스타로 공유 및 갤러리에 저장을 하고 싶음 1. 환경react-native: 0.61.5react-native-view-shot: 3.1.2react-native-share: 3.7.0@react-native-community/cameraroll: 4.0.02. 설치1) react-native-view-shot=> 오토링크! 2) react-native-share=> 오토링크! 3) @react-native-community/cameraroll=> 오토링크!(https://coding-dahee.tistory.com/147 이곳에서 cameraroll 설치 방법 자세히 보기!) https://coding-dahee.tistory.com/1473.. 공감수 3 댓글수 0 2020. 8. 18.
  • [React Native] 관리자용 테스트앱 만들기 최근: iOS: 테스트플라이트가 곧 테스트용 앱이니까 따로 바꿔준건 없음1. firebase GoogleService 어쩌구도 prod도 dev 바라보도록2. 스플래시3. 아이콘4. 코드푸시 키(4까지는 공통)5. Android applicationId 변경6. iOS: 왜인지 모르겠지만 스키마 하나 더 만들었음. build 하면 device 관련 에러났기 때문에.1. 에러Could not get GOOGLE_APP_ID in Google Services file from build environmenthttps://stackoverflow.com/questions/57006663/could-not-get-google-app-id-in-google-services-file-from-build-enviro.. 공감수 0 댓글수 0 2020. 8. 15.
  • [React Native] Firebase Crashlytics 참고 블로그 참고 블로그 나는 네가 왜 오류를 냈는지 알고 있다 — Crashlytics 기능, 어디까지 써봤니? Crahslytics에서 오류 로그만으로는 알 수 없거나 재현할 수 없는 문제들을 파악하는 여러가지 방법에 대해서 공유합니다. medium.com 너무 잘 써놓으셨다! 공감수 0 댓글수 0 2020. 8. 12.
  • [React Native] react-navigation 화면이 포커스되었을 때를 감지하기 & 특정 화면에서 돌아왔을 때 api 호출하기 1. To DoA screen에서 B screen으로 navigate한 후 다시 A로 goBack했을 때 goBack한 순간 A screen에서 api 호출을 다시 해야한다.(C screen에서 A screen으로 오면 아무것도 하지 않는다) 2. How To2-1. react navigation 활용 (해결책x)https://reactnavigation.org/docs/function-after-focusing-screen/ React NavigationIn this guide we will call a function or render something on screen focusing. This is useful for making additional API calls when a user revi.. 공감수 3 댓글수 4 2020. 7. 1.
  • [React Native] react native android apk 뽑기 1. apk 뽑는 블로그 그대로 따라했음https://bomjjack.github.io/programming/2018/01/06/rn-android-app-release/ React Native 릴리즈 빌드(안드로이드 편)안드로이드편.bomjjack.github.io  2. apk 뽑기는 성공했는데 api url이 https가 아닌 http 여서 통신이 안됐음.안드로이드 release 버전에서는 http 통신이 기본적으로 안됨. 그래서 설정을 해줘야 함! 해결책 -> github.com/facebook/react-native/issues/24408#issuecomment-537081276 Fetch not working for HTTP requests on Android · Issue #24408 · f.. 공감수 0 댓글수 2 2020. 6. 6.
  • [React Native] react-native-svg ProgressCircle로 시계 나타내는 법 / startAngle, endAngle 1. 라이브러리 https://github.com/JesperLekland/react-native-svg-charts JesperLekland/react-native-svg-charts 📈 One library to rule all charts for React Native 📊 - JesperLekland/react-native-svg-charts github.com 2. ProgressCircle Usage - 10시~3시, 6시~12시 같은 일정이 있으면 그 시간만큼이 채워진 원형 그래프를 그리고 싶었다. - 딱 적합한 것이 ProgressCircle이었다. - 먼저 문서 그대로 사용해보면 이렇게 보인다. * 코드 * 결과 - 특정 시간대를 이 원형그래프로 나타내려면 어떻게 해야할까? - startA.. 공감수 1 댓글수 0 2020. 5. 24.
  • [React Native] AppState / detect foreground, background 0. 소개AppState를 이용하면 앱이 background였다가 foreground 상태로 왔는지, 그 반대인지를 알 수 있다.  1. 문서https://reactnative.dev/docs/appstate.html React Native · A framework for building native apps using ReactA framework for building native apps using Reactreactnative.dev 2. Usage앱이 포그라운드 -> 백그라운드 로 가는 순간appState는 active -> inactive -> background로 바뀐다. 이 과정에서 앱이 백그라운드 상태가 되면 setAppState가 매끄럽게 이어져서 appState는 background여.. 공감수 0 댓글수 0 2020. 5. 21.
    문의안내
    • 티스토리
    • 로그인
    • 고객센터

    티스토리는 카카오에서 사랑을 담아 만듭니다.

    © Kakao Corp.