본문 바로가기
728x90

프로그래밍 팁/React Native10

Windows에서 react-native 개발환경 세팅하기 React Native는 iOS 및 Android 모바일 애플리케이션을 만드는 데 사용되는 JavaScript 기반의 프레임워크입니다. 이번에는 Windows 운영체제에서 React Native 개발 환경을 설정하는 방법에 대해 알아보겠습니다. 1. Chocolatey 설치 Chocolatey는 Windows에서 패키지 관리를 위한 도구입니다. React Native 개발을 위해서는 Chocolatey가 필요합니다. Chocolatey를 설치하려면 PowerShell을 열고 다음 명령을 실행하십시오. Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net... 2023. 2. 27.
Windows 에서 Expo 개발환경 세팅하기 Expo는 React Native 애플리케이션 개발을 더욱 쉽게 만들어주는 도구입니다. 이번에는 Windows 운영체제에서 Expo 개발 환경을 설정하는 방법에 대해 알아보겠습니다. 1. Node.js 설치 Expo를 개발하기 위해서는 먼저 Node.js가 필요합니다. Node.js를 다운로드하려면 공식 웹사이트에서 다운로드 페이지로 이동하십시오. Windows 운영체제에 맞는 버전을 다운로드하고 설치하십시오. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. Expo CLI 설치 Expo CLI를 설치하려면 Windows PowerShell을 실행하고 다음 명령을 입력하십시오. npm.. 2023. 2. 27.
MAC OS에서 Expo 개발환경 세팅하기 Expo는 리액트 네이티브 애플리케이션을 더 쉽게 만들 수 있도록 도와주는 프레임워크입니다. 이번에는 Mac에서 Expo 개발 환경을 설정하는 방법에 대해 알아보겠습니다. 1. Node.js 설치 Expo 개발을 위해서는 Node.js가 필요합니다. Node.js를 다운로드하려면 공식 웹사이트에서 다운로드 페이지로 이동하십시오. Mac OS 버전에 맞는 버전을 다운로드하고 설치하십시오. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. Expo CLI 설치 Expo CLI를 설치하려면 터미널에서 다음 명령을 실행하십시오. npm install -g expo-cli 이 명령을 실행하면 E.. 2023. 2. 27.
React Native 패키지 업데이트 후 제대로 동작하지 않을 때 React Native 혹은 Expo 패키지 업데이트 후 동작이 원활하게 동작하지 않을 때 적절히 사용하면 좋은 명령어들 입니다. 업데이트에 의해서 많은 파일이 급격하게 변하거나 하는 경우 watchman의 데이터나 npm cache데이터가 꼬이면서 빌드 혹은 실행이 제대로 되지 않는 경우에 사용하면 좋습니다. watchman 정리 watchman은 변경됨을 감시하고 기록하기 위해 만들어진 서비스입니다. react-native와 마찬가지로 facebook에서 만들어졌습니다. 아래의 명령어로 watchman에서 관리 감시하고 있는 기록을 모두 삭제할 수 있습니다. watchman watch-del-all npm cache 데이터 정리 npm에서 관리하고 있는 cache 데이터를 삭제하는 방법입니다. 패키지.. 2022. 9. 15.
Visual Studio Code import 문 정리 단축키 Visual Studio Code에서 javascript 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 .. 2022. 9. 14.
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:.. 2022. 7. 11.
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.. 2022. 6. 14.
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.. 2022. 2. 8.
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.. 2022. 2. 6.
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.. 2022. 2. 4.
728x90