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

✔️ 필요성 지난번에 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에 있는 컬러를 가지고 오고 싶을 때는 어떻게 하나? ✔️ 문제 상황 내가..

✔️ 필요성 그 전까지 갑자기 잘되다가 시뮬레이터에 다음과 같은 문제가 생겼다. 정말 갑자기..? 보통 RN에러에서 watchman을 건들거나 --reset-cache 하라고 해서 문제가 단번에 해결된 적 별로 없었다. console.error("React Native version mismatch") ✔️ 해결방법 아래와 같이 돌려주니 금방 해결됐다 다행 npx react-native upgrade npm install -g react-native-cli npx pod-install npm run ios

✔️ 문제상황 styled-component 공식문서에서 시키는대로 props에 따라서 스타일링을 다르게 하고 싶은데, 무엇인가 속성이 또 없다고 합니다. 왠지 typescript 때문인 것 같습니다. ✔️ 해결 styled-component 부분에서 generic을 활용해서 style에서 활용하는 props의 type값을 지정해주면 됩니다.

✔️ 문제상황 공식문서에서 시키는대로 theme.ts를 만들고 그걸 활용하려고 하는데 아래와 같이 DefaultTheme 형식에 colors 속성이 없다고 한다. 아...네... 이것이 모두 typescript를 쓴 제 잘못입니다... 애증의 tsc ✔️ 해결하기 root 디렉토리에 styled.d.ts라는 파일을 만들고 theme.ts의 형식을 DefaultTheme이라는 이름으로 지정해준다. typescript에서 지양하는 any를 쓴 건 눈감고 지나가주세요~ // styled.d.ts import 'styled-components'; // styled-components안에 들어있는 DefaultTheme 형식 지정해주기 declare module 'styled-components' { export..