JavaScript로 앱을 빌드하는 것보다 더 좋은 것은 없습니다. 모바일 앱을 구축하지 않는 한. 자바스크립트는 웹앱을 구축하기 위한 것으로, 예전에는 불가능했던 네이티브 모바일 앱을 구축하기 위해 자바스크립트를 사용했습니다. 웹 개발자가 네이티브 모바일 앱 구축에 뛰어드는 것은 어려운 일이었습니다. 그들은 Java, Objective-C … 또는 이러한 목적으로 사용된 모든 프로그래밍 언어를 배워야 합니다.
즉, 페이스북의 React Native가 이 장벽을 깨기 전까지는 말이다. React Native는 Android 및 IOS용 크로스 플랫폼 앱 구축과 같은 큰 이점을 제공합니다. React Native 이전에는 코드를 두 번 작성해야 했습니다. 하나는 Android용이고 다른 하나는 IOS용입니다. 더 이상 그렇지 않습니다.
이 글은 React Native의 세계를 소개하는 글이니 준비하셨나요?
리액트 네이티브가 필요한 이유
맞습니다. 그렇다면 왜 다른 기술이 아닌 네이티브로 반응할까요?
다른 기술이 감당할 수 없는 많은 솔루션을 제공합니다. React Native로 할 수 있는 작업은 다음과 같습니다.
네이티브 모바일 앱 빌드
React Native를 사용하면 iOS 및 Android용 JavaScript로 기본 앱을 작성할 수 있습니다. 제스처, 푸시 알림, 카메라 및 위치와 같은 모든 기본 구성 요소를 사용할 수 있는 기능을 제공합니다. ionic 또는 PhoneGap과 같은 모바일 앱을 빌드하기 위한 다른 JavaScript 라이브러리가 있습니다. 그러나 이러한 라이브러리는 Webview를 사용하고 이러한 기술로 구축된 앱은 기본이 아닙니다.
교차 플랫폼 모바일 앱 구축(iOS 및 Android)
예, React Native를 사용하면 iOS 및 Android에서 실행할 수 있는 모바일 앱을 구축할 수 있습니다. 이것이 React Native의 큰 장점 중 하나입니다. Facebook이 앱을 만들기 전에 다른 코드로 앱을 두 번 빌드해야 했습니다. 하나는 Swift 또는 Objective-C를 사용하는 iOS용이고 다른 하나는 Java 또는 Kotlin을 사용하는 Android용입니다. React Native는 이 문제를 해결하여 React Native 앱을 빌드할 수 있으며 iOS 및 Android에서 작동합니다. 대박! ?
JavaScript와 React로 코드 작성
React Native 앱을 빌드하는 동안 실제로 JavaScript를 작성합니다. Reactjs 코드를 사용하면 훌륭한 UI 및 사용자 경험 구성 요소를 구축할 수 있습니다.
반응 네이티브 시작하기
반응 네이티브로 시작하는 것은 흥미로울 수 있지만 동시에 약간 혼란스러울 수 있습니다. 첫 번째 단계는 설치하는 것이며 여러 가지 방법으로 설치할 수 있습니다.
expo-cli 사용:
expo-cli는 명령줄 도구입니다. Expo API와 통합된 React Native 상용구를 다운로드하여 설치합니다(설치 가이드는 여기에서 확인). React Native 앱을 빌드하는 쉬운 방법이며, React Native를 막 시작했다면 권장하는 방법입니다.
expo-cli는 다양한 옵션을 제공합니다. 구성 없이 모바일 장치에서 애플리케이션을 실행하고 테스트할 수 있습니다. QR 코드를 스캔하면 앱이 엑스포 모바일 앱과 함께 열립니다. appertize라는 웹 인터페이스를 통해 브라우저에서 React Native로 구축된 다른 모바일 애플리케이션을 탐색할 수 있습니다!
react-native-cli 사용
react-native-cli는 expo-cli와 동일한 작업을 수행하지만 접근 방식과 추가 이점이 다릅니다. react-native-cli와 함께 설치된 앱은 앱에서 고유한 기본 모듈을 생성할 수 있는 옵션과 기능을 제공합니다. 네이티브 모듈을 만들기 위해 애플리케이션을 꺼낼 필요는 없습니다. 꺼내면 기본 모듈을 사용하고 고유한 항목을 작성할 수 있습니다(다른 부분에서 기본 모듈을 작성하는 방법을 살펴보겠습니다. ).
다른 플랫폼에서 React Native 앱을 개발하는 것은 다른 프로세스입니다. 특정 플랫폼에 대한 특정 구성이 필요한 경우가 있습니다. 예를 들어 Android용으로 빌드하려면 Android SDK를 사용해야 하므로 이것이 어떻게 작동하는지 살펴보겠습니다!
Android용 모바일 앱 빌드
Android용 개발을 시작하려면 설치해야 하는 몇 가지 요구 사항이 있습니다. 먼저 Android SDK와 Android Studio를 모두 다운로드하여 구성해야 합니다. 여기 링크로 다운로드할 수 있습니다.
Android Studio를 다운로드한 후 일부 API도 설치해야 합니다. 그렇게 하려면 Android Studio를 연 다음 설정 탭을 클릭하면 이 창이 열립니다.
먼저 SDK 플랫폼 탭에서 반응 네이티브가 지원하려는 플랫폼(예:Android 6.0 Marshmallow)을 ✔️확인합니다. 그런 다음 SDK 도구로 전환하세요.
그리고 Android SDK Build-Tools를 확인하십시오. , Android SDK tools , 및 google play service . Android SDK Build-Tools에서 모든 플랫폼을 선택합니다.
- 19.0.0부터 20.0.0까지
- 22.0.0에서 24.0.0으로
- 그리고 25.0.2, 26.0.1 ~ 26.0.3
- 27.0.3 및 28.0.1 ~ 28.02
이제 SDK와 Android Studio가 완료되었습니다. 다음 단계는 에뮬레이터입니다. 에뮬레이터(또는 시뮬레이터)는 앱을 실행하고 테스트해야 하는 곳입니다. 다양한 선택이 가능합니다.
Android Studio 에뮬레이터를 사용할 수 있습니다. Android Studio에서 사용할 에뮬레이터를 만드는 방법은 여기에서 확인하세요. 솔직히 나는 그것들을 사용한 적이 없습니다. 대신 Genymotion이나 실제 기기를 선호합니다.
지니모션
Genymotion은 애플리케이션을 테스트하기 위한 가상 에뮬레이터를 제공하는 데스크탑 애플리케이션입니다. 빨라서 많이 애용합니다. ? 모든 실제 장치에서 찾을 수 있는 기능으로 맞춤형 전화기를 만들 수 있는 옵션을 제공합니다. 예를 들어 Wi-Fi, 위치 및 카메라를 활성화합니다. Android Studio 에뮬레이터나 다른 에뮬레이터보다 Genymotion을 사용하는 것이 좋습니다.
실제 기기 사용
실제 장치를 사용하여 앱을 실행하고 테스트하는 것보다 더 좋은 것은 없습니다. 애플리케이션이 실제 장치에서 어떻게 보이는지 알 수 있기 때문입니다. 가상 장치가 제공하지 않는 방식으로 작업의 현실을 느끼게 합니다. 따라서 장치를 사용할 수 있는 능력이 있다면 주저하지 마십시오.
지금까지는 Android에 문제가 없지만 iOS는 어떻습니까?
IOS용 반응 네이티브 앱 빌드
iOS용 React Native를 실행하는 것은 Android와 크게 다르지 않습니다. Android에서 실행되는 동일한 React Native 앱은 일부 예외를 제외하고 iOS에서도 실행할 수 있습니다.
예를 들어 iOS 기기에서 실행하려면 MacOS가 있어야 합니다. MacOS 및 iOS에 대해 말하면 iOS에서 React Native를 실행하기 위해 Android용 SDK와 같은 추가 종속성을 다운로드할 필요가 없습니다.
에뮬레이터와 관련하여 Xcode에는 React Native 앱을 테스트하는 데 사용할 수 있는 멋진 에뮬레이터가 있습니다. 에뮬레이터와 함께 사용할 수 있는 몇 가지 트릭을 보여주는 이 게시물을 확인할 수 있습니다.
MacOS에서는 iOS와 Android를 모두 실행할 수 있습니다. MacOS에 Android Studio와 Genymotion을 확실히 설치할 수 있습니다. 이 가능성은 Android 에뮬레이터만 실행할 수 있고 iOS 에뮬레이터는 실행할 수 없는 PC에는 존재하지 않습니다. MacOS를 사용 중이라면 운이 좋습니까? 즐기십시오.
이제 React Native 앱을 빌드할 수 있는 환경이 생겼고 모든 것을 설치했지만 React Native 코드는 어떻게 작성됩니까? 정말 간단합니다. 실제로 Reactjs 코드를 작성하게 됩니다.
공식 가이드를 확인하여 React Native에 대한 연습을 할 수 있습니다. "React Native YouTube Replica"를 시작하려면 이 훌륭한 기사를 추천합니다. 첫 번째 React Native 앱을 만드는 방법을 단계별로 안내합니다.
우와! 지금까지는 괜찮고 반응 네이티브로 코딩하고 있습니다. ? 그러나 오류를 확인 및 디버그하고 코드 로그를 확인해야 합니다. 네 로그!! 따라서 디에버거! React Native로 어떻게 디버깅합니까?
디버깅 반응 네이티브
코드 디버깅은 React Native뿐만 아니라 다른 프로그래밍 언어에서도 매우 중요합니다. 따라서 React Native 코드에서 무슨 일이 일어나고 있는지 알아야 합니다. 다음과 같이 React Native 앱을 디버그하는 다양한 방법이 있습니다.
Chrome devtools로 디버그
React Native는 Chrome devtools를 사용하여 앱의 로그를 볼 수 있는 옵션을 제공합니다. Chrome으로 디버깅하고 에뮬레이터에서 디버깅 모드를 활성화하려면 키보드에서 Ctrl+ m을 클릭하기만 하면 됩니다. .
이 화면이 나타납니다:
그런 다음 Debug Js Remotely를 선택합니다. . 이렇게 하면 이 주소가 https://localhost:8081/debugger-ui/인 Google Chrome 탭이 열립니다. . Chrome devtools를 사용하기 위한 것입니다. 다른 옵션은 어떻습니까?
React-native-debugger 사용
React-native-debugger는 React Native 코드를 디버깅하는 훌륭한 도구입니다. 많은 이점을 제공하는 데스크톱 응용 프로그램입니다. Redux devtools 및 React-devtools 통합과 함께 제공됩니다. 스타일을 디버그할 수도 있습니다. 실제로 React Native를 위한 최고의 디버거이며 제가 사용하는 것입니다. 일반적으로 MacOS, Windows 및 Linux에서 사용할 수 있습니다. 설치 및 통합 가이드를 확인하세요.
이 정도면 충분하다고 생각합니다. 이것은 React Native로 모바일 앱을 빌드하기 위한 절대 가이드의 첫 번째 부분입니다. 다음 부분에서는 네이티브 구성 요소, React 네이티브 API, 다른 라이브러리와의 통합, Redux, GraphQL 및 이와 유사한 것들을 사용하는 방법과 같은 기술적인 팁과 문제에 대해 자세히 알아볼 것입니다. 따라서 다음 파트가 나올 때 계속 지켜보려면 이 메일 목록을 구독하십시오. 시간 내 주셔서 감사합니다. ?
Twitter에서 항상 저를 찾을 수 있습니까?