차근차근 생활 & 코딩

이번 시간에는 절대 경로 설정 방법에 대해 알려드리도록 하겠습니다. 처음 절대 경로를 설정하지 않으면 상대 경로를 이용하여 개발을 진행합니다. 상대경로로 이용하면 굳이 코드를 건드리지 않고 작업하기 편하니까요. 하지만..../../../ 이런 무한적인 반복으로 인해 먼가 잘못되었다는 것을 깨닫습니다. 처음부터 설정하고 작업을 진행 할 것이라는 슬픈 생각에 빠지게 됩니다. 절대 경로를 무조건 설정해야 하는 것은 아닙니다. 상대 경로든 절대 경로든 여러분들께서 편하신 방법대로 하시면 됩니다. 절대경로에 설정은 너무 너무 쉬우니 걱정하지 않으셔도 됩니다. Install ① 모든 React 플러그인에 대한 Babel 사전 설정 Using npm: npm install --save-dev @babel/preset..

이번 시간에는 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..