React-native
[react-native] 테스팅 툴 변경 (enzyme -> testing-library/react-native)
enzyme 환경에서 비동기 처리 후 state변경에 대응하는 과정에서 너무 고통을 받다 보니, waitFor expectation을 지원하는 testing-library를 써야겠다는 생각이 들었다. 전환하고 나니 테스트도 원할해지고, 직관적으로 사용할 수 있는 것 같아 만족스럽다. Introduction | Testing Library React Native Testing Library is a testing library for React Native inspired testing-library.com enzyme 다 썰어버리고 심플하게 간다 testHelper/utils.tsx import React from "react"; import { fireEvent as fe, FireEventFuncti..
[react-native] SafeAreaView와 키보드 높이
RN의 SafeAreaView 컴포넌트는 최신 IOS 기기에서 발생하는 노치 영역 및 홈 버튼 영역(?)에 대한 영역 보장을 해주는 컴포넌트이다. 즉 달리 말하면 SafeAreaView 컴포넌트가 위치한 영역을 기준으로 노치영역과 홈 버튼 영역에 대한 보장이 이뤄진다고 할 수 있다. 따라서 IOS에서 상단이나 하단 영역에 대한 SafeArea 보장을 받기 원한다면 SafeAreaView를 사용해 원하는 영역을 Wrapping 하면 되는데, 다른 컴포넌트를 Wrapping 해서 사용하는 것 외에 export function Navigation() { return ( ); } 이런 식으로 사용해서 상단 노치영역만 확보하거나 하는 일이 가능하다. 이런 식의 스킬이 필요한 상황은 어떤 상황일까? 1. SafeA..
React-Native-Web BP
ReactNative로 App을 만들게 되었다. 근데 추후에 WebView형태로 Embed 될 가능성도 있다고 해서 찾아보니 다행히 ReactNative 코드를 Dom으로 렌더링 해주는 라이브러리가 있었다. 이번 기회에 나중에도 써먹을만한 보일러 플레이트를 만들었다. 사용 기술 - Typescript - Redux, Redux-saga, Redux-toolkit - Axios - Styled-Components - Storybook - husky, lint-staged - Jest - Eslint, Prettier 욕심을 그득그득 내서 Storybook, Jest, husky 연동까지 해놨다. 정작 스크린 구조등을 잡아놓지 않아서... 추후 업데이트 가능성이 농후하다. GitHub - Jonghakseo..