리액트 네이티브 (React Native)

리액트 네비게이션 (react navigation) 으로 리액트 네이티브 화면 전환하기

리액트 네이티브 화면 전환 방법은? 리액트 네이티브에서 화면을 옮겨다디고 싶다면, 어떤 선택지가 있을까? 다음 두가지 패키지를 고려할 수 있다. react-navigation react-router-native react-navigation 조금 더 앱에 적합한 기능을 많이 가지고 있다. 사실상의 대세이다. react-router-native 기존에 웹에서 사용하던 react-router 와 사용법이 비슷하여 편리하다. 웹처럼 주소기반의 화면이동이 가능하다. react-navigation 설치하기 사람들이 많이 사용하는 것이 보통 레퍼런스가 많으니 대세를 따라 react-native 를 설치하는 것이 일반적인 방법이다. https://reactnavigation.org/docs/getting-starte..

리액트 네이티브 앱 이름 변경 방법

개요 리액트 네이티브에서 앱 이름을 바꾸는 것은 생각보다 까다롭고 위험을 동반하는 일이다. 리액트 네이티브 뒷단에서 앱 이름을 이용해 자동생성된 코드가 꽤나 많기 때문이다. 그래서 앱 이름은 웬만하면 처음 선택한 이름을 사용하는 게 좋다. 또한 바꿔야 하더라도 displayName 만 변경해주는 것이 정신건강에 이롭다. 아래의 내용은 displayName 을 변경하는 방법이다. 앱 이름 변경 방법 strings.xml 파일 수정 /android/app/src/main/res/values/strings.xml 의 내용을 수정한다. MyPrivateAppName 위의 app_name 을 바꾸고 싶은 이름으로 수정해준다. app.json 파일 수정 { "name": "MyPrivateApp", "display..

리액트 네이티브 (React Native) 앱 디버깅 하는 방법들

개요 리액트 네이티브 앱 디버깅 방법에는 어떤 것들이 있을까? React-Native 에서 제공하는 자체적 Debugging 툴 이용하기 애뮬레이터에서 Ctrl + M 을 누르면, 디버그 모드로 들어가는데 이 디버그 모드를 이용해서 디버깅할 수도 있다. 그러나 Flipper 라는 더욱 강력한 디버깅 도구가 있으니, 그걸 쓰는게 낫다. 왜냐하면 앱에서 보내는 네트워크 요청과 같은 것들을 하나도 볼 수 없다. Flipper Debugging 툴 이용하기 Flipper 웹사이트 에서 다운로드 받을 수 있다. 운영체제에 적합한 버전을 다운받으면 된다. 다운로드 이후 Setup Doctor 를 통해 필요한 패키지를 알아볼 수 있다. 윈도우즈의 경우 OpenSSL 이 설치되어 있지 않으니, chocolatey 라는..

React Native 의 Metro 란? Metro (메트로) 소개

Metro 소개 React-native 프로젝트의 일부였던 프로젝트이다. 지금은 독립적인 프로젝트로 떨어져나왔다. Metro 가 하는 일 리액트 네이티브의 Development platform 이다. DX 증진을 위해 노력한다. javascript bundler 이다. asset 을 관리한다. hot module reloading 을 제공한다. 앱개발 시에 작은 변화에도 수없이 많은 시간을 기다려야 하는 기존 방식에서 탈피하기 위해 태어났다. 특징 🚅 Fast: 1초 미만의 리로드 사이클을 목표로 한다. 시작과 번들링 속도가 빠르다. ⚖️ Scalable: 하나의 애플리케이션에서 수천개의 모듈과 협업한다. ⚛️ Integrated: 모든 리액트 네이티브 프로젝트를 지원한다. 기타 기능 R 버튼을 눌러 엔..

리액트 네이티브 초보자를 위한 UI 팁들

리액트 네이티브 앱 개발 시 IOS 와 Android 의 화면 호환성 실질적으로 IOS 와 Android 둘 따로 코딩해야 할 일이 많지만, 아래의 규칙을 지키면 어느정도는 호환이 된다. 화면은 작은 화면을 기준으로 작업하는 것이 좋다. 작은 화면으로 작업하면 큰 화면으로 봐도 상대적으로 덜 깨진다. 아이폰을 기준으로 작업하는 것이 좋다. 아이폰을 기준으로 작업하면 안드로이드에서 봤을 때 상대적으로 덜 깨진다. 호환성있는 화면을 그리기 위한 결론 화면 작은 아이폰으로 코딩하면, 깨질 일이 최소화된다. 리액트로 만든 웹을 리액트 네이티브로 가져올 수 없다. 절대 가져올 수 없고, 공통되는 것도 하나도 없다. 단, 리덕스와 같은 비즈니스 로직은 재사용 가능하다. UI 상의 모든 것이 리액트 네이티브 자체 클..

리액트 네이티브 템플릿 프로젝트 기본 폴더 구조 살펴보기

개요 리액트 네이티브 템플릿 프로젝트의 폴더 구조를 살펴보자. 기본 디렉토리들 ├── __tests__ │ ├── App-test.js ├── android ├── ios ├── node_modules ├── .buckconfig ├── .eslintrc.js ├── .flowconfig ├── .gitattributes ├── .gitignore ├── .prettierrc.js ├── .watchmanconfig ├── App.tsx ├── app.json ├── babel.config.js ├── index.js ├── metro.config.js ├── package.json └── yarn.lock네이티브 구동과 관련된 폴더와 파일들 android: 안드로이드 네이티브 구동에 필요한 파일들 (G..

리액트 네이티브 (React Native) 란?

리액트 네이티브 (React Native) 란? 자바스크립트 라이브러리인, 리액트 (React) 와 비슷한 방식을 이용하여 앱 개발을 할 수 있게 해주는 프레임워크이다. 어떤 문제를 해결하려고 나왔는가? 앱 개발 생태계는 두가지 운영체제에 따라 개발 방법이 완전히 갈리고 있다. 크게 삼성폰 (안드로이드) 와 아이폰 (IOS) 인데, 둘은 어떻게 디바이스를 구성할지 표준을 정하고 만드는 것이 아니기 때문에, 앱을 만드는 방법도 완전히 다르다. 무엇보다 React 로 앱을 만드는 것을 목적으로 한다. React 는 웹개발자라면, 한번쯤 거쳐가는 라이브러리이기 때문에 기존에 알던 지식을 활용하여 웹과 앱을 전부 관리할 수 있다. 그리고 회사 차원에서는 기존의 React 개발자를 앱개발에 활용할 수도 있으니 가..