[React Native X Expo] View, ScrollView, Text, Button, TouchableOpacity, Image 엘리먼트 & 태그 활용 리액트 네이티
View, ScrollView, Text, Button, Image 엘리먼트 & 태그 활용 엘리먼트 활용 화면의 영역(레이아웃)을 잡아주는 엘리먼트이다. App.js 상에서 View는 화면 전체 영역을 가진다. 아래와 같이 화면을 분할.
tantangerine.tistory.com
위에는 리액트 네이티비의 화면 구성하는 포스팅입니다
관심있으시면 확인 해보세요~~!
파이어 베이스란?
파이어 베이스는 서버에 대한 지식이 많이 없어도
간편하게 서버를 구축할 수 있게 해주는 서비스입니다
이러한 것들을 서버리스라고 합니다
여기서 간략하게 서버리스가 무엇인지 설명하자면,
개발자가 서버를 관리할 필요 없이 애플리케이션을 빌드하고 실행할 수 있도록 하는
클라우드 네이티브 개발 모델입니다
장점은 애플리케이션이 필요할 경우에만 시작되며,
코드 실행이 종료되면 비용도 청구 되지않아 비용과 효율성이라는 장점이 있습니다
그 외에도 애플리케이션 스케일링 및 서버 프로비저닝과 같은
일상적이고 사소한 작업들로 부터 개발자의 부담을 덜수 있습니다
파이어 베이스 같은 경우는 복잡한 비즈니스 업무를 수행하기 힘들며,
서비스 비용도 규모가 커질 수록 지출비용은 늘어나게됩니다
다른 서버구축보다도 말이지요
하지만 소규모 프로젝트라면 부족함이 없다고 생각합니다
그럼 프로젝트를 생성해서 서버를 구축해볼까요??
구글 계정만있다면
구글에서 파이어 베이스라고 검색해 쉽게
프로젝트를 만들어 서버를 구축할 수 있습니다
검색을 하면
아래와 같이 홈페이지를 확인할 수 있습니다
파이어 베이스 프로젝트 생성하기
시작하기를 클릭하시고 다음 화면으로 넘어갑시다!
버튼을 클릭하고 다음 화면으로 갑시다
프로젝트 이름을 설정할 수 있을거예요!
버튼을 클릭하고 다음으로 넘어가면 프로젝트에 대한
Google 애널리틱스를 연동해서 관리할수 있는 선택창을 볼 수 있습니다
다음 화면은 애널리틱스의 위치를 기입하면 프로젝트를 만들 수 있게됩니다
그리고 다음은 시간이 몇분 지나면,
서버 프로젝트 관리 페이지로 이동하게됩니다
파이어 베이스를 앱에 연동하기
파이어 베이스를 연동하기 위해서는 IOS인지 안드로이드로 개발하는지에 따라
조금 다름니다
지금 리액트 네이티브 X 엑스포로 개발하는 중이기때문에
웹 SDK를 이용하면 쉽게 파이어 베이스 서버 구축이 가능합니다
코드를 클릭하고 다음화면으로 가면
앱 닉네임을 기입하고
호스팅은 난중에 설정할 수 있으니
지금은 넘어가도록 하겟습니다
앱을 등록하게 되면
우리가 사용할 코드 정보가 있습니다
그 정보를 우리 프로젝트에 js파일로 생성하여
코드를 삽입을 하여 연동에 필요한 정보를 사용해 봅시다!
파이어 베이스를 앱에 도구 설치 및 연동
Expo에서 파이어베이스를 사용할 수 있게
Expo의 firebase를 설치를 합니다
expo install firebase
파일 위치는 최상단에 생성하고 오른쪽과 같이 코드를 기입하면된다
파이어 베이스 연동관련 중요 키가 되는 부분은 플렛폼에서 복사해서 붙여넣기를 한다
이때 중요한것은 databaseUrl이 설정이 안되어있습니다
그러므로 파이어 베이스 플렛폼의 리얼 타임 데이터 베이스에 들어가셔서
복사를 한다음 firebaseConfig안에 값을 지정해주시길 바랍니다
이제 파이어 베이스와 앱 연동은 기본적인 설정은 끝이 났습니다
먼가 엄청 길게 적었지만 이미지가 거의 반이니 너무 길다고 포기하지마시고
끝까지 화이팅해요!
아직 모험은 끝나지 않았으니까요!