개발
-
React Native: 싸인 기능 구현하기개발/리액트 네이티브 2021. 1. 15. 19:00
구현 전 나의 요구사항 정리: - 페인트면 되지 않을까? - 페인트에 그린 그림은 저장되어야 한다. - 초기화도 되었으면 좋겠고 - 1초만에 드래그가 끝난다면 그건 안그려졌으면 좋겠어. 찾아보니 react-native-signature-canvas란게 있었다. 근데 4번 항목이 충족 될 만한 기능은 없었지만, 네이티브 스크린 터치 + onClear()를 함께 사용하면 구현할 수 있을 것 같다. - Supports Android and IOS and Expo - Pure Javascript impolementation with no native dependencies - Only depend on react and native
-
React Native: 카메라 스캔 영역 지정하기 camera scan limit area개발/리액트 네이티브 2021. 1. 15. 18:52
편리한 카메라 모듈인 react-native-camera를 사용했다. 설치: yarn add react-native-camera 카메라 스캔 영역 지정하는법: const CAM_VIEW_HEIGHT = Dimensions.get('screen').width * 1.5; const CAM_VIEW_WIDTH = Dimensions.get('screen').width; const leftMargin = 100; const topMargin = 50; const frameWidth = 200; const frameHeight = 250; const scanAreaX = leftMargin / CAM_VIEW_HEIGHT; const scanAreaY = topMargin / CAM_VIEW_WIDTH; con..
-
관리자 테마 시스템 만들기 (1) - 테마 레퍼런스 종류개발/리액트 2021. 1. 14. 22:00
어드민에서 제일 많이 사용하는 컴포넌트는 테이블이다. 따라서 테이블 기능이 다양한 UI 프레임워크를 중점적으로 찾게 되었다. 엘리먼트 리액트 UI 엔트디자인이랑 비슷 Table with fixed column 있음 깔끔하고 다양한 컴포넌트 엔트디자인 어드민 개발을 위한 디자인 프레임워크로 유명 Table with fixed column 있음 깔끔하고 다양한 컴포넌트 테일윈드CSS CSS 지만 디자인이 귀엽고 예쁨 상세하고 다양한 API가 있어서 디자인 시스템 만들 때 참고 하기 좋음 블루프린트 고전적인 느낌(?) 컴포넌트가 다양하진않지만 뭔가 신선한 기능들이 많음 (테이블: Freezing, Loading...) 그로맷 스토리북 만들 때 컴포넌트 기능 별 그룹화 할 때 참고용
-
React Native: KeyboardAvoidingView와 ScrollView를 같이 사용할 경우 주의해야 할 점개발/리액트 네이티브 2021. 1. 13. 14:55
keyboardShouldPersistTaps 탭 후 키보드가 표시되는 시기를 결정한다. 보통 KeyboardAvoidingView와 ScrollView를 같이 사용할 경우 키보드와 화면 탭을 제어하기 위해 사용한다. 나는 보통 handled 속성을 이용한다. 키보드가 위로 올라와 있을 때 텍스트 인풋 외의 다른 영역을 터치할 경우 키보드 뷰에 대한 컨트롤에 영향을 미치는 속성: - always : 기능이 있는 영역을 제외한 다른 스크롤뷰의 어느 영역을 터치해도 키보드가 닫히지 않는다. - handled: 기능이 있는 영역도 먹힘과 동시에 키보드가 닫힌다. 다른 영역 터치시 키보드가 닫힌다. - never (default) : 다른 영역을 터치하면 키보드가 닫힌다. children의 경우는 탭을 받지 못..
-
React Native: onLayout Callback으로 컴포넌트 사이즈 측정하기개발/리액트 네이티브 2021. 1. 7. 18:01
리액트 네이티브 onLayout을 활용한 컴포넌트 사이즈 측정 훅으로 만들기: const useComponentSize = () => { const [size, setSize] = useState(0); const onLayout = useCallback((event) => { const {width, height, x, y} = event.nativeEvent.layout; setSize({width, height, x, y}); }, []); return [size, onLayout]; } const App = () => { const [size, setSize] = useComponentSize(); [...] }
-
React Native: IOS 시뮬레이터 변경 후 실행 시키는 방법개발/리액트 네이티브 2021. 1. 7. 13:38
개요 실행되어 있는 시뮬레이터에서 File>Open Deice에서 선택해서 실행시켜도 되는데 가끔 빌드가 안되서 에러나는 디펜던시 문제 때문에 다른 방법을 모색하던 중 명령어로 시뮬레이터를 바꿔서 빌드하여 실행시키는 방법을 찾게되었다. IOS 시뮬레이터 리스트 보기 설치 되어 있는 xcode 시뮬레이터 확인하는 방법: xcrun simctl list devices 시뮬레이터 변경하기 원하는 디바이스 시뮬레이터로 실행시키기 npm run ios -- --simnulator="iPhone 8"