Mobile Application5 [React Native] 버전별 IOS Simulater 설치 및 적용 Xcode는 최신 버젼으로 업데이트 될때마다 가장 최신 IOS를 기본(Default) 시뮬레이터로 설정합니다. 하지만 디바이스 사이즈에 따라 개발해야하는 입장에서 가장 보편적으로 사용하는 시뮬레이터로 변경하여 개발하는게 편합니다. 이번 게시글에서는 IOS 시뮬레이터 다른 버젼을 설치하는 방법에 대해 알아보겠습니다. (1) Xcode를 켜주시고, 맨 위 설정탭에서 [Window] -> [Devices and Simulators]를 들어갑니다. (2) 왼쪽 상단에서 [Simulators]를 누르고 맨 아래 [+] 버튼을 눌러줍니다. (3) [Device Type]에서 원하는 디바이스 버젼와 OS Version을 선택한 후 [Create]를 눌러줍니다. (4) 이후, Xcode로 React Native 프로젝.. 2023. 7. 1. [React Native] Debounce를 활용한 검색창 & 자동완성 구현하기 || Typescript | Flatlist || 안녕하세요. 개발의 체질 최원혁입니다. 이번 게시글에서는 앱 개발을 할때 검색창과 자동완성 기능을 구현하는 방법에 대해 알아보겠습니다. 📌전체 코드는 게시글 하단에 Github주소를 남겨 두겠습니다!~! # 1. 변수 설정 interface ISearchData { cityname:string; id:string; } const [loading, setLoading] = useState(true); const [list, setList] = useState([]); const [keyword, setKeyword] = useState(''); loading : 검색 시, UI상에 보여지는 로딩 아이콘 On/Off list : 검색어가 포함된 데이터 리스트 keyword : 검색 키워드 # 2. 검색 창(.. 2023. 4. 20. [React-Native] react-native-picker-select 사용하여 Select Box 구현하기 위 사진 처럼 선택 리스트를 만드는 방법을 구현해보겠습니다. # react-native-picker-select 공식 Github : https://github.com/lawnstarter/react-native-picker-select GitHub - lawnstarter/react-native-picker-select: 🔽 A Picker component for React Native which emulates the native int 🔽 A Picker component for React Native which emulates the native interfaces for iOS and Android - GitHub - lawnstarter/react-native-picker-select: 🔽 .. 2022. 3. 28. [React Native] 스플래쉬 스크린(splash-screen) 구현하기 디지니, 넷플릭스 같은 앱을 키게 되면 맨 처음 이런 화면이 나오는걸 많이 보셨을겁니다. 이 화면을 스플래쉬 스크린(splash-screen) 이라고 합니다. 스플래쉬 스크린을 사용하는 이유는, 사실 저 화면 뒤에선 아주 바쁘게 코드가 돌아가고 있습니다. 사진, 또는 데이터를 서버로부터 갖고와서 화면에 보여지게 하거나, 사용자의 핸드폰에 앱의 로그인 데이터가 있는지 조회를 하거나, 등등 앱 실행 초기에 보여주면 안되는 과정을 가리기 위해 스플래쉬 스크린을 사용합니다. React Native에서 이를 적용하기 위해선 설정을 해줘야합니다. 지금부터 그 과정을 보여드리겠습니다. # 해당 글의 과정은 안드로이드 설정입니다. React-native-splash-screen 공식 GitHub : https://gi.. 2022. 3. 22. [React Native] 카카오 로그인 API 적용하기[안드로이드 버젼] 카카오 개발 공식 문서에는 웹, 안드로이드, IOS 플랫폼에서 사용할 수 있도록 지원합니다. 안드로이드와 IOS같은 경우 Kotlin과 Swift 언어를 통한 접근 방법을 알려주지만, React-Native 같은 경우는 공식 문서에서 찾아볼 수 없습니다. 하지만 react-native-seoul에서 호환을 해주는 패키지를 개발해 주셔서 npm을 통해 이용할 수 있게 되었습니다. 공식 Github 주소: https://github.com/react-native-seoul/react-native-kakao-login GitHub - react-native-seoul/react-native-kakao-login: react-native native module for Kakao sign in. react-na.. 2022. 3. 19. 이전 1 다음 반응형
