밀래의 코딩북

브릿지 리엑트 네이티브는 JavaScript로 개발하는데 어떻게 Native 코드로 동작할까? 이 궁금증을 해소하기 위해서는 브릿지의 개념을 알아야 합니다. 그리고 그 브릿지와 동작하는 Thread 개념을 이해해야 합니다. 브릿지는 JavaScript 코드를 이용해 네이티브 계층과 통신하는 역할을 합니다. 브릿지는 JavaScript 스레드 정보를 받아 네이티브에 전달합니다. JavasScript 스레드는 JavaScript 코드가 실행되는 장소이며 보통 리엑트 코드로 구성되어 있습니다. 네이티브를 담당하는 Main 스레드가 있고 레이아웃을 계산하는 데 사용하는 백그라운드 스레드인 Shadow 스레드가 있습니다. 또한, 네이티브 모듈이 있는데 각 모듈에 자체 스레드가 있습니다. Main Thread & ..

리액트 네이티브 란? 리액트 네이티브는 2015년 페이스북이 공개한 오픈소스 프로젝트로 리엑트에 기반을 두고 제작되었습니다. 리액트와 달리 IOS, Android에서 동작하는 네이티브 모바일 애플리케이션을 만드는 자바스크립트 프레임워크로 시작하였고 최근에는 Windows, Mac, Web까지 확장하고 있습니다. 또한, 2018년에는 React Native의 Github의 모든 레파지토리에서 두 번째로 많은 contributors를 기록했습니다. 현재는 Microsoft, Expo, Callstack, Infinite Red 그리고 Software Mansion 등 다양한 기업과 개인의 기부로 지원받고 있습니다. React Native : https://reactnative.dev/ React Native..

react-native에서 ios 빌드를 하다보면 library not found 이슈가 발생하곤 합니다. 정확히 어떤 이유인지 알 수 없어 라이브러리만 계속 재 설치 해보기도 하고 pod을 모두 삭제 했다가 설치 해보기도 하지만 한번 꼬인 설정은 이런 방법으로 해결 안되더라구요. 그래서 제가 library not found 관련하여 해결한 방법을 정리 해봅니다. library not found 해결 방법. 저는 react-native-slider 라이브러리를 설치하고 발생했습니다. yarn && pod install 를 한 뒤 build를 진행했는데 계속해서 위 문제가 발생했습니다. 여러가지로 검색 해보다가 pod install 할때 발생한 wanring 메세지가 눈에 들어왔습니다. 위 메세지를 읽어보..

이번 편을 보시기 전에 ReactNative 프로젝트에 Firebase 설정이 되어 있지않다면 아래 포스팅을 확인하고 오세요. 2020/11/19 - [React Native] - [React Native] Firebase Cloud Firestore 연결하기 #1 - 프로젝트 설정 [React Native] Firebase Cloude Firestore 연결하기 #1 - 프로젝트 설정 React Native에서 사용할 DB를 찾아보다 Firebase를 붙여 사용해 봐야 겠다는 생각이 들었습니다. 오프라인 일때는 로컬 DB를 사용하고 온라인이 되면 서버 DB와 동기화 되며 다양한 기능들을 사용할 수 firework-ham.tistory.com 프로젝트 설정이 끝났으니 Cloud Firestore을 설정해..

React Native에서 사용할 DB를 찾아보다 Firebase를 붙여 사용해 봐야 겠다는 생각이 들었습니다. 오프라인 일때는 로컬 DB를 사용하고 온라인이 되면 서버 DB와 동기화 되며 다양한 기능들을 사용할 수 있을 것이라 기대 했기 때문이죠. 천천히 React Native에 Firebase를 붙여보는 과정을 정리해보려고 합니다. 00. Firebase 프로젝트 생성하기. 구글 콘솔에 접속해서 프로젝트를 먼저 생성해 주어야 합니다. Firebase의 기능을 사용하려면 프로젝트가 먼저 있어야 하거든요. https://console.firebase.google.com/ Firebase 콘솔에 접속하여 프로젝트를 추가 합니다. 안내에 따라 프로젝트를 생성하면 되니 따로 정리하지는 않겠습니다. 프로젝트를 ..

맥에서 React Native를 개발하기 위한 개발 환경 설정하는 방법을 정리해 보도록 하겠습니다. 1. 홈브루 설치 홈브루는 맥에서 패키지를 설치하고 관리하는 맥용 패키지 관리자 입니다. 다양한 패키지를 간단하게 명령어로 설치 가능합니다. 홈브루를 만약에 설치 하셨다면 아래 명령어로 설치 되었는지 다시 한번 확인 합니다. 버전 확인 brew --version Homebrew 2.2.11 Homebrew/homebrew-core (git revision b237e6; last commit 2020-04-05) Homebrew/homebrew-cask (git revision a5780; last commit 2020-04-05) 만약 버전 표시가 되지 않거 알수 없는 명령어로 표시 된다면 아래 사이트에서..

윈도우에서 React Native를 개발하기 위해서는 노드, Python, 안드로이드 스튜디오, Java JDK 등을 설치해야 합니다. Javascript를 활용하지만 궁극적으로 마지막에는 iOS, 안드로이드 앱을 배포해야 하기 때문에 그에 맞는 빌드 구성이 필요합니다. 그래서 IOS의 경우에는 MacOS가 아니면 빌드가 되지 않습니다. 왜냐하면 MaxOS에서 지원하는 Xcode 빌드 툴이 있어야지만 IOS용 앱을 빌드 할 수 있습니다. 그렇다고 IOS용 앱 테스트를 못하는 것은 아닙니다. 리액트 네이티브는 JavaScript로 개발해 웹툴로 개발의 전반적인 테스트가 가능하기 때문입니다. 그럼 윈도우에서 안드로이드 앱을 빌드 구성 및 개발 구성을 설치해 보겠습니다. 1.node 설치 방법 리액트 네이티브..

Front-End, Application 개발을 하는 분들이라면 한 번쯤 리액트 네이티브(React Native)라는 단어를 한 번쯤은 들어보셨죠? 페이스북에서 만든 오픈소스 모바일 애플리케이션 프레임워크로 Javascript를 알고 있는 개발자라면 안드로이드, IOS 앱을 만들 수 있는 크로스 플랫폼 (하이브리드 플랫폼)입니다. 이 페이지는 리액트 네이티브에 대해 알아보고 장단점을 적어보려고 합니다. 1. 리액트 네이티브란? 리액트 네이티브는 페이스북에서 만든 오픈소스 모바일 애플리케이션 프레임워크입니다. JavaScript로 개발이 가능하며 하나의 프로그래밍 언어로 IOS와 안드로이드 모바일 앱을 동시에 개발할 수 있는 크로스 플랫폼입니다. 애플리케이션을 개발한다고 한다면 Android는 Kotlin..