콘요맘떼 개발일지

React Native에서 USB 연결을 통해 안드로이드 실제 기기에 어플리케이션을 실행하는 과정에서 기기가 분명 연결되었고 포트 등도 제대로 지정되었음에도 불구하고 (ex. "adb reverse tcp:8081 tcp:8081") 노드와 제대로 연결되지 못하는 경우가 있다. 문제가 반복되자 컴퓨터에서 열려있는 포트들을 확인해봤는데 Samsung의 Dex가 8081번 포트를 공유하고 있어서 충돌이 일으키는 것이었다. (어차피 자주 쓰지도 않던 Dex를 이번 기회에 제거하자마자 연결 문제가 거짓말같이 사라졌다.) 만약 포트 설정을 모두 확인한 후에도 문제가 지속된다면 8081번 포트를 여러 프로그램이 공유하고 있지 않는지 확인해보는 것도 좋은 방법일 것 같다. (혹은 포트 번호를 바꿔서 developme..

예상한 것과는 다르게 안드로이드에서는 z-index만 지정하면 원하는대로 결과물이 획득되지 않는다. 안드로이드에도 원하는 방향으로 z-index를 수정하고 싶으면 elevation을 함께 바꿔주면 된다. elevation의 값은 z-index와 동일하게 적용해주면 된다.

React Native에서 Image의 aspect ratio를 활용하고 싶다면 위와 같이 height를 undefined로 지정해주면 된다. 그렇지 않는다면 지정한 aspect ratio가 적용되지 않는다.

React Navigation v6 기준 Drawer Navigation의 헤더가 있는 것이 디자인적으로 너무 마음에 안 들어서 헤더 자체를 삭제 후 Drawer Icon만 따로 만들어주기로 했다. 우선 Drawer Icon을 만들어준다. 본 예시에서는 react-native-vector-icons의 bars 아이콘(햄버거 icon 모양)을 활용했다. useNavigation 훅을 사용하면 props로 전달받지 않아도 navigation을 사용할 수 있다. Drawer Icon은 항상 화면의 우측 상단에 고정된 위치에 존재해야 하므로 position : absolute를 활용하였다. 이어서 각 스크린의 내용을 감싸줄 DrawerScreenContainer을 만들어준다. DrawerIcon을 가장 하단에 ..

Drawer Navigation을 사용할 때 Reanimated 관련 설정을 하지 않았을 때 발생하는 에러이다. 해결 방법은 다음과 같다. 1. 패키지 설치 yarn add react-native-reanimated 혹은 npm install eact-native-reanimated 2. Babel 플러그인 설정 이미지와 같이 babel.config.js 파일의 plugins 부분에 react-native-reanimated 플러그인을 추가해준다. 3. 안드로이드 (1) android/app/build.gradle 수정 사진과 같이 enableHermes 값을 true로 변경해준다. (2) android/app/src/main/java/.../MainApplication.java 수정 다음과 같이 수정해..

React Native에서는 스타일링을 위해 Dimensions(from react-native)를 자주 활용한다. Dimensions.get( )함수의 파라미터는 두 종류가 있다. 1) window 2) screen → 아이폰에서는 차이가 존재하지 않는다. 그러나 안드로이드에서는 상태바 포함여부에 따라 둘의 차이가 드러난다. Dimensions.get('window')는 상태바를 제외한 영역을 추출하고 Dimensions.get('screen')은 상태바를 포함한 모든 화면의 영역을 추출한다.

1. Android (1) android/app/src/main/res/raw 폴더로 이동한다. (없으면 만들어준다.) (2) 해당 폴더에 설정하려는 음원 파일을 넣는다. (3) android/app/src/main/java/..../MainActivity.java를 다음과 같이 수정한다. - "{}"에 자신이 해당하는 내용을 적으면 된다. - 참고로 importance의 종류는 네 개가 존재한다. (1) NotificationManager.IMPORTANCE_HIGH : 알림음 발생하며 헤드업 알림 제공 (2) NotificationManager.IMPORTANCE_DEFAULT : 알림음 발생 (3) NotificationManager.IMPORTANCE_LOW : 알림음 발생하지 않음 (4) Not..

1. 자바 설치 [1] 윈도우즈 (Windows) (1) https://java.oracle.com/ 에 접속하여 JAVA SE 8u311을 다운로드 후 설치한다. (2021-10-28 기준) ※ JDK와 JRE - JDK : 자바 언어로 프로그램을 제작할 때 필요 - JRE : 자바로 제작된 프로그램을 실행하는 데 필요 (JDK 설치시 자동으로 따라옴) (2) 환경변수를 설정한다. - 설치한 JDK의 경로를 복사한다. (경로를 별도로 지정하지 않은 경우 C:\Program Files\Java 안에서 확인할 수 있다.) - 시스템 환경변수로 들어가서 JAVA_HOME 변수를 추가해준다. (값 : 복사한 JDK의 경로, ex. C:\Program Files\Java\jdk--) - CLASS_PATH 변수..