반응형 프로그래밍 개발/React Native8 React Native - 작동원리 그리고 UI 스레드 / JS 스레드에 대한 고찰 작동원리 그리고 UI 스레드 / JS 스레드에 대한 고찰 지금까지 React Native을 통해 개발을 하면서 알게 된 근본적인 작동원리 그리고 작동원리와 관련된 UI 스레드와 JS 스레드에 대한 고찰을 기록해보자고 합니다. 기존 OS별 Native 단에서 앱 개발을 했던 과거에 비하여 React Native라는 프레임워크를 통해 OS 둘 다 함께 개발이 가능하도록 하고 JS 언어와 ReactJs 문법을 사용하면서 개발 생산성을 매우 높게 해주었습니다. ReactJs로 개발 공부를 시작한 저로서는 앱도 개발할 수 있는 능력을 갖추게 해 준 매우 고마운 존재이기도 합니다. 물론 Native로만 개발하면 React Native보다 생산성 말고는 성능적으로나 기능 구현에서는 더 앞서 나가는 건 사실이지만 엄청.. 2023. 9. 22. React Native - 구글 맵(Google Map) SDK 환경세팅과 위치 기반 서비스 적용기 구글 맵(Google Map) SDK 환경 세팅과 지도 운영 서비스 적용기 제가 운영 중인 서비스 특성상 위치 기반 서비스가 필요했습니다. 유저 고객들이 Map을 활용하여 가까운 방문 가게나 병원을 더 수월하게 찾도록 하는 것이 목표였습니다. 현재도 많은 플랫폼 서비스들이 지도 기능을 이용한 서비스 운영을 하고 있습니다. 예를 들어 카카오 택시, 배달의 민족, 등등 위치 기반 서비스는 흔하면서도 플랫폼 서비스 운영의 활성화를 위한 필수 기능이라고 생각합니다. 국내용이 아닌 글로벌 서비스라는 특성으로 인하여 구글 Map을 사용해야 한다는 결정을 하게 되었습니다. React Native 프레임워크를 쓰고 있는 프로젝트여서 구글 Map SDK를 React Native 프로젝트에 얹을 수 있는 적당한 라이브러리.. 2023. 8. 22. React Native - E2E UI 테스트 도입, Detox E2E UI 테스트 도입, Detox Detox Made For CI Execute your E2E tests on CI platforms like Travis CI, CircleCI or Jenkins without grief. wix.github.io 💡 현재 서비스 운영 중인 사용자 앱의 서비스가 점점 커지다 보니 개발 및 유지보수 후 예측할 수 없는 사이드 이펙트로 인한 중요 비즈니스 기능들의 이슈에 대한 영향이 더 많이 있을 수 있다고 판단하였습니다. 그래서 사용자 앱 서비스 프로덕션 배포전 E2E 테스트를 거쳐갈 필요가 있다고 판단하여 Detox라는 E2E 자동화 테스트 라이브러리를 도입하여 개발 환경에 E2E 자동화 테스트 환경을 구축하게 되었습니다. Detox는 React Native 앱의.. 2023. 8. 18. React Native - Firebase Push Notification, Image 이미지 표시 iOS 환경 세팅 Firebase Push Notification, Images 표시 iOS 환경 세팅 번거롭게도 React Native에서 Firebase push 알림을 사용할 때 메시지 텍스트와 함께 이미지를 push 하려면 iOS에서 따로 설정을 해줘야 합니다. 다행히 Android는 따로 설정할 필요 없고, iOS에서만 설정해 주면 됩니다. 주로 Xcode에서 설정 작업을 합니다. 설정을 하려는 프로젝트를 Xcode로 실행했다고 가정하여 진행하겠습니다. 1. Xcode를 실행해서 File > New > Target... 을 누릅니다. 2. Notification Service Extension을 찾아서 선택합니다. 3. Product Name과 Language를 수정해 주면 됩니다. firebase 문서에서 Pr.. 2023. 8. 16. React Native - 코드 푸쉬(Code Push) 정의 / 개발 환경 세팅 / Staging 환경 세팅 코드 푸시(Code Push) 정의 CodePush는 마이크로소프트의 Visual Studio App Center에서 제공하는 서비스 중 하나로, 클라우드 기반의 앱 원격 업데이트 서비스입니다. 원리는 git과 유사하다. git은 코드를 수정하고 우리가 터미널을 통해 수정한 코드를 커밋하고 우리의 git 서버에 push 하면 다른 개발자가 pull을 통해 내가 수정한 코드를 내려받을 수 있는 구조입니다. CodePush도 우리가 터미널에서 배포 명령을 실행하면 앱을 bundle 파일로 변환하고 이를 CodePush 클라우드 서버에 저장합니다. 그럼 사용자가 기존에 설치한 앱을 실행하면 CodePush 서버에 업데이트 여부를 확인하고 수정된 내용을 병합하는 것입니다. Code Push를 통해 얻는 이점 R.. 2023. 8. 10. React Native - IOS / Android 개발 환경 세팅 (M1 Mac용) React Native 개발 환경 세팅 React Native 개발 환경 세팅입니다. 맥(Mac) OS M1 전용 환경세팅이니 참고 부탁드립니다. Expo CLI와 React-Native CLI, 2가지가 있는데 그중에서 React-Native CLI를 구축하는 방법 입니다. 아래는 기본적으로 환경세팅 관련하여 기본적으로 필요한 프로그램이니 프로그램 설치 후 진행 부탁드립니다. homebrew 설치 Item2 설치 (선택입니다. 기본 터미널도 가능합니다.) iTerm2 - macOS Terminal Replacement iTerm2 by George Nachman. Website by Matthew Freeman, George Nachman, and James A. Rosen. Website update.. 2023. 8. 8. React native - 파이어베이스(FireBase) Ios, Android 세팅하기 파이어베이스 환경 세팅하기 파이어베이스를 react native 프로젝트에서 세팅하기 위해서는 ios 별 android별 환경 세팅을 각각 해줘야합니다. 일단 파이어베이스 홈페이지에 들어가서 공통적으로 프로젝트 생성을 해야합니다. Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com 구글 로그인 후 프로젝트 생성을 클릭하여 시작을 한다. 프로젝트 이름, 요금 등등을 선택하며 생성할 수 있습니다. { "react-native": { "messaging_android_notification_channel_id": "high-priority" } } 위의 코드를 react native 루트 프.. 2021. 10. 6. React Native - 딥링크(Deep Link) Ios, Android 구현하기 딥링크란 딥링크는 특정 페이지에 도달 할 수 있는 링크를 말합니다. 그렇다면 모바일 딥링크란 모바일 어플리케이션의 특정 페이지에 도달 할 수 있는 링크를 말하는 것입니다. 가끔씩 모바일로 웹 서핑을 하다가, 어떤 버튼을 눌렀는데 네이티브 앱으로 바로 이동하는 기능을 해본적이 있을 것인데 그것이 바로 '모바일 딥링크'를 이용하여, 특정 앱 페이지로 들어가는 것입니다. 딥링크의 종류 친구들과 특정 웹 페이지를 공유할 때 자주 사용하는 웹 URL(예를 들어, https://k0502s.tistory.com/category/React%20Native) 처럼, 모바일에 어플리케이션에도 특정 페이지에 들어갈 수 있는 링크가 있는 것이라고 말할 수 있습니다. 딥링크의 형태는 앱 스킴(URL 스킴) 혹은 일반적인 ht.. 2021. 10. 6. 이전 1 다음 반응형
