react native 썸네일형 리스트형 Android apk 파일 배포 apk 파일 이란? 안드로이드 응용 프로그램 패키지(Android application package)의 약자로, 안드로이드의 소프트웨어와 미들웨어 배포에 사용되는 패키지 파일이다. 방법 폴더 확인 android/app/src/main/assets 폴더가 있어야한다. 없으면 만들어야한다. key 생성 keytool -genkeypair -v -keystore my-upload-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 JSK와 관련된 문구가 뜨지만 무시하고 넘어가도 된다. 생성되는 폴더들을 android/app 폴더로 이동시킨다. keystore 파일은 version control system으로 올라가면 안되므로.. 더보기 Splash Screen Splash Screen이란? 앱을 실행했을 때, 연결이 완료 되기전에 나타나는 화면이다. 로딩화면이라고 보면 된다. 사용 방법 1. 라이브러리 설치 yarn add react-native-splash-android yarn add -D @bam.tech/react-native-make //Splash image 설정 모듈 설치 2. 이미지 만들기 splash screen 용은 최소 3000x3000(px) 이어야한다. https://pixlr.com/x/ 사진 에디터 : Pixlr.com - 온라인 무료 사진 편집 툴 Pixlr X를 통해 브라우저에서 고급 사진 편집 툴을 바로 실행할 수 있어요. 별도의 설치 또는 회원가입이 불필요! 컴퓨터, 태블릿, 스마트폰에서 언제 어디서나 무료로 이용하세요. pi.. 더보기 오류 정리 네트워크 현상 FormData를 body에 넣어서 AJAX 요청을 보내면 Network error가 발생 해결 방법 /android/app/src/main/java/com/${project name}/MainApplication.java - line:47 @Override public void onCreate() { super.onCreate(); SoLoader.init(this, /* native exopackage */ false); initializeFlipper(this, getReactNativeHost().getReactInstanceManager()); // 주석 처리 } 안드로이드 스튜디오 현상 Could not read script 'C:\Users\multicampus\Desktop\.. 더보기 Redux http://dobbit.github.io/redux 개념 Vuex와 같은 중앙 집중형 저장소이다. 프로젝트의 규모가 크고 복잡해지면 컴포넌트의 상태(state)를 관리하기가 힘들다. 왜냐하면, 트리 구조이기때문에 멀리 있는 컴포넌트에 값을 전달하려면 상위 루트까지 올라갔다가 가야한다. Redux를 사용하면 중앙 저장소에서 값을 관리하기때문에 아무 컴포넌트에서나 접근할 수 있다. 따라서, 컴포넌트의 상태를 단순하게 처리할 수 있다. 또한, 반복되는 작업을 store에 저장해놓고 처리할 수 있어 코드의 재사용 측면에서도 장점이 있다. 동작 1. Component에서 Dispatch 실행 2. Action에 정의된 형식을 이용하여 reducer 호출 3. reducer에서 state를 변경해서 store의 .. 더보기 React Navigation 사용 이유 react native에서 화면 전환 기능을 사용하기 위해서는 navigation을 이용해야한다. router와 기능이 유사하지만 react native는 router를 사용하지 못하기 때문이다. react native에서 쓰이는 라우터의 종류가 여러가지 있으나, 그 중에서 가장 많이 쓰이는 것은 react navigation이다. react navigation은 공식 문서도 존재할 뿐만 아니라, 많은 사람들이 사용하고 있어 오류를 해결하기 수월하다. 원리 스택에 화면을 쌓아두어, 필요할 때 이 스택안에서 이동할 수 있다. 하지만, 스택 안에서 이동할 경우 이전 페이지를 유지할 수 있지만, 돌아갔을때, 화면을 reloading 하지 못하는 단점이 있다. 설치 yarn add react-navi.. 더보기 React Native 비동기 요청 오류 Network Error axios로 요청을 보내면 Error Network Error 메시지가 뜬다. 이 문제는 다양한 원인으로 인해 발생하게 되는데 여러 방법을 시도해본 결과 내 문제는 react native의 문제였다. 해결방법 1. https 사용 ios는 보안상의 이유로 https를 사용해야 한다. android는 https를 사용하지 않아 http로 써야 한다. 하지만, 기본적으로 http는 사용할 수 없기 때문에 다음과 같은 설정으로 http를 허용해야 한다. ${}>android>app>src>debug>AndroidManifest.xml application 태그 내에 다음과 같이 true로 설정 android:usesCleartextTraffic="true" ※ 내 컴퓨터의 경우 def.. 더보기 개발 환경 Node.js 설치 https://nodejs.org/ko/ LTS 버전으로 설치 (안정적이기 때문) node.js를 설치하면 npm도 함께 설치되고, 환경 변수까지 추가된다. 안드로이드 스튜디오 https://developer.android.com/studio?hl=ko 1. 위 사이트에 접속하여 설치 진행 2. SDK 애뮬레이터를 사용하기 위해서는 필요한 SDK를 설치해야 한다. 위 오른쪽에 카테고리에서 SDK Manager를 클릭 show package details 체크 사용할 android 버전에서 필요한 sdk 설치 sdk tools android sdk build-tools android emulator android sdk platform-tools google play licensing .. 더보기 이전 1 다음
