최데브는 오늘도 프로그래밍을 한다.

안드로이드에서는 intent 를 이용해서 쉽게 화면간 이동을 할 수 있었다. React-native 에서는 아쉽게도 intent 는 없는데 이를 쉽게 할 수 있게 만들어준 라이브러리가 있다. 바로 Navigator 라는 것인데 나는 많은 Navigator중에서도stackNavigator를 사용해봤다. 안드로이드의 intent도 Activity 가 stack 형식으로 쌓이는데 이 동작과 매우 유사해서 사용해봤다. 사실 정확한 사용방법이 아닐수도 있다. 정답이 아닌 기록을 위해 적는것이니 참고만 하면 좋을 것 같다. 먼저 App.js 에서 const Stack = createStackNavigator(); function App() { return ( ); } 이렇게 Stack 으로 사용될 요소들을 미리 적..

먼저 프로젝트에 firebase 관련 파일을 설치해야한다. npm 으로 설치하면 되는데 검색하면 금방 나온다. firebase 관련 설정코드를 먼저 작성해줘야한다. const firebaseConfig = { apiKey: '', authDomain: '', databaseURL: '', projectId: '', storageBucket: '', messagingSenderId: '', appId: '' }; 내용이 다 비워져 있는데 넣어야하는 값들은 파이어베이스 콘솔에서 이미지 처럼 프로젝트 설정을 누르면 모두 적혀있다. 관련 값을 위 코드에 다 넣어주면 된다. 설정을 마쳤다면 이제 코드가 어떤 firebase 를 참조해야할지 알게된 상태가 된다. 설정을 해줬으니 그 설정에 맞는 firebase 객체..

이번 글은 Virtual DOM 에 대해서 기록해보려고 한다. React 나 Vue.js 에서도 쓰이고 있는 Virtual DOM 이라는 단어자체는 많이 들어봤는데 어렴풋이 기억에만 있는 개념을 정리해보고자 한다. 먼저 이것을 알기에 앞서 DOM 이 뭔지부터 되짚어 볼 필요가 있다. 구글에 DOM 을 검색 했을때 가장 먼저 나오는게 뭔지 보자. "DOM 은 동일한 문서를 표현하고, 저장하고, 조작하는 방법을 제공한다. DOM 은 웹 페이지의 객체 지향 표현이며, 자바스크립트와 같은 스크립팅 언어를 이용해 DOM 을 수정할 수 있다" 출처 : developer.mozilla.org/ko/docs/Web/API/Document_Object_Model/%EC%86%8C%EA%B0%9C DOM 소개 - Web ..

루트 폴더에 CustomButton.js 을 만들어준다. 기본적으로는 TouchableOpacity 를 뼈대로 만든다. 그냥 리액트의 button 은 아이폰과 안드로이드에서 보이는게 다를때가 많아서 TouchableOpacity 로 만들면 통일감 있게 커스텀 버튼을 만들 수 있다고 한다. 버튼마다 크기나 색 , 타이틀이 달라야하니 Props 로 각 버튼의 스타일 정의를 넘겨받는다. // CustomButton.js import React, { Component } from 'react'; import { TouchableOpacity, Text, StyleSheet, } from 'react-native'; export default class CustomButton extends Component{ s..