앱 서비스를 다 만들었으면 앱 배포도 만드는것 못지않게 중요합니다. 앱 스토어나 구글 플레이스토어 등 앱 마켓에 따라 배포가이드가 다르기때문입니다. 이번에는 배포를 하기 위한 체크리스트에 대해 공부해았습니다. 앱 개발을 하면서 써왔던 "Expo"는 개발 뿐 아니라 배포,수정재배포 등 앱 개발 전체과정을 도와주는 툴입니다. Expo도움을 받아 앱버전관리, 안드로이드, ios 인증버전관리 등을 쉽게할 수 있습니다. 먼저 앱 배포에 필요한 것들은 1) 앱 로고 2) 스플래시 스크린(앱 시작 초기화면) 3) 앱 마켓에 올릴 설명 이미지 입니다. 플래시 스크린은 앱을 다운받았을 때 스마트폰 화면에 출력될 로고이미지와 앱을 켰을때 메인화면이 나오기 전 로고 등 '인트로페이지' 와 같이 짧게 보여지는 화면입니다. 스..
앱 서비스를 만들때 앱에 광고넣을 수 있는 방법 중 배너 생성에 대해 공부해보았습니다. 1. 애드몹 가로배너 광고 단위 설정 2. 앱 상에 적용 간단한 구조입니다. Google 애드몹에서 부여받은 배너 키값을 ios의 googleMoileAdsAppId 부분에 넣어주시면 됩니다. 두번째 키 값은 '배너 형태의 그림 썸네일' 이므로 실제 Main 페이지나 Detail 페이지 등 실제 페이지에서 배너를 보여줄 공간에 사용해야합니다. MainPage.js 에는 import { setTestDeviceIDAsync, AdMobBanner, AdMobInterstitial, PublisherBanner, AdMobRewarded } from 'expo-ads-admob'; 가 추가됩니다. 위 코드에서는 expo-..
앱 서비스를 만들때 수익 창출도 가능한지 알아보다가 수익성 앱에 광고넣을 수 있는 방법에 대해 공부해보았습니다. 수익성 앱? : 앱에서 수익을 내는 방법을 말합니다. : 수익을 내는 방법으로는 구글광고, 애드몹 등이 있습니다. : 예를 들어 시중에 등록되어있는 앱 서비스들을 보면 메모장이나 캘린더의 UI 디자인을 예쁘게 꾸며 1000원~3000원 사이의 유료 앱으로 출시한 것을 볼 수 있습니다. 수익성 앱 배포방법? : 리액트 네이티브 & Expo 앱으로 쉽게 배포하기 다양한 광고 수익 모델 1) 앱 내 배너 광고 수익 모델 >> 외부링크로 넘어가는 것 (Expo의 Linking 기능도 이용 가능) 2) 앱 콘텐츠 판매 수익 모델 >> 인앱결제 / 예를들어 앱 내에서 결제를 해야 하는 경우가 해당 3) ..
파이어베이스에서 제공하고있는 Realtime Database(리얼타임 데이터베이스) 에 대해서 공부해보겠습니다. 만약 어떠한 컨텐츠를 누르면 특정 페이지로 넘어가는 기능을 구현하고자할떄 그 컨텐츠에 담긴 모든 데이터를 특정 페이지로 넘기게 될 수 있습니다. 하지만 이러한 방식은 모든 상세 데이터를 넘기는 것이므로 느려지거나 무거울 수 있습니다. 예를 들어 인스타그램이나 페이스북처럼 실시간으로 댓글이 달리고 수정되는 서비스에서 모든 상세 데이터를 특정 페이지에 넘긴다고했을때 문제가 될 수 있는 것입니다. 댓글같은 경우엔 실시간으로 데이터가 변경될 수도 있기 때문입니다. 이를 개선하여 그 컨텐츠의 인덱스를 조회해서 그 인덱스에 해당하는 컨텐츠를 누를때마다 최신 데이터를 가져오게 해야합니다. 실습) data...
파이어베이스는 서버를 쉽게 사용할 수 있도록 도와주는 서비스입니다. 이번 공부일지에서는 파이어베이스에 가입하고, 프로젝트에 적용하여 사용하는 방법까지 공부해보겠습니다. 파이어베이스를 사용하기 위해서는 구글 계정으로 로그인 후 '시작하기'를 눌러 진행해야합니다. 가입을하고 프로젝트를 생성했으면 이제 앱에 연결할 수 있습니다. 정리하자면, 1) 파이어베이스에 가입 2) 파이어베이스 프로젝트를 생성 (만든 프로젝트와 이름이 일치해야합니다.) 3) 그 후 두개를 연결 파이어베이스에 가입을 완료하였으면, 1) 프로젝트 시작하기 2) 프로젝트 이름 지정 (Expo 프로젝트와 이름을 일치시키는게 관리하기 편합니다.) 3) 구글 애널리틱스 사용 설정 >> 이 서비스를 기본적으로 권장 cf) 구글 애널리틱스? >> 웹사..
일반적으로 앱 서비스는 실시간으로 변경되어야하는 데이터가 있거나, 인터넷 환경 연결로 상시 업데이트 되는 환경이 중요합니다. 이번에는 앱에 실시간 날씨 데이터를 외부 API로부터 받아와 적용시키는 방법을 공부해보고자합니다. 서버가 제공하는 도메인을 그대로 사용하여, 실제 날씨 데이터를 넣고자합니다. 날씨 데이터는 무료 API인 "openweathermap api" 를 사용합니다. 과정으로는) 1) 현재 위치 (좌표) 데이터 필요, 가져오기 2) 위치 데이터를 이용해 현재 위치 날씨 데이터를 가져오기 가 됩니다. 평소 다른 앱 서비스들을 보면 처음 앱을 시작할때나 특정한 경우에 앱 위치 정보권한을 물어보게 됩니다. 따라서 먼저 앱 위치 정보 권한을 설정하여야하는데, expo install expo-loca..
지금까지 팁 데이터들을 data.json(로컬파일)로 관리하였는데, 이는 실시간으로 바뀌어야하는 데이터나 많은 유저들이 접근해야하는 앱 서비스일 경우에는 적합하지 않습니다. 굉장히 무거워지기 때문에 파이어베이스라는 서버를 사용해 데이터를 관리하는 방법을 공부해보고자 합니다. 지금까지는 프론트엔드(화면을 그리는 것)를 공부했는데, 서버는 백엔드 부분을 다루게됩니다. 앱에서 다양한 요소들이 화면에 보여지게 될 때 map 함수로 반복하여 화면에 그렸습니다. 서버를 사용하게되면 다른 방식으로 구현할 수 있게 됩니다. >> 쉽게 서버를 제공해주는 서비스를 사용하게됩니다. 이는 '서버리스'라고 합니다. 서버리스중에서 가장 유명한 구글에서 제공중인 파이어베이스라는 서버리스를 사용할 것입니다. 데이터 요소가 많아질수록..
리액트 네이티브로 앱개발을 하면서, 다양한 페이지를 구현했지만 그 페이지들 간의 이동에 대해서는 아직 구현하지 못했었습니다. 리액트의 네비게이터 기능을 이용하여 페이지 간 이동에 대해서 공부해보고자 합니다. 네비게이터? : 페이지 끼리 이동할 수 있게끔 만드는 것으로, 웹 사이트를 이용하듯 앱에서 만든 컴포넌트들을 페이지화 시켜주고, 해당 페이지끼리 이동을 가능하게 해주는 라이브러리입니다. ex) 가로방향으로 슬라이드 했을 때 다음페이지로 넘어가는 기능이 포함됩니다. cf) React Navigation 공식문서에서 정말 좋은 기능들을 가져다 쓸 수 있습니다. https://reactnavigation.org/ 1. React Navigation 공식문서의 installation 에는 npm과 Yarn ..
리액트 네이티브로 앱 개발을 하다보면, 앱 화면을 보면서 스마트폰의 배터리 잔량, 인터넷 연결상태, 시간등을 확인하고 싶을때가 있습니다. 이를 표시해주는 기능이 '상태바 (Statusbar)' 입니다. 이 상태바를 표시해주는 방법에 대해 공부해보겠습니다. - 기본값은 WHITE(흰색)으로 되어있기때문에, 몇시인지, 배터리, 와이파이 연결 등 잘 보이지 않습니다. 1. 먼저 상태바는 Expo에서 제공해주는 도구를 설치해주어야합니다. 2. 설치 후 이 도구에서 꺼내서 사용하기 expo install expo-status-bar 3. 기존 white로 되어있어 보이지 않던 상태바를 보이게 하기 => (MainPage.js) 에 추가 StatusBar style="black" ** 기본적으로는 스마트폰에는 st..
