차근차근 생활 & 코딩

이번 시간에는 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라는 코드의..

안녕하세요. 이번시간에는 Firebase를 활용한 이메일 로그인을 해보도록 하겠습니다. 인증하기 위해서 회원가입이 우선적으로 되어 있어야 됩니다. 회원가입하기 아래 링크를 통해 회원가입을 선행하시기 바랍니다. https://ssilook.tistory.com/entry/React-%EB%A6%AC%EC%95%A1%ED%8A%B8-Firebase-%EC%9D%B8%EC%A6%9D%EC%9D%B4%EB%A9%94%EC%9D%BC-%ED%9A%8C%EC%9B%90%EA%B0%80%EC%9E%85%ED%95%98%EA%B8%B0 [React_리액트] Firebase 인증하기 - 이메일 회원가입 편 이번 시간에는 Firebase를 이용하여 이메일 회원가입을 해보도록 하겠습니다. 리액트 설치하기 아래 참조 하셔서 ..

이번 시간에는 Firebase를 이용하여 이메일 회원가입을 해보도록 하겠습니다. 리액트 설치하기 아래 참조 하셔서 링크접속 후 설치 하시면 됩니다. https://ssilook.tistory.com/entry/%EB%A6%AC%EC%97%91%ED%8A%B8React-%EC%84%A4%EC%B9%98%ED%95%98%EA%B8%B0 [REACT] 리액트 시작하기 - 설치하기 편 리액트 설치 및 실행 방법에 대해 간략히 설명드리겠습니다. 리액트를 만들기 위해 개발 환경을 직접 구축해야 한다. 개발 환경을 직적 구축할 경우 시간이 오래 걸릴 뿐 아니라 유지 보수도 해 ssilook.tistory.com Firebase 접속하기 링크를 클릭하여 Firebase를 시작하도록 합니다. https://firebas..

안녕하세요. 이번 시간에는 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..