개발 메모장 개발 메모장

React Native

• 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
• React useEffect vs useLayoutEffect 차이점 알아보기

  React 2022. 12. 15. 16:29

  React를 사용하며 아마 가장 많이 사용하는 Hook을 말하라면 무조건 순위권 안에 들 Hook은 useEffect일 것입니다. 하지만 아래의 Flow 그림에서 보면 useEffect 이외에 useLayoutEffect라는 hook이 있다는 것을 알 수 있습니다. 둘의 차이는 간단하게 설명 가능합니다. Dom이 화면을 그린 뒤 호출되는 것이 useEffect 화면을 그리기 전에 호출되는 것이 useLayoutEffect입니다. 이렇게 말하면 와닿지 않을 수 있을 수 있겠지만 React내에서의 깜빡임 문제를 해소하려고 검색할 경우 가장 많이 나오는 것이 useLayoutEffect입니다. 아래의 코드를 살펴봅시다. import React, { useEffect, useState } from 'react'..

  Read More
• 개발자에게 유용한 툴

  Tip 2022. 12. 7. 17:30

  1. Bundle Phobia Bundlephobia | Size of npm dependencies Bundlephobia helps you find the performance impact of npm packages. Find the size of any javascript package and its effect on your frontend bundle. bundlephobia.com 번들 포비아는 간단하게 NPM 패키지 이름을 입력하는 것으로 간단하게 번들 사이즈부터 다운로드 시간, 구성 요소, 알파벳별 구성요소의 사이즈까지 까지 모두 간단하게 확인할 수 있는 사이트입니다. 이외에도 package.json을 업로드하여 한번에 다양한 패키지를 동시에 확인하는 것 역시 가능합니다. 2. Googl..

  Read More
• React에서 조건부 렌더링을 사용하는 5가지 방법

  Tip 2022. 12. 1. 16:19

  React로 개발을 하다 보면 조건부 랜더링을 사용하는 경우가 무척 많이 있습니다. 물론 그 복잡도가 낮을 경우라면 간단하게 삼항 연산자로 처리하면 되지만 복잡해지는 경우도 많기 때문에 이 글에서는 조건부 랜더링을 처리하는 다양한 방법에 대해 소개해 보겠습니다. 1. && 사용하기 조건의 값이 0, false, undefiend가 아닌 경우 render 해 주며, 가장 짧고 간결하게 사용할 수 있습니다. const Test: React.FC = ({ anyProp }) => { ... return ( ... {anyProp && This is Show!!} ... } 2. Ternary operator True or False 형식에서 많이 사용하며 아마 React를 사용할 때 가장 많이 사용하는 방법입..

  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
• 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