본문 바로가기

React-Native9

[React-Native] 리액트 네이티브(react-native) 프로젝트 시작하기 리액트 네이티브를 시작한 지 벌써 6개월이 지났습니다. 그동안 리액트 네이티브로 개발하면서 장점도 느껴보고 단점도 느끼며 그 단점 때문에 무척 화가 난적도 많았습니다. 하지만 현재 회사에서 진행하고 있는 프로젝트의 플랫폼이 리액트 네이티브이기 때문에 당분간은 계속 리액트 네이티브로 앱 개발을 이어 나갈 것 같습니다.그래서 리액트 네이티브를 처음부터 복습하며 지금까지 해왔던 내용들을 공유하는 글을 작성해볼까 합니다. 먼저 이 글에서는 리액트 네이티브를 설치하고 프로젝트 생성&빌드해보겠습니다. 리액트 네이티브 개발방식 Expo CLI React Native CLI 리액트 네이티브는 위의 두가지 방식으로 앱을 개발하고 빌드할 수 있습니다. Expo CLI는 Xcode와 Android Studio의 코드를 건드.. 2019. 10. 16.
[React-Native] react-navigation 사용하여 화면 간 이동하기 왜 react-navigation인가? react-native로 개발을 시작하는 데 있어서 가장 중요한 요소 중 하나는 화면 별 스택 구성과 화면 간 이동에 어떤 라이브러리를 쓸 것인가인 것 같습니다. react-navigation native-navigation react-native-navigation react-native-router-flux 더 많은 라이브러리들이 있겠지만 화면을 이동할 때 많이 쓰는 라이브러리는 이정도가 있는 것 같습니다. 그중에 저는 react-navigation을 사용하여 개발을 시작하였습니다. 그 이유는 성능개선에 관한 update가 다른 라이브러리보다 훨씬 좋다고 판단이 되었기 때문입니다. react-navigation는 공식홈페이지가 따로 존재하고 현재 버전 4.0.1.. 2019. 10. 15.
[React-Native] 리액트 네이티브(react-native) 구글 로그인 연동하기 앱에서 사용자들이 간편하게 로그인할 수 있는 sns 로그인 연동은 필수인 것 같습니다. 저도 안드로이드로는 구글 로그인 연동을 해봤었는데 이번에 프로젝트를 진행하면서 리액트 네이티브로는 처음 연동을 해보았습니다. 자료가 아직 많지 않은 것 같아 정리를 해보았습니다. ios앱 전용으로 테스트한 내용입니다. 1. Firebase 프로젝트 생성 구글 로그인인증을 위해서 우선 새로운 Firebase 프로젝트와 그 안에 새로운 앱을 만들어줍니다. 1) 기존 Firebase 프로젝트가 없는 경우 Firebase 콘솔로 이동하여 이름을 지정하고 새 프로젝트를 생성합니다. 2) 새 앱을 만들어 프로젝트에 연결합니다. 프로젝트 대시보드에서 ios 버튼을 눌러 앱을 추가해보겠습니다. 앱 등록을 위해 시키는 대로 bundl.. 2019. 10. 12.
[React-Native] React native 와 WebView 데이터 통신 에러 React Native에서 WebView로 띄우고 데이터를 주고받는 작업에서 다른페이지는 괜찮았는데 KMC인증페이지를 호출하는데 계속 이러한 에러가 발생했다. Setting onMessage on a WebView overrides existing values of window.postMessage, but a previous value was defined 특히 이놈이 안드로이드는 문제가 없는데 IOS에서만 계속 에러가났다.. 알아보니 문제는 iOS에서 window.postMessage 호출을 연속적으로 수행 하면 마지막 호출이 성공할 때까지 메시지가 전달되기 전에 URL이 무시 될 때마다 첫 번째 호출이 손실 된다는 것 이 문제에 대해 수정은 여전히 진행되고 있는 중인것 같다. 일단 찾아서 해결한 방.. 2019. 6. 20.