개발 메모장 개발 메모장

RN

• react-native-async-storage 그만 사용하기(feat. react-native-mmkv)

  React Native 2023. 8. 18. 13:35

  react-native-async-storage React Native에는 다양한 Key-Value Storage 라이브러리가 있습니다. 그리고 그중 react-native-async-storage는 React Native에서 가장 기본적으로 제공되는 Key-Value Storage 라이브러리입니다. react-native-async-storage는 비동기적으로 데이터를 저장하고 불러옵니다. 즉, 데이터를 저장하거나 불러올 때 다른 작업이 중단되지 않습니다. react-native-async-storage는 사용하기 쉽고, 다양한 플랫폼을 지원합니다. 하지만, 성능이 그다지 좋지는 않습니다. react-native-mmkv react-native-mmkv는 react-native-async-storage..

  Read More
• Expo SDK 47 정리

  Expo 2022. 11. 10. 15:40

  React 생태계는 확실히 업데이트가 무척 빠른 것 같습니다. Next.js가 13 버전이 나온 것처럼 Expo 역시 47 버전의 Beta가 나온 지 얼마 안 되어 47 버전이 정식 출시되었습니다. React Native CLI를 대체하기 위해 많은 고민과 노력을 하고 있다는 것이 보이는 업데이트였습니다. 아래의 4가지 항목 이외에도 지원하는 React, React Native버전이나 iOS의 최소 지원 버전과 같은 내용들도 있지만 이번 정리는 제가 업데이트를 봤을 때 가장 흥미로웠던 부분들 위주로 정리해 봤습니다. 1. Expo modules 정식 출시 Alpha단계였던 Expo modules가 SDK 46 > SDK 47인 한 번의 업데이트 만에 1.0으로 정식 출시를 했습니다. 개인적으로 무척 기대..

  Read More
• React Native WebView Google Login Authorization Error 403: disallowed_useragent Error 해결법

  React Native 2022. 3. 23. 19:01

  ... // Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.103 Safari/537.36 const customUserAgent = 'customUserAgent'; ... 가장 간단한 방법은 위와 같이 userAgent를 변경해주는 방법이다. 2016년 구글에서 webview에서 로그인을 막는 것으로 정책이 변경되었기에 기존 userAgent를 사용하면 error가 발생하는 것이다. 다른 방법으로는 chrome custom tab을 이용하는 방법이 있는데 RN에서는 이 부분만 따로 custom tab으로 변경하는 것과 같은 부분이 꽤나 복잡해지기 때문에 간편하게 위의 방법을 사용했다. 대부분..

  Read More
• ESLint dependency cycle detected import/no-cycle Error 해결하기

  Tip 2021. 8. 18. 18:15

  나의 경우 해당 에러가 interface를 import 해서 사용할 때 나왔다. 이 에러의 의미는 간단하게 설명하자면 A 컴포넌트를 B에서 import 해서 사용하는데 B에서 A의 항목을 import 해서 생기는 문제이다. A -> B -> A 그래서 나의 경우 interface들을 따로 파일로 쪼갠 뒤 아래와 같은 방식으로 사용해 해결해 냈다. // A.tsx import {Props} from './type'; import B from './B' // B.tsx import {Props} from './type'; ... any: [] as Props

  Read More
• Styled-Components 테마 적용하기

  React 2021. 7. 30. 19:37

  npm install styled-components 만약 TS를 사용한다면 추가적으로 Types를 설치해 준다. // react npm install @types/styled-components // react-native npm install @types/styled-components @types/styled-components-react-native 아래부터는 TS로 설명하겠습니다. TS를 사용하지 않는다면 declare파일만 만들어 주지 않으면 큰 차이가 존재하지 않습니다. // styled.d.ts import 'styled-components'; declare module 'styled-components' { export interface DefaultTheme { main: string;..

  Read More
• React Native에서 Custom Font 적용하기

  React Native 2021. 7. 29. 14:54

  해당 글은 일반 CLI를 이용해 생성된 프로젝트에서는 안 되며, Expo나 Expo를 Eject한 프로젝트에서만 적용되는 방법입니다. 먼저 사용하려는 Font의 종류에 따라 설명하자면, google-font의 경우 expo-google-font를 이용하여 가장 손쉽게 사용할 수 있다. 나는 내가 가장 많이 사용하는 Noto Sans KR을 기준으로 설명하겠다. expo install @expo-google-fonts/noto-sans-kr expo-font expo-app-loading import React from 'react'; import { Text, View } from 'react-native'; import { useFonts, NotoSansKR_100Thin, NotoSansKR_300..

  Read More