React Native/General 24

[React Native] MobX 도입 10분 컷!

1. mobx 도입 배경 안녕하세요. 제가 개발중인 영단어 앱은 하나의 파일 안에서 'screenMode' 상태값에 따라 화면을 바꿔주고 있습니다. screenMode === 'selectVoca'일 때는 왼쪽 화면이, === 'quiz'일 때는 오른쪽 화면으로 변경됩니다. 지금까지는 한 파일 안에서만 바뀌니 useState를 사용해왔었는데요. 개발을 하다보니 이 파일, 저 파일에서도 screenMode를 참조해야할 일이 생겨버렸습니다..! 처음에는 props로 넘겨주고, 또 넘겨주고 했는데... 너무 복잡해서 ㅠ mobX를 도입하기로 결정했습니다. 2. React Native에 mobx를 적용하는 방법 및 과정 * 저는 함수형 코드를 사용하기 때문에 클래스형 코드로 개발하시는 분들과는 많이 다를 수 있..

[React Native] 스타일(색상)을 중앙에서 관리하는 방법

바로보카와 엣세이 앱에는 8개의 파랑 계열 그레이 컬러가 사용됩니다. 임의대로 Gray50 ~ Gray900 라고 정했습니다. 이렇게 정해놓으면 gray50은 배경에, 100은 구분선, 200은 버튼의 테두리 등 농도(?)에 따라서 통일성있게 사용하기에 편합니다. 그런데 개발을 하다보면 컬러 헥사값(#000000등)이나 RGB값을 외우가기 어렵죠. 처음에는 아래처럼 모든 스타일에 직접 정의를 해줬는데요. 이것도 반복되면 손이 은근 많이 탑니다. 그래서 중앙에 색상코드를 정의하고 import하는 방법으로 이용해보기로 했습니다. 이렇게 바꾼지 1주일이 넘었는데, 훨씬 편합니다 ㅎㅎ 색상코드를 외우지 않아도 되고, 외웠더라도 따옴표누르고 직접 안쳐도 되니 좋아요! 중앙에서 쓰는 법은 아주 간단해요.. lib디..

[구글 애드몹] app-ads.txt 설정하는 쉬운 방법

앱에 구글 애드몹으로 광고를 달려고했더니 이것저것 해야할 게 많습니다. 다 끝난 줄 알았는데 app-ads.txt 라는 걸 웹사이트에 추가하라고 하네요. (내 앱은 웹사이트가 없는데..?) 이게 뭐야.. 하고 골치아팠는데 간단하게 해결할 수 있었습니다. 1. app-ads.txt 가 뭔데? 쉽게 말하면 "이 앱이 제대로 된 앱인지 아닌지 판별해주는 텍스트" 라고 할 수 있습니다. 구글애드몹에 광고를 맡길 광고주에게 효율이 높은 광고매체를 제공하기 위해서 제대로 된 앱이라는 걸 판별해주는 것 같습니다. 설정을 안해도 되지만, 이걸 설정하지 않으면 광고 수익이 급감한다고 협박성 문구를 보여줍니다. 2. 설정 방법 구글에서 언제나 그랬듯이 자세하지만 이해하기 어렵게 잘 설명해주었습니다. (구글 문서) 1) 앱..

맥북 프로 13인치(m1) / 16인치(intel) 고급형 모두 사용해본 비교 후기

직접 만든 영단어 앱테크 어플 (하루 10분 100캐시 적립 가능!) 아이폰> ‎캐시보카 - 돈버는 영단어 앱테크 ‎단어를 맞추면 1캐시가 적립돼요. 적립된 캐시는 네이버 포인트로 전환할 수 있어요. apps.apple.com 안녕하세요. 저는 2021년 1월부터 4월까지 인텔칩 기반의 맥북 프로 16인치를 사용하다가 5월부터 12월까지 맥북프로 m1 13인치로 넘어왔습니다. 그리고 다시 인텔칩으로 넘어갑니다. 인텔 -> m1 -> 인텔 처음 m1 칩을 접했을 때의 기분을 이루 말할수가 없습니다. 지금은 시스템 용량때문에 다시 이전에 쓰던 16인치 맥북으로 넘어오긴 했지만, 만약 16인치를 구매했을 때 16인치에도 m1이 달려있었다면 당연히 그것을 구매했을 것 같습니다. 8개월간 사용하며 맥북프로 16인..

