어리둥절 분석가 그리고 개발자

✔️ 필요성 react-native 의 상단에서 뒤로가기 버튼을 깔끔하게 만들고 싶다면 어떻게 할 수 있을까? 필자는 styled-components를 활용하여 개발하였다 ✔️ 문제 해결 HeaderLeftGoBack이라는 컴포넌트를 만들어둔 다음에 Screen에서 쓰이는 곳마다 공통적으로 사용하자. 뒤로가기 꺽쇄 모양은 원하는 아이콘으로 얼마든지 활용가능하다. hitSlop값을 적당히 줘서 사용자가 적당히 아이콘 근처를 눌러도 뒤로가기를 클릭할 수 있도록 설정해주었다. import React from 'react'; import styled from 'styled-components/native'; import Icon from 'react-native-vector-icons/Ionicons'; con..

✔️ 에러 React Native로 개발하면서 iOS 시뮬레이터로 확인하는데 다음과 같은 warning이 등장했다 Failed to delete storage directory ✔️ 문제 해결 문제는 AsyncStorage에서 clear() 메서드에서 이슈가 있었다. 먼저 기존코드는 단순히 AsyncStorage.clear() 를 활용해서 클리어했는데 이 부분을 아래와 같이 바꿔주면 해결된다! import AsyncStorage from '@react-native-async-storage/async-storage'; const KEY = 'key'; const Storage = { async get() { const data = await AsyncStorage.getItem(KEY); if (!data..

✔️ 필요성 지난번에 UI Kitten Autocomplete를 통해 React Native에서 자동완성검색창을 만드는 기본편을 따라해보았다면 이번에는 내가 나의 취향에 맞춰서 꾸며서 응용을 해볼 수 있다. [자동완성검색] UI Kitten Autocomplete 사용하기 / 기본편 ✔️ 필요성 react-native-autocomplete-dropdown도 충분히 좋은 라이브러리인데 renderItem method를 사용해서 그릴 경우 autocomplete이 안되는 충격적인 에러가 있어서 급하게 UI Kitten에서 제공하는 것으로.. sezzled.tistory.com 응용을 할 때 가장 중심이 되는 부분은 renderItem 즉 검색을 했을 때 결과가 나오는 옵션창이 지금까지 일반적인 것이 아니라..

✔️ 필요성 React Native로 개발하다보면 (앱을 개발하다보면) 웹이랑 다르게 신경써야할 부분이 키보드이다. 키보드가 올라오면 화면의 약 1/3을 가리게 되는 데 이 때 어떻게 해야할 지 신경써야한다는 것이다. 검색창처럼 검색 결과가 검색창 아래로 내려오는 경우 더 신경이 쓰이는데, 이를 위해 앱을 보면 대체로 검색창은 가장 상단에 위치하는 것이 국룰이다. ✔️ 문제 해결 UI Kitten Autocomplete에서는 이에 대응하기 위해서 옵션창의 위치를 바꿀 수 있다. 검색 결과(옵션)이 나오는 부분이 원래 검색창 아래에 있는데 키보드를 인지하면 위로 바꿔주는 것이다. 키보드를 인지하기 위해서 react-native에서 제공하는 Keyboard.addListener를 사용했다. const [pl..

✔️ 필요성 react-native + styled-component로 개발하다보면 간혹 이런 에러 메시지를 확인할 수가 있다. width 어딘가에 units, 즉 단위가 없다는 얘기로 들린다. ✔️ 문제 확인 아래처럼 Dimensions를 활용해서 스크린의 너비를 가져오거나, 혹은 다른 어떤 value 값으로 지정해놓고 참조할 때 px를 까먹는 경우가 생길 수 있다. 나처럼... import React from 'react'; import styled from 'styled-components/native'; import {Dimensions} from 'react-native'; const FlatList = styled.FlatList` width: ${Dimensions.get('window')...

✔️ 필요성 react-native-autocomplete-dropdown도 충분히 좋은 라이브러리인데 renderItem method를 사용해서 그릴 경우 autocomplete이 안되는 충격적인 에러가 있어서 급하게 UI Kitten에서 제공하는 것으로 갈아탔다 [자동완성검색] react-native-autocomplete-dropdown 사용하기 ✔️ 필요성 RN에서 AutoComplete 검색창을 만들어야 해서 기존에 만들어진 AutoComplete 자동완성 검색창 라이브러리인 react-native-autocomplete-dropdown 라이브러리를 사용하기로 했다. github에서 제공하는.. sezzled.tistory.com UI Kitten - React Native UI Library ..

✔️ 필요성 RN에서 AutoComplete 검색창을 만들어야 해서 기존에 만들어진 AutoComplete 자동완성 검색창 라이브러리인 react-native-autocomplete-dropdown 라이브러리를 사용하기로 했다. github에서 제공하는 걸 보니 나쁘지 않은 것 같아서 사용하기로 마음먹음 https://github.com/onmotion/react-native-autocomplete-dropdown ✔️ 활용코드 이건 순전히 내 기록용으로 남기기 위해서 활용코드를 만듦. AutocompleteSearch라는 공통 컴포넌트를 만들고, 각각의 검색창마다 이걸 공통으로 가져다 쓸거다. suggestion 아이템들이 나오는 부분을 좀 더 예쁘게 꾸미고 싶기 때문에 renderItem을 받아서 사..

✔️ 필요성 React Native에서 컴포넌트 위에서 도형을 그리고 싶을 때가 있다. 나는 카드 컴포넌트를 사선으로 나누는 대각선(Diagonal Line)을 그리고 싶었다! ✔️ 해결 React Native에서 도형을 그릴 때는 react-native-svg 라이브러리를 이용하면 쉽게 그릴 수 있다. 태그를 활용해서 양쪽 대각선의 위치를 잡아주면 된다. px 단위로 위치를 잡을 수도 있는데 난 %를 활용해서 오른쪽 1/3 지점에서 왼쪽 1/3 지점으로 이어지는 대각선을 그렸다 npm install react-native-svg import React from 'react'; import styled from 'styled-components/native'; import Svg, {Line} from ..

✔️ 필요성 styled-components에서 props를 받아서 그 값에 따라 다르게 컴포넌트를 꾸미는 방법이 있다. 자세한 건 아래 포스팅을 참고! Styled-Components로 React Native Pressable 꾸미기 React Native의 기본 StyleSheet를 활용할 때에는 아래와 같이 이 pressed 되었을 때를 꾸밀 수 있다 [ styles.submit, Platform.OS === 'ios' && pressed && styles.submitPressed, ]} android_ripple={{color: '.. sezzled.tistory.com props 값을 받아서 props 값에 따라 theme에 있는 컬러를 가지고 오고 싶을 때는 어떻게 하나? ✔️ 문제 상황 내가..

✔️ Victory Native 활용 예제 파헤치기 Victory Native 개인적으로 너무 만족스러운 라이브러리이다. 무엇보다 가볍고 사용법이 직관적이고, 기본적으로 제공하는 옵션들도 다양하다. Victory Native로 그린 아래 차트를 어떻게 그렸는지 기록해두고, 내가 라이브러리 사용할 때마다 찾아보려고 한다. ✔️ 전체 코드 import React from 'react'; import {View} from 'react-native'; import styled from 'styled-components/native'; import { VictoryAxis, VictoryBar, VictoryChart, VictoryGroup, VictoryLegend, VictoryLine, VictorySca..