JuzeroSpace

1. 에러 상황 에러문을 읽어보면 타겟의 버전이 서로 안맞아서 그렇다고 합니다. 모든 개발자의 랜선 스승님인 stackOverFlow에 역시나 같은 질문이 있네요! https://stackoverflow.com/questions/54704207/the-ios-simulator-deployment-targets-is-set-to-7-0-but-the-range-of-supported-d The iOS Simulator deployment targets is set to 7.0, but the range of supported deployment target version for this platform is 8. I'm getting this below warning message in my Xcode 1..

1. 에러 상황 페이스북 로그인 기능을 구현하는 중에 LoginManager에서 에러가 발생함. Possible Unhandled Promise Rejection (id:0): TypeErro: null is not an object (evaluating ‘LoginManager.loginWithReadPermissions’ 2. 해결방법 아래의 깃헙 링크를 참조해서 해결했습니다! https://github.com/fbsamples/f8app/issues/118 Log In With Facebook - ALERT - undefined is not an object (evaluating ‘LoginManager.loginWithReadPermissions’) · Issue #118 In iOS simula..

RN으로 만든 영단어 앱테크 어플 (출시 후 매일 100명씩 가입 중) 아이폰> ‎캐시보카 - 돈버는 영단어 앱테크 ‎단어를 맞추면 1캐시가 적립돼요. 적립된 캐시는 네이버 포인트로 전환할 수 있어요. apps.apple.com RN로 만든 주식, 코인 물타기 계산기, 수익률 계산기 앱 안드로이드> 아이폰> 안녕하세요. 이번 게시글에서는 파이어베이스를 이용해서 구글로 회원가입 및 로그인을 하는 방법을 알아보겠습니다. 저도 처음에는 너무너무 복잡해보였는데, 쉽습니다! 10분만에 끝나버렸어요 ㅎㅎ 참고로 이번 게시글은 android, ios앱과 파이어베이스를 연동을 모두 마친 상태에서 설명이 진행됩니다. 앱과 firebase프로젝트를 연동하는 사전작업에 대해서는 따로 설명하지 않고 구글 로그인 부분만 설명드..

1. 잘못된 사용 useEffect 안에서 async를 직접 선언해줌. 2. 올바른 사용 async - await을 써야하는 부분을 별도의 함수로 만들어주고, useEffect에서 호출함.

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

1. 에러 상황 npm으로 ios 시뮬레이터를 기동할 때 Unable to lookup in current state: Shutdown 에러 발생. 2. 해결방법 시뮬레이터를 완전히 종료하고 다시 react-native run-ios해주면 잘 됩니다.

RN으로 만든 영단어 앱테크 어플 (출시 후 매일 100명씩 가입 중!) 아이폰> ‎캐시보카 - 돈버는 영단어 앱테크 ‎단어를 맞추면 1캐시가 적립돼요. 적립된 캐시는 네이버 포인트로 전환할 수 있어요. apps.apple.com 키보드가 올라올 때 버튼이나 텍스트도 같이 밀려 올라와야 할 떄도 있고, 화면이 움직이지 않고 고정되어야 할 때도 있습니다. keyboardAvoidingView를 쓰지 않아도, 안드로이드 manifest의 " windowSoftInputMode " 속성을 이용해서 키보드가 올라올 때 화면을 고정시킬 수 있습니다. 우선 React Native 공식 문서의 TextInput 문서를 보겠습니다. 공식문서를 보면, 안드로이드일 경우 windowSoftInputMode의 파라미터값이 ..

현재 개발중인 '바로보카'는 영어 단어 퀴즈앱입니다. 단어장에서 랜덤으로 단어를 뽑아서 퀴즈를 만들어줘요. 이번 포스팅에서는 랜덤 퀴즈 기능에 대한 핵심 알고리즘(?)을 풀어보려고 합니다. 너무 간단해서 알고리즘이라고 하기도 애매합니다. 우선 기본 틀은 이렇게 생겼습니다. 문제와 선택지 4개가 주어집니다. 문제를 만드는 로직은 아래와 같습니다. 1. 데이터셋에서 4개의 단어를 랜덤으로 뽑습니다. 2. 4개의 데이터 중에 1개를 출제 문제로 정합니다. ( 문제에 대한 대답이 들어가는 버튼 위치 또한 랜덤으로 계속 바뀝니다. ) 3. 클릭한 대답버튼이 문제에 해당하는 단어면 정답처리, 다른 단어면 오답처리합니다. 그럼 1번부터 차근차근 보겠습니다. 1. 데이터셋에서 4개의 데이터를 랜덤으로 뽑는다. 우선 대..

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

앱을 만들기로 결정하고 기획부터 배포까지 일주일에 걸쳐 영단어 퀴즈앱 '바로보카'가 완성되었습니다. 아이폰 다운로드> 안드로이드 다운로드> 많은 사람들이 영단어를 꾸준히 외우고 싶어하지만, 꾸준히 습관을 만들기가 참 어려운 것 같아요. 저도 '하루에 20개씩 외우겠어!' 라고 다짐하지만 며칠 못가고는 했습니다. (중학교때부터 지금까지...) 동기부여가 되도록 영단어 암기에 보상을 추가한 보상형 영단어 퀴즈앱을 만들고 싶어졌습니다. 캐시워크가 100보에 1캐시씩 바꿔주듯이, 영단어 1문제를 풀때마다 1캐시씩 적립시켜주는 앱을 말이죠. 용돈을 벌 수 있다면 더 성취감도 있고, 커피도 사먹고..영단어를 더 자주 보지 않을까요? 이런 아이디어를 시작으로 앱 기획을 시작했습니다. 작업 전에 개발 과정을 크게 2가..

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

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

출시버전의 앱을 다 만들고 ios에 배포하려고 들뜬 마음으로 아카이브를 하는데 자꾸 build failed가 뜬다.. build failed 만큼 기운빠지는 단어도 없는듯 ㅠ 1. 에러 상황 에러코드를 보니까 내 디렉토리 주소가 쭉 적혀있고 제일 뒤에 main.jsbundle does not exist 라고 적혀있다. 에러는 역시 구글링이지 2. 해결 방법 1) package.json의 script 부분에 아래 코드를 추가한다. "build:ios": "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'" 2) 루트폴더 디렉토리에서 아래 코드를 실행하면 ios..

1. 에러 상황 이유는 모르겠으나 No bundle URL present 에러가 발생했다. 아마 이것저것 만지다보니 나도 모르게 잘못 건드린거같다 ㅠ 2. 해결방법 해결방법이 간단하다. 다행.. 첫번째 방법) ios/build 폴더를 삭제한다. 또는 두번째 방법) Xcode에서 빌드 폴더를 클린해준다. 그랬더니! 굿쟙 RN으로 만든 영단어 앱테크 어플 (출시 후 매일 100명 가입중!) 아이폰> ‎캐시보카 - 돈버는 영단어 앱테크 ‎단어를 맞추면 1캐시가 적립돼요. 적립된 캐시는 네이버 포인트로 전환할 수 있어요. apps.apple.com

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