개발자 밥아저씨

2019년 11월 9일 토요일

react native 기본 예제 따라하기 1-1

1. react native cli에서 expo-cli를 사용하기로 함

react native cli는 자바스크립트 말고도 네이트브 언어를 사용할 수 있다. 근데 어차피 지금 상황에서는 java나 object C를 사용할 계획이 없기 때문에 expo-cli를 사용하기로함

2. expo-cli 설치

npm install expo-cli --global
expo init <project name>
cd project name
expo start

이렇게 생성하고 실행하면 웹페이지가 로딩된다.
여기서 run on Android device/emulator 또는 run on IOS simulator를 클릭하면 된다.
스마트폰을 컴퓨터에 연결하고 각자 os에 맞게 실행

3. 후기

react native cli를 세팅할 때는 안되는 것도 많고 시간이 좀 걸렸는데 expo-cli는 상대적으로 쉽게 환경세팅 및 실행할 수 있었다. 저번에 예제로 연습했던 js파일들을 그대로 가지고 와서 실행했는데 잘 실행됨.

2019년 10월 27일 일요일

구글 블로그에 소스코드 삽입하기

1. http://hilite.me/ 에서 소스코드 입력

2. HTML 복사

3. 구글 블로그에서 글 쓰기

4. 상단에 있는 HTML버튼 클릭

5. HTML 소스 붙여넣기

react native 기본 예제 따라하기 1

0. 안드로이드 스튜디오, 자바 설치

https://developer.android.com/studio/

설치 시 아래 항목을 체크

Android SDK
Android SDK Platform
Performance (Intel ® HAXM)
Android Virtual Device

환경 변수 설정

ANDROID_HOME

C:\Users\User\AppData\Local\Android\sdk

1. react-native-cli 설치

npm install -g react-native-cli

-g는 global이라는 뜻으로 해당 프로젝트에 적용하는 것이 아닌 전역 범위에 적용함

2. 프로젝트 생성

react-native init [프로젝트 명]

3. 프로젝트 실행

cd [프로젝트 명]
react-navtive run-android

오류

폴더 생성
android/app/src/main/assets

명령어 실행
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

또는

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

이때 새로운 창이 로딩된다. 이 창은 프로젝트의 디버그 서버가 되어서 코드 변경 시 새롭게 빌드를 할 필요 없이 자동으로 적용된다.

프로젝트의 구조
. ├── App.js ├── android/ ├── app.json ├── index.js ├── ios/ ├── node_modules/ ├── package.json └── yarn.lock

app.js를 살펴보면 코드와 컴포넌트가 XML문서처럼 결합 되어있는 것을 볼 수 있음
-> JSX라 부름

리액트 프로젝트는 index.js로 시작된다. 이것은 추후에 앱 구조에 따라 수정할 수 있다.

4. app.js 수정

import React, {Component} from 'react';
import {StyleSheet, Button, View} from 'react-native';
import TestComponent from './TestComponent';

const datas = [
  {id:"gdHong",count:0,color:"red"},
  {id:"ksYu",count:0,color:"green"},
  {id:"ssLee",count:0,color:"blue"},
];
type Props = {};
export default class App extends Component<Props> {
  constructor(props){
    super(props);
    this.state={datas:datas};
  }

  _updateCount(idx){
    const newDatas = [...this.state.datas];
    newDatas[idx].count = newDatas[idx].count + 1;
    // newArray[idx].count++;

    this.setState({datas:newDatas});
  }

  render() {
    return (
      <View style={styles.container}>
        {
          this.state.datas.map((data, index) => {
            return(
              <TestComponent
                key={data.id}
                id={data.id}
                color={data.color}
                title={data.count.toString()}
                updateCount={this._updateCount.bind(this, index)}/>
            )
          })
        }
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
  },
});

export default class App extends Component<Props>

리액트를 사용하기 위해서는 Component<Props>를 상속 받아야함

this.state={datas:datas};

위에서 정의한 datas를 state로 사용하기위해 등록함

_updateCount(idx){

    const newDatas = [...this.state.datas];

    newDatas[idx].count = newDatas[idx].count + 1;

    // newArray[idx].count++;

    this.setState({datas:newDatas});

}

datas를 복사한 뒤 count를 +1해줌

this.setState를 사용하여 변경 값을 다시 state로 등록하고 랜더링을 다시 해준다.

이 Component안에서 자바스크립트 객체를 사용하기 위해서는 {}를 사용해야함

render() {
    return (
      <View style={styles.container}>        {
          this.state.datas.map((data, index) => {
            return(
              <TestComponent
                key={data.id}
                id={data.id}
                color={data.color}
                title={data.count.toString()}
                updateCount={this._updateCount.bind(this, index)}/>            )
          })
        }
      </View>    );
  }
}

