반응형

프로그래밍/React-Native 6

react-native eslint 설정

eslint란? lint는 linter라고도 하며 소스코드의 문법오류나, 버그등을 찾아주는 도구라 할 수 있습니다. 이러한 linter는 최신 개발환경에는 필수로 자리잡았습니다. 그러므로 어떤 언어든 개발을 하기 앞서 linter의 활용법을 잘 알아야 합니다. 자바스크립트에서 사용하는 linter는 ESlint입니다. 앞서 강의에서 react-native typescript 환경을 설치한 후 시작하도록 하겠습니다. $ npx react-native init TestProject --template react-native-template-typescript 위 설정만으로도 eslint가 설치됩니다. 기본 설치 (V7.32.0) 버전이 설치되는데 최신 버전의 eslint를 설치하도고 싶다면 다음과 같은 과정..

react-native-reanimated 에러관련 기록

react-navigation/drawer 6.1.6 를 사용할 때 react-native-reanimated 2.x.x 을 설치하면 warning 메세지가 뜬다. 2.x.x 버전 사용을 위해 추가 설정을 하라는 메세지다. 공식페이지 에 가보면 버전별 설정 방법이 나와있으면 그렇게 어렵지 않다. 2.x.x 번대를 설치하고 drawer를 잘 구성하고 debug 모드로 테스트까지 잘 끝났다고 방심하면 안된다. 우리를 release 버전이 제대로 돌아가는지도 테스트해야한다. react-native가 참 개발이 좋게 되어 있지만 이렇게 release 모드에서 앱이 실행시 런타임에러가 나면서 앱이 종료되는 경우가 많이 생긴다. 그래서 라이브러리를 설치한 후에는 반드시 release 모드로 제대로 앱이 빌드되는지 ..

react-native release 모드로 배포시 주의할 점(http 안되는 문제).

개발모드에서는 잘 되던 앱이 react-native에서 release 모드로 테스트를 하거나 build를 한 후 먹통이 되는 경우가 있다. 가장 흔히 겪는 문제는 api 호출이 제대로 안되는 경우인데, 원인은 http 프로토콜을 사용하기 때문이다. 기본적으로 react-native는 release 모드에서 http의 호출을 막는다. 따라서 https를 사용하도록 설정해야하는데, 여의치 않을 때 다음과 같은 설정으로 http 모드를 허용해주는 방법을 사용한다. android/app/src/main/AndroidManifest.xml 에서 ... ... android:usesCleartextTraffic="true" 추가

안드로이드 앱 등록 프로세스 정리중...

이 글은 React-native로 개발한 앱을 Android 테스트용으로 등록하는 과정(2021/12/23일 기준)에 대한 정리다. 크게 두 단계로 나누어 생각하기로 한다. 첫 째로 React-Native에서의 준비단계는 abd파일 apk파일을 생성하는 것이다. 두 번째로 google play console에 등록하는 과정이다. 등록과정은 테스트 버전과 배포되는 공개 버전 사이에 큰 차이는 없으므로 참고가 될 것 같다. React-Native 단계 구글에 앱을 올리기 위해서 가장 많이 문제가 되는 부분이 바로 업로드 키 와 사이닝 키라는 개념인 것 같다. 이 부분을 자세하게 설명한 문서는 보지 못해서 초보 앱 개발자의 경우 많이 헤멜 것이다. 문서가 있긴 하지만 이미 개념을 잘 아는 사람을 위한 설명뿐이..

redux-saga에서 websocket을 이용하기.

이 글은 redux-saga에서 websocket사용을 위해 필요한 사항들을 개인적인 방식으로 정리를 위한 글이므로 참고만 하시길 바랍니다. 발단은 이렇습니다.(1차 실패 과정) react(react-native)에서 socket통신을 위해 websocket을 사용하기로 결정합니다. - 소켓 통신이 필요한 페이지 로딩마다 websocket을 연결하는 방식을 사용할 수도 있으나, 이렇게 하면 소켓 연결과 종료가 빈번히 발생하여 소켓 연결의 의미가 퇴색되게 느껴집니다. 그리하여 로그인 시에 연결을 하고 로그아웃을 할 때 소켓을 종료시키도록 설계하려 합니다. 물론 소켓 통신이 필요없는 페이지에서도 연결 상태를 유지하므로 서버 리소스가 증가할 수 있다는 점은 염두해 둔 결정입니다. - 이 방법을 사용하기 위해서..

React Native 워밍업.

안드로이드와 IOS 모바일 앱 개발 방식은 여러가지가 있지만 React를 사용해온 경험으로 React Native를 사용하기로 했다. 개발상 별 어려움을 없을 것이라 생각했고 까다로운 부분은 초기 개발 환경 설정과 배포라고 생각된다. 우선 리액트 네이티브의 개발 방식은 두 가지로 생각하면 된다. - expo - react-native-cli 또한 개발자가 사용할 컴퓨터 환경은 3가지다. - windows - linux - mac 워밍업이라 자세한 내용이 아닌 대략 훑어본 것들을 정리한다. - expo는 많은 기능들을 패키징 시킨 개발 프레임웍이라 생각하면 된다. 예를들어 android와 ios 개발과 배포를 한번에 정리, react-native API를 좀 더 쓰기 쉽게 모듈화 시켜 제공. expo는 매..

반응형