끄적이는 개발노트

앱 개발의 UI 요소 중 자주 이용되는 것으로 Toast Message가 있다. 어플에서 어떤 버튼을 클릭하거나 기능을 실행하면 완료 메세지가 화면 상단이나 하단에 뜨는 것을 본 적이 있을 것이다. 이 Toast Message는 사용자의 반응에 즉각적으로 피드백하여 사용자경험을 향상시켜주는 효과가 있다. https://www.npmjs.com/package/react-native-toast-message react-native-toast-messageToast message component for React Native. Latest version: 2.2.1, last published: 5 months ago. Start using react-native-toast-message in your pr..

state를 사용할 때, 간단한 modal 혹은 하위 컴포넌트를 구성한다면 props가 오히려 깔끔하고 간단한 코드가 된다. 하지만 다양한 기능 혹은 컴포넌트들을 구현하다보면 넘겨주고자하는 state가 하위 컴포넌트에 단지 값을 전달하기 위해 중간 컴포넌트에 props로 넘겨주는 경우를 마주치기도 했었다. 이게 너무 지저분해보였고, 에러발생 혹은 유지보수를 하기 위해 며칠이 지난 뒤 코드를 살펴보면 내가 짠 코드임에도 props를 추적하기가 어지러운 경우도 발생했었다.이런 경험을 몇번 한 뒤로, 본인은 개발을 할 때 주로 state(상태)를 나누어 관리하는 것을 선호하고, prop drilling을 피하려고 노력하는 편이다.아직 많이 부족한 개발자다보니 아래 방식이 최선의 방식인지는 늘 고민하고 있으며,..

개발을 하면서 사용한 터미널 명령어를 정리해둔다. 1. 실행npx react-native run-android#ornpx react-native run-ios 2. 캐시 초기화 옵션 사용npx react-native start --reset-cache 정리를 하다가 run-android 와 start 의 차이가 궁금하여 검색해보니start : 어플 실행 시 필요한 metro bundler를 시작run-android : start 실행 후, debug apk 빌드하여 설치link가 필요하지 않은 새 라이브러리를 추가할 경우 start로 어플을 다시 로드하면 되지만, link가 필요한 새 라이브러리가 추가되는 경우, run-android를 통해 다시 컴파일 해야 한다고 한다. 3. release 모드 실행 ..

어플을 출시하기 위해서는 release key를 생성하는 방법을 알아야 한다. Keystore- Android 앱을 배포하기 위한 서명 파일이다.Keytool- Java Development Kit (JDK)에 포함된 keystore를 생성하고 관리하는 도구이다.  1. 생성keytool -genkey -v -keystore -alias -keyalg RSA -keysize 2048 -validity 10000 : 키스토어 이름 : 키 약어-keyalg RSA -keysize 2048 : RSA 알고리즘을 2048 사이즈로 지정하여 키 쌍을 생성-validity : 키의 유효기간을 일 단위로 지정 2. 설정이 때, 설정한 비밀번호는 기억해둬야 한다.  3. gradle.properties 설정pro..

어플에서 로그인 기능을 구현했다면 추가적으로 필요한 기능은 로그인 상태를 확인하는 기능이 필요하다. 일반적으로 AsyncStorage에 인증 정보를 저장하는 방법을 사용하는데,  Firebase로 인증을 구현했다면 Firebase에서 인증은 자동으로 인증상태를 유지해주기 때문에 onAuthStateChanged를 통해 굉장히 쉽게 구현할 수 있다. onAuthStateChanged는 event listener와 같이 event를 감지하기 위해 계속 대기하고 있고, 유저 상태에 변화가 생기면 그 변화를 감지하고 해당 로직을 수행한다. 1. 코드// App.tsximport './global.css';import {SafeAreaProvider} from 'react-native-safe-area-conte..

개발을 하다보면 외부에 공개되면 안되는 키나 중요 정보들처럼 보안이 필요한 값들이 있다. 이런 값들을 숨기고 유지보수를 쉽게 하기 위해 .env 파일에 환경변수로 만들어 사용하게 된다.react native에서는 이를 위해 react-native-dotenv 라이브러리 활용이 필요하다.https://www.npmjs.com/package/react-native-dotenv react-native-dotenvLoad environment variables using import statements.. Latest version: 3.4.11, last published: a year ago. Start using react-native-dotenv in your project by running `npm ..