타입스크립트가 적용된 리액트 네이티브 프로젝트 만들기 프로젝트 생성 시, --template react-native-template-typescript 코드를 붙여서 생성함 Type Alias 타입에 별칭 붙임. interface 처럼 객체의 타입 지정 가능 type Person = { name: string; }; const person: Person = { name: 'John'; }; type People = Person[]; const people: People = [{name: 'John'}]; type Color = 'red' | 'orange' | 'yellow'; const color: Color = 'red'; 객체 타입은 interface 나 type 중 취향에 따라 사용하면 됨. 객체..
타입스크립트가 적용된 리액트 네이티브 프로젝트 만들기 프로젝트 생성 시, --template react-native-template-typescript 코드를 붙여서 생성함 기본 타입 파일 생성 시, 확장자를 ts 또는 tsx로 설정함. - 리액트 컴포넌트 작성 시 tsx로 설정해야 함. 타입 지정 시 변수 이름 뒤에 : 타입 형태로 지정하여 작성 기본 타입은 자동 추론하여 생성함. let message = 'Hello World'; 위와 같이 변수 선언 가능 함수 타입 함수도 자동 추론 가능 예시) function sum(a: number, b:number) { return a + b; } const result = sum(1, 2); 위와 같이 리턴값 타입 지정 하지 않아도 오류나지 않음. funct..
React Native 앱 제작에 자주 활용되는 모달, Event, Splash 기능 활용 해보기 모달 만들기 모달은 컴포넌트를 만들어놓고 visible Props를 활용해서 보여주기/숨기기 해서 활용함 사용 예제) (...) * Props 설명 - visible : 모달창 보여줄 지 결정하는 Props (true/false) - transparent : 뒤에 배경 살짝 보이게 투명도 넣을지 말지 - animationType : 트랜지션 효과 지정 (slide - 아래에서 위로 슬라이드, fade - 서서히 나타나기, none - 아무효과 없음) - onRequestClose : 안드로이드 뒤로가기 버튼 눌렀을 때 호출되는 함수 * iOS에서 모달 : ActionSheetIOS 함수로 대체함 Event ..
Firebase 서비스의 Database, Firestore 목록 조회 및 보안 설정 방법 확인 Firestore 목록 조회하기 firestore의 collection에 get 함수를 호출하면 해당 컬렉션의 QuerySnapshot 객체 반환 -> 전체 정보 담고 있음 : doc 이라는 객체의 배열 형태로 담겨 있음. 호출 예제) const postsCollection = firestore().collection('posts'); const snapshot = await postsCollection.get(); snapshot.docs.map((doc) => ({ id: doc.id (...) })); //위와 같은 형태로 사용 Firestore 목록 정렬 및 개수 제한 collection에 orderb..
Google Firebase로 서버 없이 backend 서비스 활용하기 (BaaS : Backend as a Service) Firebase 가입하기 - 사전 준비 : Google 계정 보유 및 로그인 - 접속 주소 : https://firebase.google.com Firebase | Google’s Mobile and Web App Development Platform Discover Firebase, Google’s mobile and web app development platform that helps developers build apps and games that users will love. firebase.google.com - 콘솔 접속 후, 프로젝트 만들기 버튼 눌러서 프로젝트 생성..
날짜를 다루기 위해 제공된 Date 객체 및 주로 사용하는 함수에 대해 학습하 기본 활용 - 생성 Date 객체 생성자) var date1 = new Date(); // 현재 날짜 및 시간 var date2 = new Date(1991,11,25,3,50); // 1991년 12월 25일 3:50:00 (월 +1 주의) var date3 = new Date('2014-6-4'); // 2002년 1월 1일 09:00:00 var date4 = new Date('2012-05-17 10:20:30'); // 2012년 5월 17일 10:20:30 기본 get/set 함수 사용 - get : 날짜 관련 데이터 추출하기 - set : 날짜 값 설정하기 사용 예제) var dt = new Date('2010-1..
화면에 달력을 표시하고, 이를 수정하는 예제 학습하기 사전 설치 라이브러리 yarn add react-native-calendars yarn add react-native-modal-datetime-picker @react-native-community/datetimepicker 설치 이후 시뮬레이터 재기동 필수 달력에 표시하기 달력에 특정 일자를 선택한 표시(selected), 체크한 표시(marked) 남기는 예제 import React from 'react'; import {Calendar} from 'react-native-calendars'; import {StyleSheet} from 'react-native'; function CalendarView() { const markedDates =..
