React Native 3

[React Native] Jest, React Native Testing Library 적용기

내 사이드 프로젝트 중 운동 어플 '헛둘'에 테스트 코드를 작성해보려고 한다. 타이머를 밀리세컨드 단위로 조작하다 보니 예상치 못한 버그 방지에도 좋을 것 같다는 생각이 들었다. 툴은 가장 많이 쓰이는 Jest와 React Native Testing Library를 사용하려고 한다. Jest 메타(구 페이스북)에서 관리하는 Javascript의 테스트 러너이다. 웹에서는 jsdom을 사용하지만, 모바일에서는 네이티브 모바일 환경을 재현하는 방식으로 사용한다. DOM이나 브라우저 API를 로딩하지 않아 실행 시간이 더 줄어든다. jsdom: Node.js 내에서 실행되는 가벼운 브라우저 (가상의 Dom) Jest는 React Native 프로젝트를 생성하면 package.json 파일에 자동으로 생성되어 ..

React-native 2024.01.29

[React Native] requireNativeComponent: "RNCSafeAreaProvider" was not found in the UIManager.

1. 문제 발생 React Native cli / Typescript 환경에서 SafeAreaProvider 컴포넌트를 설치하고, import했더니 이 에러를 만나게 되었다. SafeAreaProvider: 리액트 네이티브가 제공하는 컴포넌트 중에 하나로 기기의 안정영역(Safe Area)을 고려하려 UI를 렌더링 할 수 있게 도와주는 컴포넌트이다. Safe Area: 기기의 화면에서 실제 컨텐츠를 렌더링 할 수 있는 영역 import { SafeAreaProvider } from 'react-native-safe-area-context'; function App(): JSX.Element { return ( ... ); } error: Invariant Violation: requireNativeCom..

React-native 2023.03.01

[React Native] Mac에서 React Native CLI 환경 구축부터 실행까지

2021.09.24 - [React-native] - [React Native] Windows에서 React native 환경 구축부터 실행까지 1. Homebrew 설치 Homebrew는 Mac용 패키지 관리자이다. 사용하면 간단하게 명령어로 필요한 패키지를 설치할 수 있다. Homebrew: https://brew.sh/ 터미널을 열어 명령어로 Homebrew를 설치하고 잘 설치 됐는지 확인해 보자. $ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" $ brew --version Homebrew 3.6.20 2. rbenv설치 rbenv는 Ruby 버전 관리자이다. Mac에는 ..

React-native 2023.01.29