Machine_웅_Note

MVVM 패턴? 위에서 언급한 대로, 액티비티에 기능을 붙이다보면 액티비티가 무거워지거나 혹은 종속성이 너무 강해 테스트가 힘들고 유지보수가 어려워진다. 이런 고민 때문에 MVVM 패턴이 등장했다. MVVM은 View - ViewModel - Model을 이용해 각각의 역할을 분리하여 가독성과 재사용성을 높인 디자인 패턴이다. MVC와 MVVM 차이점 기존 MVC(Model - View - Controller) 구조에서는 액티비티가 컨트롤러의 역할을 했으며, 뷰와 연결되어 유저와 상호작용도 하고, 모델과 연결되어 데이터도 처리했다. 즉 뷰와 모델 사이에서 중재자 역할을 했다. MVVM에서는 뷰에서 뷰모델로, 뷰모델에서 모델로 작업을 처리하며, 뷰에서 모델을 직접 참조하지 않는다. 대신 뷰에서 뷰모델을 관..

1-1. 리덕스 소개 리덕스는, 가장 사용률이 높은 상태관리 라이브러리입니다. 리덕스를 사용하면, 여러분이 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있습니다. 또한, 컴포넌트끼리 상태를 공유하게 될 때 여러 컴포넌트를 거치지 않고도 손쉽게 상태 값을 전달 할 수 있습니다. 추가적으로, 리덕스의 미들웨어라는 기능을 통하여 비동기 작업, 로깅 등의 확장적인 작업들을 더욱 쉽게 할 수도 있게 해줍니다. 이 미들웨어에 대해서는 나중에 다뤄보게 됩니다! 필요성 파악하기 리덕스는 글로벌 상태 관리를 하게 될 때 굉장히 효과적입니다. 물론, 리덕스를 사용하는것이 유일한 솔루션은 아닙니다. Context API 를 통해서도 동일한 작업을 할 수 있다는것을 미리 알..

탭 네비게이션의 경우 헤더가 생기지 않는다. 그렇기 때문에 스텍 네비게이터로 감싼것을 탭 네비게이션의 스크린에 추가를 해준다. const Test_1 =createStackNavigator( { NotiMain: { screen: NotiMain }, WriteBoard:{ screen: WriteBoard } } ) const Test_2 = createStackNavigator( { SuggestionsBoard: { screen: SuggestionsBoard }, WriteBoard:{ screen: WriteBoard } } ) const Test_3 = createStackNavigator( { QnABoard: { screen: QnABoard }, WriteBoard:{ screen: Wr..

// 옆에 사이드에서 보여지는것 ( 드로어 네비게이터 메뉴 ) const Main_Draw_View = createDrawerNavigator( { Main_View, Intro_Main : { screen : Intro_Main }, CalenderMain:{ screen :CalenderMain }, BoardMain :{ screen: BoardMain } },{ drawerWidth: Dimensions.get("window").width * 0.5, contentComponent : SideMenu, contentOptions:{ // activeBackgroundColor:'#32C5E6' activeTintColor : '#32C5E6' } } ) contentComponent : 커스텀 할..

const Main_Stack = createStackNavigator( { Home:{ screen:Home } } ) const Main_Drawer = createDrawerNavigator( { Main_Stack , Board1 : { screen : Board1 }, Board2 : { screen : Board2 } } )

static navigationOptions = ({navigation}) => { // // 헤더의 오른쪽에 버튼 만들기 // headerRight: () => ( // // ), return{ // 헤더의 왼쪽에 버튼 만들기 headerLeft: () => ( navigation.openDrawer()} title="Draw" color='red' /> ), // // 헤더의 텍스트를 가운데로 정렬 headerTitleAlign: 'center', } };

static navigationOptions = { // 헤더의 오른쪽에 버튼 만들기 headerRight: () => ( alert('This is a button!')} title="Info" color="#fff" /> ), // 헤더의 왼쪽에 버튼 만들기 headerLeft: () => ( alert('This is a button!')} title="Info" color="#fff" /> ), // 헤더의 텍스트를 가운데로 정렬 headerTitleAlign: 'center', }; 또는 해더 자체에 컴포넌트를 넣을 수 있다 , static navigationOptions = { headerTitle: () => , }; class Title extends Component { render(){..

Comp import React,{Component} from 'react'; import { View, Text, StyleSheet, TouchableHighlight } from 'react-native'; import searchApi from './searchApi'; class SearchId extends Component { static navigationOptions = { title : '아이디 찾기' } state = { isclick : false, result : "없음", test : new searchApi() } async testt (){ let result2 = await this.test.request_Server() console.log("값11 "+ result2) ..

https://github.com/react-native-community/async-storage 저장 storeData = async () => { try { await AsyncStorage.setItem('@storage_Key', 'stored value') } catch (e) { // saving error } } 불러오기 getData = async () => { try { const value = await AsyncStorage.getItem('@storage_Key') if(value !== null) { // value previously stored } } catch(e) { // error reading value } } 지우기 removeValue = async () => { ..

Rn // 서버와의 통신 // mode == 1 아이디 체크 mode == 2 닉네임체크 fetchData = async(mode,data) =>{ console.log("fetch 시도 ") fetch("http://192.168.0.224:80/eo1Project/Account/checkExistData.php",{ method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', }, body: JSON.stringify({ userData: data, mode:mode }) }) .then((response)=> response.json()) .then((responseJson) => { conso..