코딩정비소 코딩정비소

아이의 생년월일을 입력하기 위해서 직접 string으로 입력하는 방법도 있지만, 다른 앱들을 살펴보면 달력이 나와서 달력을 클릭하면 클릭한 값을 넣어준다. 웹개발자라면 input에 type만 설정해도 달력이 나와서 설정할 수 있다. React-native에도 비슷한 기능을 하는 라이브러리나 메서드가 있지 않을까?   먼저 인터넷에서 찾아보자.  DateTimePicker https://docs.expo.dev/versions/latest/sdk/date-time-picker/ DateTimePickerA component that provides access to the system UI for date and time selection.docs.expo.devexpo에서 제공하는 라이브러리가 있음을 알..

react-native에서 local에 저장하는 기능이 있을까? 한번 찾아보자. react-native localstroage 입력하는 바로 결과가 나온다. https://docs.expo.dev/versions/latest/sdk/async-storage/ AsyncStorageA library that provides an asynchronous, unencrypted, persistent, key-value storage API.docs.expo.dev문서에 따라서 설치를 진행해 보자 npx expo install @react-native-async-storage/async-storageAsyncStorage설치가 완료 되었으면 사용법을 보고 진행해 보자.https://react-native-asy..

React-native expo 로 wonder weeks 앱 만들기 - 환경 세팅 하기 개발 환경 세팅이 모두 완료 후 실행하면 EXPO에서 생성된 애플리케이션이 실행되었다. 이번 시간에는 WONDER WEEKS에서 아이 이름과, 생년 월일(태어난날)을 입력하는 모달을 만들어 보자. React Native modal 분석하기 앱은 대부분의 기능들이 규격화되어있다는 점을 알면, 아마도 modal도 공홈에서 제공하고 있진 않을까? 하는 마음에 찾아보았다.  https://docs.expo.dev/router/advanced/modals/ ModalsLearn how to use modals in Expo Router.docs.expo.dev 놀랍게도 모달을 만드는 방식에 대해 세밀하게 나와다는 점을 알 수..

솔로프리너? 들어본 적 있는가?  Solo + Entrepreneur의 합성어로, 1인 창업가나 1인 기업가라고 칭해지는데. 나도 한번 해보고 싶어서 도전해 본다. React Native의 expo를 선택한 이유는. 현 FE개발자로 JS랑 React가 익숙했기에 React Native에 대한 진입장벽이 낮게 느껴졌고, 개발 한 번으로 IOS, Android 둘 다 배포할 수 있다니. 군침이 싹 돈다. expo로 개발 한 이유는 별 생각 없었고, 공식 문서를 따라가다 보면 자연스럽게... expo로 개발을... https://reactnative.dev/docs/environment-setup 예전에는 이렇게까지 밀어주는 느낌은 못받았는데. 공식 문서를 따라 환경 세팅을 해보자.   1. React-nat..

https://www.npmjs.com/package/react-native-vector-icons react-native-vector-icons Customizable Icons for React Native with support for NavBar/TabBar/ToolbarAndroid, image source and full styling. www.npmjs.com react native vector icon 페키지는 정말 많이 사용하는 유용한 아이콘이다. 위의 페키지를 사용하면 쉽게 여러 가지 아이콘들을 사용할 수 있다. 간단한 사용방법 1. 설치하기 npm install react-native-vector-icons 설치가 잘 되었는지 확인하기 npm ls --depth=0 위 그림과 같이 설..

리엑트 네이티브 expo 관련 빌드를 해보려고합니다. ^^잘 따라와 주세요 ㅎㅎ React Native build란?react-native + build 즉 직독 직해 하면 리엑트 네이티브를 짓는다 정도의 의미를 가집니다. expo에서는 build에 대해 "Apple App Store 및 Google Play 스토어에 제출할 수있는 iOS 및 Android 용 엑스포 앱의 독립 실행 형 바이너리를 만든다" 고설명하고 있습니다. 쉽게 말하면 앱스토어에 올릴수있는 파일을 만들어 낸다! 이해되셨나요? React Native build 해보기!expo에서 제공하는 문서를 따라서 진행보도록 하겠습니다.링크 : " https://docs.expo.io/versions/latest/distribution/buildi..

레이아웃을 이해하기 위한 3가지 요소 [1] flexDirection - flex를 레이아웃의 수직 수평을 결정 => 수평 : row, 수직 : column [2] JustifyContents - flexDirection에 의해 결정된 방향과 동일 => 종류 : 'flex-start', 'flex-end', 'center', 'space-between', 'space-around' [3] alignItems - flexDirection에 의형 결정된 방향과 반대 방향 => 종류 : 'flex-start', 'flex-end', 'center', 'space-between', 'space-around' 읽어도 모르겠죠?? 예시로 설명해 보겠습니다. import React from 'react'; impor..

[1] inline [2] style object mapping const styles = StyleSheet.create({ B_box : {width: 50, height: 50, backgroundColor: 'black'} }); import React from 'react'; import { AppRegistry, View, StyleSheet } from 'react-native'; class Example extends React.Component { render() { return ( ); } }; const styles = StyleSheet.create({ B_box : {width: 50, height: 50, backgroundColor: 'black'} }); AppRegistry..