[React Native] 앱 로고, 아이콘을 변경하는 간단한 방법

개발하면서 코드보다 더 고민되는(?) 부분이 앱 로고이기도 한데요! 이번에는 RN에서 앱 로고를 바꿔보는 방법을 적어보려고 합니다. 간단해요! 1. IOS 0) 사전준비 1024x1024 크기의 png 로고 파일이 필요해요. 저는 XD를 이용해서 간단하게 만들어봤습니다 ㅎㅎ 이제 위 파일을 가지고 generator 사이트를 이용해서 안드로이드와 ios에서 필요한 크기의 파일들로 추출할거에요. IOS아이콘 추출 사이트 > 위에 링크를 눌러서 들어가면 아래 사진처럼 나옵니다. 왼쪽에 큰 빈공간을 클릭하거나 로고파일을 드래그해서 넣으면 아이폰, 아이패드, 애플워치, 맥 사이즈에 맞추어서 로고를 추출해줘요. 아주 고마운 사이트죠 ㅎㅎ 파일을 넣고 Generate를 누르면 아래 처럼 저장이 됩니다. 1) Xcod..

[React Native] android, iOS 앱 이름 변경하는 초간단 방법

제가 진행중인 영단어 앱은 프로젝트 이름과 앱 이름이 서로 다르답니다. 그래서 이번에는 앱 이름을 변경하는 방법을 기록해보려고 해요. 1. IOS 1) Xcode를 열고 왼쪽 상단 프로젝트명 클릭 > TARGETS의 프로젝트명 클릭 > General 탭 > Identify > Display Name을 변경해주면 됩니다. 초간단 Good! 2. 안드로이드 1) 프로젝트 루트 폴더의 app.json 에서 displayName변경 2) android/app/src/main/res/values/strings.xml 에서 appname 변경 내가 만든 앱 홍보 RN로 만든 주식, 코인 물타기 계산기, 수익률 계산기 앱 안드로이드> 아이폰> UN인턴이 만든 영단어 퀴즈앱 안드로이드> 아이폰>

[React Native] android, iOS 앱에 커스텀 폰트 적용하는 간단한 방법

RN에서 원하는 폰트를 적용하기 위해서는 IOS와 Android를 각각 설정해주어야 합니다. 저는 애플에서 제공하는 애플산돌고딕체 폰트를 사용했습니다. (상업적 사용 가능) 1. IOS 1) ios 폴더에 fonts 라는 폴더를 만들고, 그 안에 다운받은 폰트 파일들을 추가합니다. 2) ios폴더 안의 projectname.xcodeproj 또는 projectname.xcworkspace 파일로 Xcode를 실행합니다. 왼쪽 상단에 자신의 project명을 우클릭하여 Add Files to "project"... 를 클릭합니다. 3) 1)에서 추가한 fonts 폴더를 추가합니다. 4) 다시 왼쪽 상단의 project명을 클릭하고, TARGETS도 project명을 클릭해서 info 탭에 들어갑니다. 5)..

구글 애드몹 ID 확인하는 방법

구글 애드몹 앱 ID를 받기 위해서는 애드몹에 가입해야 해요! 아래 내용은 애드몹 가입 후에 ID를 다시 찾는 내용입니다. 1. 구글 애드몹 홈페이지 접속 https://admob.google.com/intl/ko/home/ Google AdMob: 모바일 앱 수익 창출 인앱 광고를 사용하여 모바일 앱에서 더 많은 수익을 창출하고, 사용이 간편한 도구를 통해 유용한 분석 정보를 얻고 앱을 성장시켜 보세요. admob.google.com 2. 원하는 앱 선택 3. 왼쪽에 앱 설정 클릭