개발/React Native [React Native] CodePush를 이용한 앱 업데이트 1. 서론 Play store는 조금 덜한 편이지만 App store의 심사는 정말 까다롭다. 물론 까다로운 심사 절차에는 많은 장점도 있지만, 당장 배포가 리젝트된 나에게 있어서는 정말 짜증나는 일이 아닐 수 없다. 심지어 저번 심사에서는 언급조차 없던 부분이 다음 심사에서는 갑자기 리젝트 요인이라니... 까라면 까야하지만 정말 힘들다. 이런 짜증들을 해결할 수 있는 방법을 찾아보다가 CodePush라는 것을 알게됐다. 마이크로소프트에서 서비스 중인 오픈 소스인데 javascript 부분에 한해서 심사 없이 배포를 진행해준다. 이미지 등도 함께 지원해주긴 하지만 정확한 정보는 여기서확인하면 된다. 당연한 얘기겠지만 Native를 수정하게 되면 업데이트 한 앱에서 무수한 크래쉬가 날 것이기 때문에, Na.. 더보기 [React Native] ld: symbol(s) not found for architecture x86_64 해결방법 1. 서론 이번에 회사에서 이벤트를 위한 카카오 링크(공유) 기능을 개발해야 했는 데, 기존에 있던 오픈 소스들이 제대로 작동하지 않아서 새로 오픈 소스를 개발했다. 안드로이드는 잘 작동됐고, 문제는 iOS 였는 데 계속 "ld: symbol(s) not found for architecture x86_64" 오류가 나와서 정말 머리가 터져버리는 줄 알았다... 혹시나 나와 같은 문제를 가지고 고통받는 사람이 있을까 포스팅을 작성한다. 2. 원인 나의 경우 이번 오픈 소스를 kakao sdk v2를 기반으로 개발했기 때문에, 안드로이드는 kotlin으로 iOS는 swift로 개발했는 데, 이 오류가 생성된 원인으로 예상되는 것은 swift를 빌드할 때 버전 상 오류로 느껴졌다. 기존에 사용하는 모듈들을 .. 더보기 [React Native] Facebook SDK(react-native-fbsdk) 적용하기 1. 서론 저번 포스팅에서는 Firebase Analytics를 설정하는 법에 대해서 포스팅했다. 이번에는 마케터 분의 요청으로 Facebook SDK를 설정하게 됐다. 그렇게 어렵지는 않지만 File.swift 파일을 생성하는 부분이 공식문서에 나와있지 않아서 구글링으로 해결법을 찾았다. [👋 잠깐] 개발 환경 react-native 0.63.4 typescript 3.8.3 @types/react-native 0.63.2 추후에 이 포스팅을 보는 분들 및 다른 버전을 사용하시는 분들은 아래의 내용이 다소 차이가 생길 수 있으니 유의하기 바란다. 2. 필수 모듈 설치 react-native-fbsdk-next 4.3.0 npm install react-native-fbsdk-next cd ios && .. 더보기 [React Native] Firebase Analytics(@react-native-firebase/analytics) 적용하기 1. 서론 우연한 만남을 계기로 창업을 준비하던 나와 팀원은 프릭스 헬스케어라는 회사에 입사하게 됐다. 백엔드 개발자로써 들어가고자 했지만, 나와 함께하는 팀원은 백엔드, 나는 프론트 개발자로 들어가고 3~6달 후 프론트 개발자를 채용한 후에 백엔드로 넘어가기로 했다. 그리하여 입사하고 처음 맡은 업무가 닥터아이라는 영유아 성장 발달 모니터링 앱에 Firebase Analytics를 적용하는 것이었다. 설정 도중 크래쉬가 나는 경우가 생겨, 혹시나 다른 사람들도 그런 경우가 있을까해서 이 포스팅을 남긴다. [👋 잠깐] 개발 환경 react-native 0.63.4 typescript 3.8.3 @types/react-native 0.63.2 추후에 이 포스팅을 보는 분들은 아래의 내용이 다소 차이가 생길.. 더보기 [React Native] 다른 앱(play store, instagram 등) 열기 1. 서론 아래의 화면은 Antodo개발 1.0 초기 버전의 설정 페이지다. 어플을 개발하고 배포하고 나면 앱 리뷰 남기기와 앱 인스타그램 등의 타 어플을 바로 열 수 있는 코드가 필요하다. 처음에는 방법을 몰라서 webview로 띄웠는 데 너무 불편해서 1.0.2 버전에서 방법을 찾고 수정했다. 생각보다 간단하니 잘 따라오기 바란다. 2. 방법 매우 간단하게 Linking이라는 react native 내장 함수를 사용하면 된다. 2-1. iOS 설정 내가 진행한 프로젝트의 경로로 진행하도록 하겠다. ~/Antodo/ios/Antodo/info.plist 파일을 연다. ~/[만든 프로젝트 명]/ios/[만든 프로젝트 명]/info.plist 아래의 코드를 추가한다. app store, instagram,.. 더보기 [React Native] 특정 화면에서 화면 고정하기 1. 서론 지난번과 같이 지인의 스타트업 애플리케이션을 react native로 구현하다가 생긴 일이다. 특정 화면에서만 가로 모드로 고정하고 싶어서 이것저것 오픈 소스를 살펴보다가 발견한 모듈이 바로 react-native-orientation이다. 사용법은 매우 간단하므로 아래에서 코드를 보면 이해할 수 있을 것이다. 2. 개발 환경 react-native @0.62.2 typescript @4.0.3 react-native-orientation @3.1.3 3. 구현 방법 나는 아래와 같이 특정 화면에서 가로 모드로 고정하는 코드를 작성했다. 만약 세로 모드를 고정하고 싶다면 아래의 참고 홈페이지를 방문해서 portrait와 관련된 함수를 찾으면 된다. 반드시 useEffect 내에서 return .. 더보기 [React Native] Bottom tab bar 특정 화면에서 안 보이게 설정하기 1. 서론 지인의 스타트업 애플리케이션을 React Native로 제작해주다가 특정 화면에서만 바텀 탭 바가 사라지게 해야 하는 상황이 왔다. 공식 문서를 뒤져봐도 비슷한 코드는 있어도 내가 원하는 코드는 없고 여러 사이트들을 뒤지다가 해결 방법을 찾았다. 해당 사이트에서도 버전 차이 때문인지 문제가 생겨서 응용만 하고 디버깅하며 다시 코딩을 했다. 2. 개발 환경 react-native @0.62.2 typescript @4.0.3 @react-navigation/native @5.7.4 @react-navigation/stack @5.9.1 @react-navigation/bottom-tabs @5.9.0 3. 구현 방법 내가 원하는 플로우는 stack navigation들로 bottom tab ba.. 더보기 [React Native] Dimensions.get('window')와 Dimensions.get('screen')의 차이점 1. 서론 리액트 네이티브 개발 중 모바일 기기의 해상도를 가져올 수 있는 API인 Dimensions를 사용할 일이 있었는 데, 굳이 왜 window와 screen으로 나뉘어 있는지 모르겠어서 검색하고 알아낸 내용을 적고자 한다. 2. 차이점 사실 IOS에서는 window와 screen 둘 중 어떤 것을 쓰더라도 동일하게 적용된다. 다만, Android에서는 다르다. Dimensions.get('window') 위에 보이는 그림 1의 빨간색으로 표시된 부분을 포함하지 않고 영역을 추출한다. Dimensions.get('screen') 위에 보이는 그림 1의 빨간색으로 표시된 부분을 포함하고 영역을 추출한다. [참고] stackoverflow.com/questions/44978804/whats-the-d.. 더보기 이전 1 2 다음
