React Native 썸네일형 리스트형 iOS에서 react native 프로젝트가 실행되자마자 중지되는 에러 현재 최신 버전인 React Native 0.7.0을 이용해 프로젝트를 생성하였고, 바로 iOS 시뮬레이터를 통해 실행하던 중 다음과 같은 에러가 발생하였습니다. Library not loaded: @rpath/hermes.framework/hermes 이 에러는 Podfile에서 hermes엔진을 사용하겠다고 설정하였으나, xcode프로젝트에서 hermes라이브러리가 로드되지 않아 발생하는 문제입니다. Podfile :hermes_enabled => true, 따라서 xcode프로젝트에 아래와 같은 절차를 통해 hermes라이브러리를 로드해주면 됩니다. Project Target -> 해당 프로젝트 -> Build Phases -> Link Binary With Libraries에 아래 라이브러리 추가.. react-native init 시 android 및 ios폴더가 생성되지 않는 문제 react-native 를 이용해 프로젝트를 생성하려면 아래와 같이 init 명령어를 이용하면 되는데 최근 새로운 프로젝트를 생성하였더니 android 및 ios폴더가 생성되지 않는 문제가 발생하였습니다. npx react-native init AwesomeProject 공식 매뉴얼을 확인해 보니 기존에 설치한 react-native-cli 패키지가 존재하는 경우 발생할 수 있는 문제임을 확인하였고, 아래 명령어를 입력하여 기존 글로벌 패키지를 삭제한 뒤 최신 버전인 react native 0.7.0 을 이용해 정상 실행까지 완료하였습니다. npm uninstall -g react-native-cli @react-native-community/cli 참고 문서 https://reactnative.dev/.. [React Native] HOC (High Order Component) hoc는 리액트에서 제공하는 기능이 아닌 리액트 프로젝트를 구성하는데 쓰이는 패턴으로, 컴포넌트를 인자로 받아 새로운 컴포넌트를 반환하는 함수로 사용됩니다. hoc가 사용되는 대표적인 예로는 권한 검사, 로그인 상태 검사 등이 있습니다. 다음은 특정 컴포넌트에 접근권한 및 로그인 상태를 검사하기 위해 hoc를 사용하는 예시 입니다. const Auth = (SpecificComponent, loginRequired, adminRequired = null) => {} 우선 권한 및 로그인 상태를 검사하는 hoc인 Auth함수는 컴포넌트, 로그인 필요 여부, 관리자 권한 필요 여부를 인자로 갖습니다. 각각의 인자는 다음과 같은 역할을 하게 됩니다. SpecificComponent : hoc를 수행한 후, 렌.. [React Native] Context(Provider) 사용법 일반적으로 React, React Native에서 컴포넌트간에 인자를 넘겨주기 위해서는 props를 사용합니다. 하지만 특정 인자가 앱 전체에서 쓰이는 경우나 하위컴포넌트 대부분에서 쓰이는 경우, 일일히 props를 통해 인자를 넘겨주는 것은 효율이 좋지 않습니다. 이럴때 쓰이는 것이 바로 Context입니다. Context는 어플리케이션 안에서 전역적으로 사용되는 데이터에 주로 쓰입니다. 이러한 데이터로는 로그인한 유저, 사용 언어, 테마 등이 있습니다. 아래는 데이터를 Context에 저장하여 사용하는 예제입니다. 우선 위와 같이 데이터를 저장할 Context를 생성해 준 후, Context가 데이터를 가질 수 있도록 Context Provider에 데이터를 넣어주는 Provider 컴포넌트와, Co.. [Firebase] 비동기 함수 내의 반복문에서 동기 처리하기 firebase 함수는 async - await 형식의 비동기 처리를 해야 하는데, 함수 내에서 callback 함수를 반복적으로 사용하려 했지만 잘 작동하지 않는 문제가 발생했습니다. exports.exampleFunction = functions.https.onCall(async (data, context) => { for await (const data of dataSet) { await metadataRef .child('ref') .once('value', (snapshot) => { if (snapshot.exists()) { } }); } } 위의 코드같이 작성하여 문제를 해결했습니다. 비동기 방식의 이해도가 높다면 문제가 되지 않았을것 같아 아직 많이 부족하다는 걸 배웠습니다. 박준호 / .. (0 , (_wordwrap || _load_wordwrap(…)).default)(…)(…).trimStart is not a function on expo init - 에러 개요처음 ReactNative의 공식문서를 따라서 예제 프로젝트를 실행시키다 보면 '(0 , (_wordwrap || _load_wordwrap(…)).default)(…)(…).trimStart is not a function on expo init 와 같은 에러가 발생하는 경우가 있다. 본 글에서는 위 에러의 발생원인과 처리방밥에 대해서 안내한다. 발생원인expo 공식 문서를 확인해보면 Node.js가 10 버전 이상의버전이 필요함을 알 수 있다. 해결방법 1. 캐시 삭제 1$ sudo npm cache clean -fcs 2. n 모듈 설치1$ sudo npm install -g ncs 3. n 모듈을 사용하여 Nodejs 설치 1$ sudo n stablecs ※ 현재 설치된 Node.js가 무슨.. React Native Navigation을 이용해 페이지 전환하기 개요이 글에서는 모바일 엡에서의 페이지 전환을 위해 react-navigation (v3) 라이브러리를 이용해 보도록 하겠습니다. 라이브러리 설치프로젝트 루트에서 다음 명령어를 입력해 라이브러리를 추가해 주세요. 12$ npm install --save react-navigation$ npm install --save react-native-gesture-handlercs 다음으로 설치된 라이브러리를 링크합니다. 1$ react-native linkcs 네비게이션의 종류1. createStackNavigatorView를 Stack으로 쌓는 일반적인 네비게이터 입니다. 2. createSwitchNavigator로그인, 회원가입 등을 할 때 (사용자가 임의로 뒤로가기 등을 할 수 없는) 사용하면 유용한 네.. 이벤트 다루기 개요본문에서는 React Native에서 Button 등의 이벤트를 다루는 방법을 안내한다. Button UI 생성하기먼저 Button 요소를 이용하기 위해 먼저 Button을 import 해준다. 12import React, {Component} from 'react';import {Platform, StyleSheet, ..., Button} from 'react-native';cs 다음으로 클래스의 render() 함수를 통해 버튼 요소를 추가한다. 1234567891011121314export default class App extends Component { constructor(props) { super(props); this.state = { username: '' }; } render() .. 이전 1 2 다음
