1. Firebase 프로젝트 생성 우선 firebase 웹사이트로 들어가자. https://firebase.google.com/ Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 로그인을 진행해주고 시작하기를 누르고 프로젝트 추가를 눌러 새 firebase 프로젝트를 생성해준다. 프로젝트에 들어가면 왼쪽 상단의 햄버거 버튼을 눌러 인증 메뉴를 찾아 눌러준다. 그리고 sign-in method를 들어가 로그인 방법을 설정해준다. 이메일/비밀번호를 사용할 것이므로 이걸 설정해주자. 그리고 프로젝트 개요 메뉴를 찾아 태그 모양 버튼을 눌러주면 앱을 등록할 수 있다. 그리고 이번엔 오른쪽 ..

1. React Native Debugger 개발한 코드를 디버깅할 때 유용한 툴이다. 지금까지는 콘솔창을 이용해서 변수에 어떤 값이 들어가 있는지, 화면 전환 시 패싱된 파라미터값은 무엇인지 등을 확인했었는데 React Native Debugger를 통해서 좀 더 손쉽게 확인이 가능하다. react native debugger는 stand alone app 이기 때문에 그냥 설치 파일 다운로드 후에 설치하고 실행하면 된다. https://github.com/jhen0409/react-native-debugger GitHub - jhen0409/react-native-debugger: The standalone app based on official debugger of React Native, and ..

1. XY Animation 생성하기 상하좌우로 움직이는 애니메이션에 대해 배워보자. 우선 새로운 프로젝트를 생성한다. 항상 그렇듯 Add folder to workspace 하고 App.js 를 수정하자. src폴더를 새로 만들고 그 안에 Animation01.js 파일을 만든다. Animation01.js는 AnimOne을 export하는데 가로, 세로 100짜리 하늘색 정사각형을 만든다. App.js에서 AnimOn을 import 하고 을 뷰에 넣어준다. Animation을 넣어주기 위해 Animation01.js에서 Animated를 import 한다. 그리고 constructor를 하나 만들어 준다. super는 일단 그냥 두고 하늘색 정사각형이 움직이기 시작하는 starting point를 써..

1. Image Picker 설치 react-native init RN_ImagePicker 위의 명령어로 새로운 프로젝트를 하나 만든다. 프로젝트 생성이 완료되면 해당 프로젝트로 이동하고 아래 명령어를 통해 Image Picker library를 설치해준다. npm install --save react-native-image-picker 설치가 완료되면 ios 폴더로 가서 pod install 을 실행한다. cd ios pod install cd .. 파일로 가서 Add folder to workspace를 통해 해당 폴더를 추가한다. 안드로이드는 추가로 해줄 일이 있다. 카메라랑 라이브러리에 접근 가능하도록 접근권한을 줘야 한다. /android/app/src/main/AdndroidManifest...

15. Nesting Navigators(화면 구조 설계) Stack, Drawer, Tab 여러 개의 navigator를 같이 쓰는 방법을 알아보자. react navigation에서는 navigator를 nesting한다고 표현한다. Navigator들과 스크린 간의 구조를 잡는 건데 어떤 structure를 잡느냐에 따라 다양한 설계가 가능하다. 1. stack, tab nesting stack navigator는 하위에 stack screen을 갖는데 여기서 하나의 stack screen에 컴포넌트로 tab navigator와 tab screen을 넣으면 된다. 자세한 구조는 아래 App.js 에서 주석으로 적어뒀다. MainScreen은 tab navigator와 하위의 tab screen들을 ..

15. React Native Vector Icons 활용 https://github.com/oblador/react-native-vector-icons GitHub - oblador/react-native-vector-icons: Customizable Icons for React Native with support for image source and full styling. Customizable Icons for React Native with support for image source and full styling. - GitHub - oblador/react-native-vector-icons: Customizable Icons for React Native with support for i..