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

✔️ 필요성 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로 앱 개발을 할 때 MS Azure의 appCenter를 활용하면 CICD를 잘 구축할 수 있다. 이 때 매번 UI를 조금씩 수정할 때마다 새로 Deploy를 하고 build를 하고 모든 사람들이 새로 앱을 다운받아야 하는 것이 다소 귀찮다. CodePush는 모바일 앱 업데이트를 사용자의 장치에 직접 배포 할 수 있는 App Center 클라우드 서비스입니다. pod-install을 하지 않아도 되는 정도의 UI는 code-push 로 배포하고 앱을 2번 정도 껐다가 켜면 업데이트가 반영된다. https://docs.microsoft.com/en-us/appcenter/distribution/codepush/ Use CodePush to update your app ..

✔️ 필요성 iOS 시뮬레이터로 개발하다보면 디바이스를 변경하면서 각 디바이스에서 어떻게 보여질 지 확인해야하는 상황이 자주 생깁니다. 제 iOS 시뮬레이터에서는 기본 디바이스가 iPhone 12로 되어있는데요. 보다 작은 화면인 iPhone 13 mini에서 UI를 확인해보고 싶습니다. ✔️ 문제 해결 //기존 npm run ios //수정 npm run ios --simulator="iPhone 13 mini" ✔️ 참고 iOS 디바이스 이름을 참고하세요~ npx react-native run-ios --simulator="iPhone 8" npx react-native run-ios --simulator="iPhone 8 Plus" npx react-native run-ios --simulator=..

✔️ 에러 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..

✔️ 필요성 iOS 시뮬레이터를 통해서 개발할 때 시뮬레이터는 위치(위경도)를 자동으로 잡는 것이 아니다. 내가 특정 값으로 설정해줘야한다. 나같은 경우는 맨처음에 경도(longitude)가 음수값으로 나와있어서 한국인으로써 놀랐다. ✔️ 문제 해결 iOS 시뮬레이터 메뉴 > Features > Location > Custom Location을 클릭 내가 원하는 위경도 값을 직접 입력한 다음에 OK를 누르면 끝

✔️ 필요성 지난번에 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을 받아서 사..