[Firebase] 파이어베이스로 React 프로젝트 3분만에 호스팅하기 (무료로 URL, 웹사이트 구축하기)
2023. 6. 8. 01:12
Basic/etc
파이어베이스에서 제공하는 많은 기능들이 있지만, 모두 번외로 하고 자신이 만든 프로젝트를 실서버(URL)에 등록(호스팅)만 하는 방법에 대해 알아보자. https://firebase.google.com/?hl=ko Firebase Firebase is an app development platform that helps you build and grow apps and games users love. Backed by Google and trusted by millions of businesses around the world. firebase.google.com 파이어베이스에 접속(상단 링크 참고)하여 "시작하기" 또는 "콘솔로 이동" 버튼을 클릭하여 다음 스텝으로 진행한다. "프로젝트 추가" 영역을 ..
[React Native] react-native-bottom-sheet, AndroidManifest.xml 내 android:windowSoftInputMode 설정 충돌 방지하기
2023. 6. 7. 20:39
Front-end/App
https://github.com/gorhom/react-native-bottom-sheet gorhom/react-native-bottom-sheet는 React Native로 bottom sheet를 구현할 때 필요한 거의 대체 할 수 없는 필수 라이브러리이다. GitHub - gorhom/react-native-bottom-sheet: A performant interactive bottom sheet with fully configurable options 🚀 A performant interactive bottom sheet with fully configurable options 🚀 - GitHub - gorhom/react-native-bottom-sheet: A performant inte..
[JavaScript] BigNumber.js를 활용하여 정확한 계산, 큰 수 및 작은 수 다루기
2023. 5. 8. 12:13
Basic/JavaScript
JavaScript에서 숫자는 내장 데이터 유형으로 Number를 사용한다. 그러나 Number는 64비트 부동 소수점 수로 구현되어 있으며, 이는 매우 큰 또는 매우 작은 숫자를 처리하는 데 제한이 있다. 매우 큰 또는 매우 작은 숫자를 '정확'하게 다룰 필요가 있는 경우, BigNumber와 같은 라이브러리를 사용하는 것이 좋다. 어떤 이유로 제한이 있을까? JavaScript에서 숫자는 64비트 부동 소수점 수로 구현되어 있다. 이는 64비트로 이루어진 이진수로 부호 비트, 지수 비트, 가수 비트로 구성되어 있다. 이진수로 숫자를 표현하므로, 숫자는 2진수로 저장되고, 이진수 연산으로 처리된다. 이진수는 0과 1로만 이루어져 있으므로, 숫자를 표현하는 데 있어서 제한이 있다. 가수 비트에 저장할 수..
[JavaScript] 객체 변환하기
2023. 5. 3. 14:57
Basic/JavaScript
obj라는 객체가 있다고 가정하자. const obj = { a: 1, b: 2, c: 3 }; 위의 객체의 key값을 소문자에서 대문자, value값을 2배로 변환하여 새로운 객체로 변환하는 방법을 알아보자. 1. 라이브러리없이 구현 function mapObject(obj, fn) { const newObj = {}; for (const [key, value] of Object.entries(obj)) { const [newKey, newValue] = fn(key, value); newObj[newKey] = newValue; } return newObj; } const obj = { a: 1, b: 2, c: 3 }; const newObj = mapObject(obj, (key, value) =..
[React Native] Native Module 연동(구현)하기 (1) - Android
2023. 3. 14. 00:04
Front-end/App
Native Module은 Native 코드를 javascript 코드로 연동하는 작업이다. 해당 작업을 하는 이유는 반드시 사용해야 할 SDK 및 라이브러리가 네이티브인 경우가 대다수이다. 다른 이유는 성능 때문일 수도 있겠다. 성능에 관해 무거운 작업일 경우 네이티브로 작업을 하는 경우 아무대로 번들링 되는 과정이 없다 보니 그럴 수도 있겠는데.. (이 경우로 직접 모듈화를 해보지는 않아 개인적인 지표는 없어, 혹시 경험하신 분 있으시면 공유주시면 감사하겠습니다. ㅎㅎ) 간단하게 모듈화하는 과정을 Android부터 해보자. // android/app/src/main/java/com // ModuleTest.java package com.reactnativenativemodulesample; // 앱..
[React Native] 빌드 속도 향상시키기 (캐쉬화)
2023. 3. 12. 15:59
Front-end/App
리액트 네이티브의 고질적 문제점 하나인 답답한 빌드 속도는 한 번이라도 RN 셋업을 경험해봤다면 공감할 것이다. 게다가 외부 라이브러리의 설치의 의존도가 높아지면 그 정도는 심해진다. 원인은 javascript 코드와 native 코드 간의 번들링 과정이 가장 큰 요인이다. 그리고 앱을 끄고 재실행하게 되면 처음부터 다시 모든 파일을 번들링한다. 이는 캐쉬화가 되지 않았기 때문인데, 캐쉬화를 시키게 된다면 캐싱된 소스들은 번들링을 할 필요가 없기 때문에 극단적으로 번들링을 해야 할 소스코드가 줄어든다. 결과적으로 빌드 속도를 향상시켜준다. 캐쉬화 세팅을 통해 생산성을 높여보자! 안드로이드(AOS) (1) Gradle 설정 변경 Android 앱을 빌드할 때 Gradle은 종속성을 다운로드하고 캐시에 저장..
[React Native] 응용 프로그램이 예기치 않게 종료되었습니다. (Library not loaded: @rpath/hermes.framework/hermes)
2022. 11. 13. 12:22
Front-end/App
내 개인 맥북(19년 intel pro)으로 RN을 돌렸던 프로젝트 버전이 0.67이었고, 최근에 프로젝트가 생겨 0.70에 맞게 공식문서와 내 환경설정에 비교한 뒤 구동을 해보았다. 위 사진과 같이 되는 듯 싶었으나... 이런 식으로 네이티브 단에서 크러쉬 리포트를 뿜어내며 앱이 튕긴다. Termination Reason를 보면 어떤 사유로 일어났는지 잘 보여준다. 나같은 경우는 hermes 관련 에러가 일어났는데, Podfile을 보면... 관련 설정이 되어있고, 주석으로 설명되어있다. true를 false로 바꿔주고 다시 pod install 후 빌드하면 잘 된다! 추가로 크러쉬 리포트는 네이티브단 설정이 충돌이 나면서 발생하므로, 네이티브 설정을 중점적으로 확인하자. Xcode을 변경하였을 경우에..
[React Native] TextInput 패스워드 폼 적용하기
2022. 11. 7. 20:48
Front-end/App
웹에는 input type="password" 으로 타입에 있는 목록에 찾으면 됩니다. 그러나 RN은 type을 제공하지 않아 당황하여 찾고 있지만 공식문서 읽는 것이 힘들거나 구글링을 하고 있는 코더들과 맨날 까먹는 스스로를 위해 기록합니다. secureTextEntry를 집어넣으면 됩니다.. boolean값이라 그냥 넣으면 true로 적용이 됩니다. https://reactnative.dev/docs/textinput#securetextentry TextInput · React Native A foundational component for inputting text into the app via a keyboard. Props provide configurability for several feat..
react-native-config로 .env 환경변수 설정하기
2022. 10. 26. 19:50
Front-end/App
환경변수를 관리하기 위해 .env를 적용할 수 있게 하는 라이브러리입니다. React와는 다르게 .env를 생성하고 네이티브단과 연동하는 작업이 필요합니다. 그 연동하는 것을 도와주는 라이브러리라고 생각하면 됩니다. 라이브러리 설치 yarn add react-native-config npx pod-install ios iOS // AppDelegate.mm 에서 해당 구문 추가 #import Android // setting.gradle 에서 해당 구문 추가 include ':react-native-config' project(':react-native-config').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-..