Expo가 아닌 React Native cli 환경에서 SNS로그인 기능을 구현해야하는데, 생각보다 다양한 오류들이 있고 한번에된 케이스가 없어서 다른 공유해주신 분들 처럼 나도 나의 방법을 공유하려고 한다. ( 누군가에게 도움이 되길... )  작업 환경은 iOS( Macbook )으로 작업했다. 환경 설치 환경을 설치하는 것은 따로 올리지 않으려고 했지만 첫 환경을 구성하는 단계에서 달라질 수 있을 것 같아서 올린다. 공식 사이트에서 without Framework에서 내용을 보고 설치하였다. npx @react-native-community/cli@latest init [프로젝트명] 프로젝트 구성이 끝나면 바로 카카오 로그인 라이브러리를 설치하였다. yarn add @react-native-seou..

React는 cra를 통해서 간단하게 설치가 가능하다. 하지만 React Native 역시 간단 설치가 가능한데, 프로젝트를 본격적으로 진행한 적이 없어서 정리하면서 같이 진행할 계획이다. ( 전에 GPT로 만든 React Native는 ... 제외! ) Android Studio는 설치가 되어 있다고 생각하고 프로젝트를 진행하겠다. 그게 아니고 완전 최초 상태라면 공식 문서를 참고해서 Android Studio를 설치하는 것을 먼저 진행하자! 개발 환경은 Expo가 아닌 React Native를 사용해서 개발을 할 생각이다. Expo는 프로젝트가 생각보다 자유롭지 않아서 개발 시 많은 불편함이 있었다.  그 외에는 Styled-Components, Tanstack Query, Zustand를 기본 베이..

구글 플레이스토어 내부 테스트할 때는 애드몹 광고 배너가 안나와? 오늘은 기분 전환 삼아서 구글 플레이스토어에 테스트 배포 후 문제가 없는지 확인하는 작업을 진행했는데, 테스트 APK를 다운받았는데 구글 애드몹 광고가 나오지 않았다. 그래서 확인해봤는데 특별하게 정보를 알 수 없었다. 잠시 후 다시 어플을 실행시키니 잠깐 광고가 안나온 문제였고 제대로 나오기 시작했다..... 내부 테스트중에 import Tts from "react-native-tts"; 이걸로 소리가 안나는데 뭐가 문제야? 안드로이드 스튜디오에서는 제대로 소리가 나던 TTS가 휴대폰에서는 제대로 소리가 나지 않는 문제가 있었다. 하지만 답변은 일반적인 tts에 대한 정보만 전달받았다. 그래서 다시 질문을 구체화해서 물어봤다. 안드로이드..

react native에서 화면이 변경될 때마다 useEffect가 실행되길 원해 React Native에서 화면이 변경되면 useEffect가 실행되는 코드를 원했다. 하지만 알려준 것은 state가 변경되면 실행되는 코드를 알려줬다... 슬슬 어느정도 개념을 잡아서 GPT에게 질문할 일이 없어서 스트레스를 적게 받았는데 오랜만에 고통을 받는중이다... router의 경로가 변경될 떄마다 실행되길 원해 useEffect 의 의존성 배열에 natigation을 넣어주면 해당 기능이 가능하다고 한다. 하지만 나는 context API를 사용하는 곳에서 해당 기능이 필요했다. 그래서 전체 코드를 알려주고 한번 더 질문했다. 전체 코드를 포함해서 질문을 해서 질문 라인이 너무 길어서 답변만 캡쳐했다. useN..

react나 react native나 폰트를 적용하는 것은 생각보다 귀찮다. react의 경우 google fonts를 사용한다면 public에 있는 index.html에 링크를 추가해주면 되지만 생각보다 react native는 귀찮았다. 그러다가 이번에 간단하게 처리하는 방법을 알아서 정리한다. 폰트 저장 먼저 원하는 폰트를 /assets/fonts 폴더에 저장한다. 기본적으로 assets 폴더도 없을 것이고 fonts 폴더는 더더욱 없을 것이다. 그러니 해당 폴더를 만들고 내부에 사용할 폰트 파일을 추가해주면 된다. 라이브러리 사용 npm i react-native-asset 원래는 android 폴더 등에 설정을 해야하는데 그런 작업을 간단하게 해주는 라이브러리가 바로 react-native-as..

react-native-shadow-2 말고 다른 방법으로 그림자를 만드는 방법이 뭐가있어? react-native-shadow-2는 그림자를 만들어주는 라이브러리이다. 그런데 해당 방법을 사용하면 생각보다 그림자를 넣는 기능이 자유롭지 않았다. ScrollView에서 그림자를 만드는 작업을 진행할 때 특히 심했다. 좌우 그림자가 짤린다던지 하는 문제 말이다. 물론 이건 내가 React Native를 잘 하지 못해서 그런 문제일 수 있지만 React에 비해서 React Native로 개발하는 것은 많은 불편함을 느끼고 있다. 자바스크립트만으로 개발을 할 수 있다는거에 만족할 수 있겠지만 몇몇개는 정말 이것으로 어플을 만들 수 있는지 의심이 들었다. 어쨋든 해결 방법으로 react-native-svg 같은..

import Sound from 'react-native-sound'; 이걸 사용해서 버튼을 누르면 해당 소리가 나오게 하려고 하는데 어떤 방법을 사용해야할까? 지난번에 진행한 react native tts가 휴대폰 시스템 tts로 실행이 되어서 내가 원하는 국적의 언어를 읽어주긴 하지만 실제로 실행할 때 한국인이 해당 국적을 읽어주는 문제가 있었다. 그래서 결국 mp3로 대체하는 방식을 사용하고 추후 tts로 해결이 가능한 방법이 있다면 그 방법을 사용할 생각이다. 그래서 Chat GPT에게 물어본 결과 react native sound 라는 라이브러리를 추천받아서 사용하기 시작했다. 질문이 너무 급진적으로 라이브러리를 바로 물어본 것 같지만 앞에 많은 내용이 있었다.... GPT를 사용하면서 느낀게 ..

Expo가 아닌 React Native에서 빌드하는 방법을 작성하려고 한다. Window 환경에서 진행하며 iOS는 유감이지만 진행하지 않고 Android 만 진행할 계획이다. 서명 키 생성 빌드를 하기 위해서는 서명키가 필요하다고 한다. 현재 개발 환경에서 android / app 폴더로 이동해서 명령어를 통해 서명키를 발급받는다. keytool -genkey -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 Enter keystore password: Re-enter new password: What is your first and last name? [Unknown]: Wha..