React Native cli Apple 로그인 연동하기
·
React Native/JavaScript
끝이 다가오고 있다. 네이버, 카카오, 구글을 구현하고 이번엔 애플 로그인을 구현할 계획이다.  작업 환경은 iOS ( Macbook )이다.  환경 설정 환경을 설치하는 것은 따로 올리지 않으려고 했지만 첫 환경을 구성하는 단계에서 달라질 수 있을 것 같아서 올린다.공식 사이트에서 without Framework에서 내용을 보고 설치하였다. npx @react-native-community/cli@latest init [프로젝트명] 프로젝트 구성이 끝나면 바로 애플 로그인 라이브러리를 설치하였다. yarn add @invertase/react-native-apple-authentication 설치가 끝나면 iOS환경에서도 로그인이 필요하므로 npx pod-install 명령어를 바로 사용해서 pod 라..
React Native cli Google 로그인 연동하기
·
React Native/JavaScript
Expo가 아닌 React Native cli 환경에서 네이버 구글 로그인을 구현하려고 한다. 카카오 로그인 또는 네이버 로그인이 필요한 분은 각 링크를 참고해도 좋다.  작업 환경은 iOS ( Macbook )으로 작업했다.  환경 설치 환경을 통일하면 아무래도 오류가 줄어들 것이기 때문에 시작부터 함께하자. 공식 사이트의 without Framework에서 내용을 보고 설치하였다. npx @react-native-community/cli@latest init [프로젝트명] 프로젝트 구성이 끝나면 구글 로그인 라이브러리를 설치한다. yarn add @react-native-google-signin/google-signin 설치가 끝나면 iOS 환경 설정을 위해서 pod 라이브러리를 설치한다. npx p..
React Native cli Naver & Kakao 연동하기
·
React Native/JavaScript
네이버와 카카오를 각각 로그인하는 기능을 구현하였다. 이번엔 네이버와 카카오 같이 설정하는 방법에 대해서 진행하겠다.  반드시 Naver와 Kakao 연동하는 것을 선행적으로 진행하고 해당 글을 봐주시길 바랍니다.  작업 환경은 iOS ( Macbook )입니다.  환경 설치이미 Naver와 Kakao 로그인을 진행했다면 추가로 작업할 필요가 없습니다. 마지막으로 해당 글을 참고해서 연동을 하지 않으셨다면 돌아가서 연동 후 해당 글을 봐주시기 바랍니다.  각각 개발 환경 자체는 세팅하지 않고 바로 둘을 연동하기 위한 설정만 진행합니다.  환경 설정 1. LSApplicationQueriesSchemes 설정 LSApplicationQueriesSchemes naversearchapp naversear..
React Native cli Naver 로그인 연동하기
·
React Native/JavaScript
Expo가 아닌 React Native cli 환경에서 네이버 로그인을 구현하려고 한다. 카카오 로그인이 필요한 사람은 다음 링크를 참고해도 좋다.  작업 환경은 iOS ( Macbook ) 환경이다.  환경 설치첫 환경을 구성하는 단계에서 달라질 수 있을 것 같아서 개발 환경도 함께 올린다. 공식 사이트에서 without Framework의 내용을 보고 설치를 진행하였다. npx @react-native-community/cli@latest init [프로젝트명] 프로젝트 설치가 끝나면 네이버 로그인 라이브러리를 설치한다. yarn add @react-native-seoul/naver-login 설치가 끝나면 iOS 환경 설정을 위해서 pod 라이브러리를 설치해줘야 한다. npx pod-install ..
React Native cli Kakao 로그인 연동하기
·
React Native/JavaScript
Expo가 아닌 React Native cli 환경에서 SNS로그인 기능을 구현해야하는데, 생각보다 다양한 오류들이 있고 한번에된 케이스가 없어서 다른 공유해주신 분들 처럼 나도 나의 방법을 공유하려고 한다. ( 누군가에게 도움이 되길... )  작업 환경은 iOS( Macbook )으로 작업했다. 환경 설치 환경을 설치하는 것은 따로 올리지 않으려고 했지만 첫 환경을 구성하는 단계에서 달라질 수 있을 것 같아서 올린다. 공식 사이트에서 without Framework에서 내용을 보고 설치하였다. npx @react-native-community/cli@latest init [프로젝트명] 프로젝트 구성이 끝나면 바로 카카오 로그인 라이브러리를 설치하였다. yarn add @react-native-seou..
React Native 개발 환경 구성하기
·
React Native/JavaScript
React는 cra를 통해서 간단하게 설치가 가능하다. 하지만 React Native 역시 간단 설치가 가능한데, 프로젝트를 본격적으로 진행한 적이 없어서 정리하면서 같이 진행할 계획이다. ( 전에 GPT로 만든 React Native는 ... 제외! ) Android Studio는 설치가 되어 있다고 생각하고 프로젝트를 진행하겠다. 그게 아니고 완전 최초 상태라면 공식 문서를 참고해서 Android Studio를 설치하는 것을 먼저 진행하자! 개발 환경은 Expo가 아닌 React Native를 사용해서 개발을 할 생각이다. Expo는 프로젝트가 생각보다 자유롭지 않아서 개발 시 많은 불편함이 있었다.  그 외에는 Styled-Components, Tanstack Query, Zustand를 기본 베이..
[React Native] Chat GPT로 개발하기 - 10일차
·
React Native/JavaScript
구글 플레이스토어 내부 테스트할 때는 애드몹 광고 배너가 안나와? 오늘은 기분 전환 삼아서 구글 플레이스토어에 테스트 배포 후 문제가 없는지 확인하는 작업을 진행했는데, 테스트 APK를 다운받았는데 구글 애드몹 광고가 나오지 않았다. 그래서 확인해봤는데 특별하게 정보를 알 수 없었다. 잠시 후 다시 어플을 실행시키니 잠깐 광고가 안나온 문제였고 제대로 나오기 시작했다..... 내부 테스트중에 import Tts from "react-native-tts"; 이걸로 소리가 안나는데 뭐가 문제야? 안드로이드 스튜디오에서는 제대로 소리가 나던 TTS가 휴대폰에서는 제대로 소리가 나지 않는 문제가 있었다. 하지만 답변은 일반적인 tts에 대한 정보만 전달받았다. 그래서 다시 질문을 구체화해서 물어봤다. 안드로이드..
[React Native] Chat GPT로 개발하기 - 9일차
·
React Native/JavaScript
react native에서 화면이 변경될 때마다 useEffect가 실행되길 원해 React Native에서 화면이 변경되면 useEffect가 실행되는 코드를 원했다. 하지만 알려준 것은 state가 변경되면 실행되는 코드를 알려줬다... 슬슬 어느정도 개념을 잡아서 GPT에게 질문할 일이 없어서 스트레스를 적게 받았는데 오랜만에 고통을 받는중이다... router의 경로가 변경될 떄마다 실행되길 원해 useEffect 의 의존성 배열에 natigation을 넣어주면 해당 기능이 가능하다고 한다. 하지만 나는 context API를 사용하는 곳에서 해당 기능이 필요했다. 그래서 전체 코드를 알려주고 한번 더 질문했다. 전체 코드를 포함해서 질문을 해서 질문 라인이 너무 길어서 답변만 캡쳐했다. useN..