반응형

프로그래밍/React Native 7

React Native 패키지 업데이트 후 제대로 동작하지 않을 때

React Native 혹은 Expo 패키지 업데이트 후 동작이 원활하게 동작하지 않을 때 적절히 사용하면 좋은 명령어들 입니다. 업데이트에 의해서 많은 파일이 급격하게 변하거나 하는 경우 watchman의 데이터나 npm cache데이터가 꼬이면서 빌드 혹은 실행이 제대로 되지 않는 경우에 사용하면 좋습니다. watchman 정리 watchman은 파일이 변경됨을 감시하고 기록하기 위해 만들어진 서비스입니다. react-native와 마찬가지로 facebook에서 만들어졌습니다. 아래의 명령어로 watchman에서 관리 감시하고 있는 기록을 모두 삭제할 수 있습니다. watchman watch-del-all cache clean npm에서 관리하고 있는 cache 데이터를 삭제하는 방법입니다. 패키지관..

import 문 정리 단축키

import 문에서 안 쓰는 정의 들을 깔끔하게 정리하는 단축키입니다. Windows: Alt + Shift + O Mac: Option + Shift + O 단축키를 사용하면 사용하지 않는 정의는 모두 지워지고, 가나다순으로 정렬됩니다. 단축키를 사용하기 전과 후의 결과 예시는 아래와 같습니다. 사용하기 전 import React, { useState, useEffect } from 'react' import { SafeAreaView, StyleSheet, View, Dimensions, Alert, Platform, Image } from 'react-native' import { Text, Icon, Button, colors } from 'react-native-elements' import {..

React Native Elements 기본과 다크 테마 컬러 값

React Native Elements의 각 테마별 기본 컬러 값입니다. 컬러 값을 볼 수 있는 파일 위치는 "/node_modules/react-native-elements/dist/config/colors.js"입니다. Default Theme Color const colors = { primary: '#2089dc', secondary: '#ca71eb', white: '#ffffff', black: '#242424', grey0: '#393e42', grey1: '#43484d', grey2: '#5e6977', grey3: '#86939e', grey4: '#bdc6cf', grey5: '#e1e8ee', greyOutline: '#bbb', searchBg: '#303337', success:..

Expo SDK 45 주요 변경사항

Expo SDK 45에서 변경된 사항을 알아 보겠습니다. 주요 변경사항 Expo Go 인터페이스 업데이트 new Sweet API로 재작성된 Clipboard와 WebBrowser 모듈이 개선되었습니다. expo-crypto, expo-random, expo-haptics 그리고 expo-localization이 JSI로 이동하였습니다. 안드로이드 라이브러리에 의해 추가되 권한들(permissions)을 더 쉽게 제외(제거)할 수 있습니다. (app.json 혹은 app.config.js에서 android.blockedPrmissions 항목에 제외할 항목을 배열형태로 추가하면 됩니다.) Android compileSdkVersion 31, Java 11 사용 React Native 0.68 사용 exp..

Expo 프로젝트관련 명령어

expo-cli 설치 expo 명령어를 사용하기 위해서 "expo-cli" 패키지를 전역에 설치합니다. (cli는 "command line interface"를 뜻합니다.) npm install expo-cli -g expo 프로젝트 생성 expo init 프로젝트명 expo 프로젝트 실행 expo-cli 명령어를 사용하는 경우 # 서버 실행 expo start # 서버 + android 실행 expo start -a # 서버 + ios 실행 expo start -i yarn 명령어를 사용하는 경우 전역에 "yarn" 패키지가 설치되어 있어야 합니다. (예: npm install yarn -g) # yarn 설치명령어 #npm install yarn -g # 서버 실행 yarn start # 서버 + a..

React Native UI Components Library Top 3

Fullstack 개발자 혹은 개인 개발자의 경우 컴포넌트들을 일 일이 혹은 조금 예쁘게 꾸미기에는 시간과 노력이 많이 들어가게 됩니다. 그럴 때 UI 컴포넌트 라이브러리를 사용하여 개발 시간을 단축 혹은, 조금 더 사용자에게 친화적인 UI/UX를 구성하는데 도움을 주는 3대 UI 컴포넌트 라이브러리에 대해서 알아보겠습니다. 아래는 최근 5년동안의 "native-base, react-native-elements, react-native-paper"에 대한 트렌드를 보여주는 그래프입니다. 아래의 3개의 컴포넌트는 현재 React Navigation과 아주 호환이 잘 되어 있습니다. React Navigation | React Navigation Routing and navigation for your Re..

Android Virtual Devices 에 Play Store 추가하는 방법

Android Virtual Devices 중에서 Play Store를 지원하지 않는 가상 기기에 추가하는 방법에 대해서 알아보겠습니다. (현재 Tablet 버전은 전부 지원이 되지 않고 있습니다.) 1. Android Virtual Device Manager에서 Play Store를 추가하려는 emulator의 Actions버튼에서 Show on Disk를 선택합니다. 그러면, 파일 탐색기(mac은 Finder)가 열리며, 폴더 안에 config.ini파일을 열어 봅니다. 2. PlayStore.enabled=false를 PlayStore.enabled=true로 변경합니다. 3. "image.sysdir.1=system-images/android-30/google_apis/x86/"를 "image.s..

반응형