개발일지

바쁜 분들을 위한 3줄 요약1. 애플로그인 후 AuthorizationCode를 검증해서 Refresh_Token 발급받고 저장하기2. 회원탈퇴에서 Refresh_Token을 사용해 회원탈퇴하기3. 앱 외부에서 진행되는 회원탈퇴도 반영할 수 있도록 구현하기현재 진행 중인 SoundHood 앱은 제가 모든 것을 담당하고 있습니다. 앱, 서버 기타 등등이요. RN(프론트)에서 진행하는 애플로그인은 이 라이브러리를 사용하면 비교적 쉽게 진행이 가능합니다. 기본적인 설정과 진행 방식은 위의 링크를 통해 진행하면 됩니다.  Apple 로그인을 통해 회원가입 및 로그인을 진행하는 기능을 프론트와 서버단에 추가하고 이제는 회원탈퇴 기능을 구현하려고 했습니다. 다만, 앞서 소개드린 라이브러리에서는 회원탈퇴 기능까지는 ..

React-Native에는 Alert API를 활용하여 사용자에게 메시지를 보여주고, 버튼 목록을 제공하여 특정 동작을 사용자가 선택할 수 있습니다. 제 프로젝트에는 게시글 삭제, 작성 중 뒤로가기, 로그인 안내 등 다양한 곳에서 Alert를 사용하여 사용자에게 안내를 해주고 있습니다. 문제는 Alert API에는 파라미터가 총 3가지가 필요한데, 이걸 그대로 사용하는 곳에서 작성하게 되면 코드의 양이 너무나도 많아지게 됩니다. const createThreeButtonAlert = () => Alert.alert('Alert Title', 'My Alert Msg', [ { text: 'Ask me later', onPress: () => console.log('..

Spotify API를 이용하여 노래 검색결과를 보여주는 기능을 작업중인데, iOS와 Android의 노래 제목의 언어가 다른 문제가 나타났습니다.   디버깅을 했을 때, iOS와 Android에서 GET 요청을 한 주소가 미묘하게 달랐습니다.https://api.spotify.com/v1/search?offset=0&limit=10&query=%EB%B9%84%ED%8B%80&type=track&market=KR https://api.spotify.com/v1/search?offset=0&limit=10&query=%EB%B9%84%ED%8B%80&type=track&market=KR&locale=ko-KR,ko;q%3D0.9  으로, 뒤에 locale=ko-KR,ko;q%3D0.9 가 붙어있는 iOS..

포트폴리오를 위한 프로젝트를 진행 중인데, 메인 화면에서 지도뷰를 사용하고 있습니다.  앱을 껐다가 켰을 때 다른 위치가 아닌, 사용자가 마지막으로 보고 있던 위치를 보여주는 게 사용자에게 더욱 편리할 것이라 생각되어 해당 기능을 추가하게 되었습니다! 들어가기에 앞서, 저는 react-native-naver-map을 이용하여 지도뷰를 보여주고, react-native-encrypted-storage를 통해 다양한 값들을 기기에 저장하고 있습니다. 1. 앱이 어떤 상태인지 확인하기먼저 해야할 것은 앱이 켜져 있는지, 아니면 백그라운드에 있는지를 확인하는 것입니다. 이를 AppState를 사용해서 확인할 수 있는데요.사용자의 기기에 앱이 켜져있는지, 꺼져있는지를 확인하기 위한 훅을 만들었습니다.functio..

Fabric 모드를 사용하고 iOS 실기기에서만 Metro에 연결되지 않는 문제가 발생했다. 여러가지 시도를 해봤지만, 해결된 방법은 RCTWebSocketExecutor.mm 파일의 localhost 부분을 본인의 ip로 변경하는 방법이었다. - (void)setUp{ if (!_url) { NSInteger port = [[[_bridge bundleURL] port] integerValue] ?: RCT_METRO_PORT; NSString *host = [[_bridge bundleURL] host] ?: @"본인의 IP"; NSString *URLString = [NSString stringWithFormat:@"http://%@:%lld/debugger-proxy..

React Navigation을 사용하게 될 경우, 다양한 의존 라이브러리를 설치해야 하는데, react-native-safe-area-context 라는 라이브러리도 이에 해당한다.  react-native-safe-area-context를 설치한 김에 해당 라이브러리를 확인해 보았을 때, iOS 기기의 safe area 영역을 효율적으로 관리할 수 있다는 내용을 확인하고, 어차피 설치해야 하는 거 사용하게 되었는데, navigation의 헤더를 사용할 때 iOS기기에서만 Header와 화면 사이에 여백이 생기게 된다. 이를 해결하려면 Header를 사용하는 스크린에서는 SafeAreaView를 사용하지 않고 View로 대체해야 한다.

React Navigation의 native stack을 활용하여 네비게이션을 사용중이었는데, 공식문서에 나와있는 것처럼 뒤로가기 방지 설정을 해주었는데도 방지가 안되고 뒤로가기가 잘 되고 해당 에러를 뱉었다. 아무래도 e.preventDefault() 함수가 작동하지 않아 발생하는 것 같다. The screen ... was removed natively but didn't get removed from JS state.This can happen if the action was prevented in a 'beforeRemove' listener, which is not fully supported in native-stack.Consider using 'gestureEnabled: false' to..

GitHub - QuadFlask/react-native-naver-map: 🗺️naver map for react-native 🗺️naver map for react-native. Contribute to QuadFlask/react-native-naver-map development by creating an account on GitHub. github.com QuadFlask님이 만드신 라이브러리,, 항상 감사하게 사용하고 있습니다ㅠㅠ 프로젝트를 진행하는 도중, 네이버 지도를 사용하게 되었다. 설치부터 우여곡절이 많았는데, 설치 및 구현 관련해서는 나중에 정리해서 포스팅하는걸로,, 각설하고, 내가 필요했던 기능은 다음과 같다. 1) 픽셀 당 미터 수 구하기, 2) 안드로이드에서 서브캡션이 나타나지..