개발 메모장 개발 메모장

expo

• 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
• Expo xcrun exited with non-zero code: 2에러 해결하기

  Tip 2021. 10. 27. 19:32

  여러 글을 읽었지만 해결되지 않았는데 해결법이 너무 간단해 소개한다. 1. 가장 먼저 xcode를 종료한다. 2. 터미널을 열고 xcrun simctl list을 입력한다. 3. list중 실행하고 싶은 deviceId를 복사한다. 4. xcrun simctl boot 를 입력한다. 5. expo start --ios를 선택한 디바이스로 실행된다.

  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
• 앱 기획부터 출시까지(일기장) - 2 (종속성 설치 및 설정들)

  React Native 2021. 7. 22. 17:15

  해당 글은 MacOS, expo@42.0.0, react-native@0.63.4 버전을 바탕으로 작성되었습니다. 전 글에서 프로젝트를 생성하는 것 까지 끝냈다. 오늘은 개발을 할 때(특히 협업을 할 때) 거의 필수적으로 사용하는 설정들에 대해 다뤄보고자 한다. 일단 나 같은 경우 React Native 프로젝트의 경우 특히 내가 사용하는 파일 이외에 생성되는 파일들이 많기에 src 폴더를 만든 뒤 위치를 변경해준다. src 폴더로 App.tsx를 이동했을 경우 꼭 index.js파일의 App.js의 import 위치를 변경해 주세요. 그런 뒤 expo로 편하게 이용하기 위해 android, ios의 스크립트를 변경한다. "android": "expo start --android", "ios": "exp..

  Read More
• 앱 기획부터 출시까지(일기장) - 1 (사용 기술 정하기 및 프로젝트 생성)

  React Native 2021. 7. 21. 14:40

  +해당 글은 MacOS, expo@42.0.0, react-native@0.63.4 버전을 바탕으로 작성되었습니다. 이미 카테고리를 보면 알겠지만 가장 큰 틀은 React Native로 정한 상태로 들어간 프로젝트이다. 하지만, 이에 대한 설명 역시 필요하다는 생각에 처음 기획을 한 단계부터 시작하려고 한다. React, React Native 두 가지 모두 Facebook에서 만든 JS 라이브러리로 두 가지 중 어떤 걸 선택하는지에 대한 내 기준은 사실 한 가지이다. 검색이 용이해야 하는가? 이 한 가지에 따라 웹으로 프로젝트를 시작할지 앱으로 시작할지를 정하는 편이다. 그리고 이번에 할 프로젝트의 경우 일기장의 특성상 검색이 될 일이 없었기에 React Native로 정할 수 있었다. 이 시점에서 내..

  Read More