차근차근 생활 & 코딩

이번 시간에는 ReactNative 커스텀 폰트를 사용하는 방법에 대해 알려드리도록 하겠습니다. 폰트 다운로드 원하는 폰트를 다운로드 합니다. 프로젝트에 폰트 파일 추가하기 다운 받은 폰트는 assets/fonts를 추가해줍니다. 설정파일 추가하기 ① react-native.config.js 파일을 새로 생성합니다. ② assets 속성을 추가합니다. module.exports = { assets: ['./assets/fonts'], }; 폰트파일 링크하기 명령어를 실행하면 폰트를 링크합니다. > react-native link 폰트 사용하기 테스트 수고하셨습니다.

안녕하세요. 이번 시간에는 Expo 핸드폰으로 접속하는 방법에 대해 알아보도록 하겠습니다. Expo 앱 설치 안드로이드는 QR을 바로 촬영하는 기능이 있지만, 아이폰은 기능이 없어 카메라로 그냥 촬영하시면 연결됩니다. 핸드폰과 EXPO 연결하기

안녕하세요. 이번 시간에는 Firebase를 활용해서 CRUD(쓰기, 읽기, 수정, 삭제)를 진행 해보도록 하겠습니다. 크게 어려운 부분이 없으니 잘 따라오실 수 있습니다. Installation(설치) # Install & setup the app module npm install --save @react-native-firebase/app # Install the firestore module npm install --save @react-native-firebase/firestore # If you're developing your app using iOS, run this command cd ios/ && pod install FireStore Create(쓰기) 데이터 저장하기 import Re..

안녕하세요. 이번 시간에는 onChange에 대해서 알려드리도록 하겠습니다. ReactNative에서는 onChange를 기존 쓰던 방식으로 하면 결과 값이 아무것도 표시되지 않는 것을 확인 할 수있습니다. 그럼 ReactNative 에서는 event.nativeEvent.text 이라는 코드를 사용하셔야 합니다. ReactNative가 아닌 React JS 에서는 onChange 이벤트 발생하려면 event.target.value를 입력하시면 됩니다. 간단한 예를 보여드리도록 하겠습니다. onChange={(event)=> console.log(event.target.value)} 라는 코드를 작성하면 이벤트가 발생됩니다. 하지만 ReactNative에서는 evenvt.target.value라는 코드의..

안녕하세요. 이번 시간에는 React Native 상태바에 대해서 알아보도록 하겠습니다. 상태바는 흔히 우리가 핸드폰에 맨 상단에 배터리, 와이파이, 알람 등 상태가 표시되는 화면이라고 생각하시면 됩니다. 기존에 React Native를 사용하시면 상태표시바가 겹쳐 보이게 됩니다. 해결 방법은 marginTop 조정하면 됩니다. 하지만 고정하면 폰의 기종마다 상태바의 크기가 달라져 문제가 됩니다. 그럼 marginTop 높이를 설정하는 2가지 방법에 대해서 알아보도록 하겠습니다. 첫번째 방법이 안된다고 생각하시면 두번째 방법으로 진행하시면 됩니다. 어렵지 않고 간단합니다. 첫번째 방법 라이브러리 설치 $ npm install --save react-native-status-bar-height (Packa..

이번 리액트 네이티브 강의에서는 React Native 앱에서 알림을 보내는 방법에 대해서 알아보도록 하겠습니다. React Native Installation 리액트 네이티브를 기본적으로 설치 합니다. $ react-native init mysite Npm Installation firebase 패키지를 설치합니다. $ npm install --save react-native-push-notification 코드 추가 (참조 Site : https://www.npmjs.com/package/react-native-push-notification ) android/build.gradle android/app/build.gradle firebase 접속하기 ① 프로젝트 만들기 접속하기 - https://c..

이번 시간에는 EXPO 설치에 대해서 알아보겠습니다. 설치 방법은 너무 간단합니다. Step 1. EXPO 설치하기(Installing Expo) NPM을 이용하여 엑스포를 설치하도록 하겠습니다. * 코드 2개 중 본인이 편한 코드를 한 개 선택하셔서 설치하시면 됩니다. $ npm install --global expo-cli 또는 $ npm install -g expo-cli Step 2. EXPO 신규 앱 만들기 (Create a new app) 설치가 완료되었으면 신규 앱을 만들어 봅니다. 명령어를 입력하시면 blank, blank (TypeScript), tabs (TypeScript) 같은 선택 화면이 표시되게 됩니다. 현재는 타입 스크립트는 필요가 없기 때문에 기본적인 blank를 선택해 줍니..