랜더링을 할 부분

updateCount={this._updateCount.bind(this, index)}/>

현재 _updateCount는 현 클래스의 this.state를 참조하기 떄문에 this를 넣어줌

(만약 this를 사용하지 않는다면 TestComponent에 있는 state를 참조하게 됨)

index는 함수에서 지정한 파라미터

4. TestComponent 추가

import React, { Component } from 'react';
import {
  View,
  Button,
  Text,
} from 'react-native';

export default class TestComponent extends Component{
  constructor(props){
    super(props);
  }

  render(){
    return(
      <View>
        <Text>{this.props.id}의 버튼</Text>
        <Button
          color={this.props.color}
          title={this.props.title}
          onPress={this.props.updateCount}/>
      </View>
    )
  }
}

this.props들이 하위 컴포넌트에서 사용하게 됨

-> 하위 컴포넌트에서 사용할 어트리뷰트들을 지정해둠

(껍데기? 같은 느낌??)

참고 :
https://yuddomack.tistory.com/entry/4React-Native-State%EC%99%80-Props-2%EB%B6%80Props?category=754156

2018년 12월 13일 목요일

c언어 데이터마이닝

https://github.com/kimdonwon/DataMining

c언어 데이터마이닝 정리

1. 링크드 리스트 사용

typedef struct Item {

	char *Name;

	int Hit;
	int distance_fromEntrance;

	struct Item *rlink;
	struct Item *llink;

	struct related_ItemList_Header *related;

	}Item;

	typedef struct Item_Header {

	struct Item *head;
	struct Item *rear;

	}Item_Header;

구조체를 사용해서 리스트 구성함
rlink는 다음 Item의 주소값
llink는 전 Item의 주소값

{
	Item temp = (Item)malloc(sizeof(Item));
	temp->Name = point_B->Name;
	temp->Hit = point_B->Hit;
	temp->distance_fromEntrance = 10;
	temp->related = temp->llink = temp->rlink = NULL;

	I->head = temp;
	I->rear = temp;
	return temp;
	}

이런식으로 첫 번째 데이터를 추가함



	I->rear->rlink = temp;
	temp->llink = I->rear;
	I->rear = temp;

두 번째 데이터를 추가할 땐 rear를 사용함

구조가
Item -> 1a -> 2b -> 3c ->4d ....
이렇게 되어있고
각각의 아이템마다 연관 상품이 저장되어 있다.
1a -> 2b->3c...
2b->1a->4d ...
이렇게 각각의 아이템마다 연관 상품이 저장되어 있음.
-> 주소값을 다루기 때문에 잘못 설계하면 데이터가 꼬이는 일이 있었음 (2번이나 다시 만들었다.)

2. 다익스트라 알고리즘

1. 0 노드부터 다른 노드들의 거리를 담을 리스트를 만듬
2. 리스트에 거리를 저장함
3. 리스트에서 최소 거리를 찾음
4. 최소 거리에 있는 노드에 들어가 0노드부터의 거리를 갱신함
5. 2~4 반복

//다익스트라 알고르즘에 사용될 리스트 생성

Item_distanceList_Header *idh = (Item_distanceList_Header*)malloc(sizeof(Item_distanceList_Header));

idh->all_checked = 0;

idh->head = idh->rear = NULL;

Item *i = I->head;

int count = 0;

while (i != NULL) {

count++;

i = i->rlink;

}

related_ItemList *rl = target_Item->related->head;

Item_distanceList *temp = (Item_distanceList*)malloc(sizeof(Item_distanceList));

temp->name = target_Item->Name;

temp->distance = 0;

temp->found = 1;

temp->possible = 0;

temp->rlink = temp->llink = NULL;

idh->head = idh->rear = temp;

// 다익스트라 알고리즘에 사용될 리스트에 초기 데이터를 넣어줌

while (rl != NULL) {

Item_distanceList *temp = (Item_distanceList*)malloc(sizeof(Item_distanceList));

temp->name = rl->item->Name;

temp->distance = rl->distance;

temp->found = 0;

temp->possible = 0;

temp->rlink = temp->llink = NULL;

idh->rear->rlink = temp;

temp->llink = idh->rear;

idh->rear = temp;

rl = rl->rlink;

}

// 제일 처음 최소 거리를 찾아줌

Item_distanceList *point_rl = idh->head->rlink;

Item_distanceList *temp_rl = idh->head->rlink;

while (point_rl != NULL) {

if (temp_rl->distance > point_rl->distance)temp_rl = point_rl;

point_rl = point_rl->rlink;

}

point_rl = idh->head->rlink;

// 최소 거리에 있는 노드를 기준으로 최소 거리를 찾아줌