React Native 에서 사용할 차트관련 라이브러리를 검색해보던중 react-native-svg-charts 라이브러리를 발견하였다. 



react-native-svg-charts 는 react-native-svg 라이브러리를 사용한다.

react-native-svg 먼저 설치해야된다. 


react-native-svg 설치링크


react-native-svg-charts 테스트하느라 삽질을 워낙많이해서 설치과정을 스샷으로 찍어서 하나하나 설명할까 한다.ㅠㅠ



1) react-native init --version="0.56.0" ProjectName 명령어를 통해 프로젝트를 생성한다. 



2) npm i react-native-svg-charts   설치한다.




3) react-native-svg-charts 라이브러리는 react-native-svg를 사용하므로 해당 라이브러리를 설치하고 링킹한다. 



npm i react-native-svg@6.2.1   6.2.1버전을 설치하고 아래명령어로 linking 한다.


react-native link react-native-svg  


npm  i d3-shape  종속성 설치한다. 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
import React from 'react'
import { LineChart, YAxis, Grid } from 'react-native-svg-charts'
import { View } from 'react-native'
 
class YAxisExample extends React.PureComponent {
 
    render() {
 
        const data = [ 50104095-4-2485913553-532450-20-80 ]
 
        const contentInset = { top: 20, bottom: 20 }
 
        return (
            <View style={{ height200, flexDirection: 'row' }}>
                <YAxis
                    data={ data }
                    contentInset={ contentInset }
                    svg={{
                        fill: 'grey',
                        fontSize: 10,
                    }}
                    numberOfTicks=10 }
                    formatLabel={ value => `${value}ºC` }
                />
                <LineChart
                    style={{ flex: 1, marginLeft: 16 }}
                    data={ data }
                    svg={{ stroke: 'rgb(134, 65, 244)' }}
                    contentInset={ contentInset }
                >
                    <Grid/>
                </LineChart>
            </View>
        )
    }
 
}
export default YAxisExample;
cs

[YAxisExample.js]



1
2
import YAxisExample from "./YAxisExample";
export default YAxis;
cs

[[App.js]dfdfdfd


참고 : https://github.com/JesperLekland/react-native-svg-charts

https://www.npmjs.com/package/react-native-svg-charts



블로그 이미지

클라인STR

,

11월 초에 감기가 걸려서 운동을 10일동안 가지 못했다 .


그리고나서 오랜만에 등산을 했는데, 내려오면서 오른쪽 무릎에 약간 이상한 느낌을 받았다. 첨에는 근육이 다친줄 알았는데, 가끔 계단을 딛고 내려오는 느낌?이 이상해서 다음날 정형외과를 방문했다. 

엑스레이상 이상이 없는데, 의사선생은 연골파손이나 찢어짐을 예상하시고는 MRI 검사를 추천해주셨다. 일전에도 MRI검사를 하고 청구한 적이있었지만, 병원에서 안내에 따라서 보험회사에 연락후 통원, 입원시 한도를 확인한후 MRI 촬영을 할것을 권유하였다. 현재 내가 가입한 실비보험 상품은 2009년 6월 이전 상품으로 통원한도는 50만원 까지 가능하였다. 무릎 MRI 촬영은 처음이었는데, 1시간정도 시간이 걸렸으며, 촬영 중간에 혈관에 주사를 맞고 촬영하였다. 

진단 결과 반달연골 찢어짐 판정을 받았고, 의사선생님은 수술을 권유하였지만 , 바로 결정하기는 좀 힘들었다. 집에오는내내 기분이 좋지 않았다. 수술을 바로 결정하지는 못했지만 수술할경우 비용이랑 치료기간에 대해서 안내를 받고 집으로 왔다. 정형외과 진료시 여러곳을 가보는게 좋겠다는 주변사람들의 권유로 무릎 및 척구 관절 전문 병원인 2군대 병원을 들러 보기로했다. 

H병원 경우 의사선생님이 수술을 권하지 않았으며, 2주간 휴식을 취하고 진통소염제만 처방해줬다. M병원인 경우에 도 마찬가지로 수술할정도는 아니며 무릎관절 운동을 통해서 근육을 강화할것을 추천하였다. 

수술을 하지 않아도 된다는 것에 대해서 다행으로 생각했지만, 첫번째 병원에 진단내역은 좀 어이가 없었다고 생각된다. 의사마다 의견은 다를수도 있으니까. 




H보험사 실비보험 청구하였는데, 보험사에서 전화가 와서는 이전에 MRI 촬영비가 급여로 보험공단에서 해택을 받을수 있다고해서 , MRI촬영한 병원으로 가서 결제 취소후 제결제를 하였다. 이것은 개이득 !!!

MRI 진단료중 157,320원 본인 부담금으로 나왔고, 235,979운이 공단부담금으로 나왔다.  MRI 촬영시 십자인대파열, 반월상연골파열이 확실한 경우 급여소견이된다고 한다. 정형외과 진단시 반드시 2~3군대에 병원에 들러서 진단을 더 받도록 하는것이 좋으며, MRI촬영직후 시디룸을 신청해서 보관하는 것이 좋다. (타병원 진료시 필요함)


실비보험신청시 필요한 서류는 진료비영수증 계산서, 진료비 세부내역서, 초진기록지, 진단서 및 소견서(진단서발부시 비용발생함)

진단서 비용은 2만원, 초진기록지 비용은 만원이 발생하였다. 병원마다 차이점은 있는거같음. 

블로그 이미지

클라인STR

,

PropTypes 참조가 누락되었거나 잘못된경우 해당에러가 발생한다. 


import PropTypes from 'prop-types'


블로그 이미지

클라인STR

,

React Native 에서 D3.js를 사용하기 위해 찾아보던중 react-native-svg 라는걸 알게되었다. 

react-native-svg 는 React Native에서 Svg를 사용할 수 있는 라이브러리이다. 


npm i react-native-svg

프로젝트 폴더에 react-native-svg를 설치한다. 


react-native link react-native-svg

프로젝트에 해당라이브러리를 link 해준다. 



Manual Linking IOS (수동으로 설정할경우 절차, 위에 절차를 거쳤을경우는 따로 해줄필요 없음)


Xcode에서 해당프로젝트를 Open 한다.


Libraries 에서 마우스 오른쪽버튼을 눌르고 Add Files to 프로젝트명 선택한다.


프로젝트명/node_modules/react-native-svg/ios 에서 RNSVG.xcodeproj file 을 선택하여 Add 버튼을 선택한다. 


프로젝트 선택후 Build Phases 탭을선택한후 Link Binary with Libraries 항목에서 + 선택하여  libRNSVG.a 선택한다. 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
import Svg,{
    Circle,
    Ellipse,
    G,
    Text,
    TSpan,
    TextPath,
    Path,
    Polygon,
    Polyline,
    Line,
    Rect,
    Use,
    Image,
    Symbol,
    Defs,
    LinearGradient,
    RadialGradient,
    Stop,
    ClipPath,
    Pattern,
    Mask,
} from 'react-native-svg';
import React, { Component } from 'react';
import { View, StyleSheet, Dimensions } from 'react-native';
// Percentages work in plain react-native but aren't supported in Expo yet, workaround with this or onLayout
const { widthheight } = Dimensions.get('window');
 
class SvgExample extends Component {
 
    render () {
      return (
        <Svg style={{flex: 1, alignSelf: 'stretch'}} viewBox='0 0 1000 1000'>
        <Rect
          x='50'
          y='50'
          width='900'
          height='900' />
      </Svg>
      )
    }
 
  }
 
  export default SvgExample;
cs


[Sample 예제]


출처 : https://github.com/react-native-community/react-native-svg


블로그 이미지

클라인STR

,

앞에서 연습한 소스를 NavBar, Body를 컴포넌트로 나눌 수 있다.


style.js 파일을 생성하여 css별로 파일로 생성한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
import React from "react";
import { StyleSheet } from "react-native";
 
 
const styles = StyleSheet.create({
    container : {
     flex : 1 ,
     flexDirection: 'column'
    },
    body : {
     flex : 1,
     flexDirection : 'row'
    },
    left : {
        flex : 1,
        backgroundColor : 'red'       
    },
    right : {
        flex : 2 ,
        flexDirection : 'column'
        
    },
    rightTop : {
         flex : 1,
         backgroundColor : 'blue'
    },
    rightBottom : {
         flex : 1 , 
         backgroundColor : 'yellow'
    },navBar : {
         //flex : 1,       
         height : 60,
         justifyContent : 'center',
         alignItems : 'center',
         backgroundColor : 'gray'
    }
 });
 
export default styles;
cs

[style.js]



NavBar 영역부분만 render링 영역으로 잡는다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import React, { Component } from 'react';
import {StyleSheet,Text, View} from 'react-native';
import styles from "./style";
 
class NavBar extends Component {
    render() {
      return (
        <View style={styles.navBar}>
            <Text>
                NavBar
            </Text>
        </View>
      )
    };
}
 
export default NavBar;
cs

[NavBar.js]


Body 영역 render  영역으로 잡는다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
import React, { Component } from 'react';
import {StyleSheet,Text, View} from 'react-native';
import styles from "./style";
 
class Body extends Component {
    render() {
      return (
        <View style={styles.body}>
            <View style={styles.left}>
            </View>
            <View style={styles.right}>
                <View style={styles.rightTop}>
                </View>
                <View style={styles.rightBottom}>
                </View>
            </View>
        </View>
      )
    };
}
 
export default Body;
cs

[Body.js]




Body, NavBar import를 추가하여 컴포넌트 형태로 호출한다.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import React, { Component } from 'react';
import {StyleSheet,Text, View} from 'react-native';
import styles from "./style";
import Body from "./Body";
import NavBar from "./NavBar";
 
class FlexBox1 extends Component {
 
    render() {
        return (            
           <View style={styles.container}>
                <NavBar />
                <Body />
           </View>           
        );
    }
 
}
 
export default FlexBox1;
cs

[FlexBox1.js]


참초 : 한빛미디어 리엑트 네이티브 듀토리얼 



블로그 이미지

클라인STR

,


NavBar 헤더를추가해보자.

기존의 Container영역을 기준으로 헤더영역과 바디 영역으로 나눌 수 있다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
import React, { Component } from 'react';
import {StyleSheet,Text, View} from 'react-native';
class FlexBox1 extends Component {
    render() {
        return (            
           
            <View style={styles.container}>
                <View style={styles.navBar}>
                </View>
                <View style={styles.body}>
                    <View style={styles.left}>
                    </View>
                    <View style={styles.right}>
                        <View style={styles.rightTop}>
                        </View>
                        <View style={styles.rightBottom}>
                        </View>
                    </View>
                </View>               
            </View>
        );
    }
}
const styles = StyleSheet.create({
   container : {
    flex : 1 ,
    flexDirection: 'column'
   },
   body : {
    flex : 1,
    flexDirection : 'row'
   },
   left : {
       flex : 1,
       backgroundColor : 'red'       
   },
   right : {
       flex : 1 ,
       flexDirection : 'column'
       
   },
   rightTop : {
        flex : 1,
        backgroundColor : 'blue'
   },
   rightBottom : {
        flex : 1 , 
        backgroundColor : 'yellow'
   },navBar : {
        flex : 1,       
    //    height : 60,
       backgroundColor : 'gray'
   }
});
export default FlexBox1;
cs


여기서 주요하게 봐야될것들은 container, body ,right에 flexDirecton 설정이다.  Container 기준으로 NavBar ,body는 column 기준으로 정렬되어야 된다.

body를 기준으로 왼쪽 (red), 오른쪽 (blue, yellow) row방향으로 정렬되어있다.

right기준으로 blue, yellow column 방향으로 정렬되어야 된다.


    navBar : {

               
       height : 60,
       backgroundColor : 'gray'
   }


navBar flex 속성을 삭제하고 , height 값을 60으로 준다. 


Text속성을 입력하면 navBar 글자가 왼쪽정렬이 된다. align-items는 부모 컨테이너를 기준으로 항목의 가로 정렬을 제어한다. align-items center 정렬로 한다.

세로정렬을 하기위해서 , justify-content 속성을 center 준다.

left 빨간영역이 줄어들어야되므로 right flex 값을 2로 조정한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
import React, { Component } from 'react';
import {StyleSheet,Text, View} from 'react-native';
 
 
class FlexBox1 extends Component {
 
    render() {
        return (            
           
            <View style={styles.container}>
                <View style={styles.navBar}>
                    <Text>
                        NavBar
                    </Text>
                </View>
            <View style={styles.body}>
                <View style={styles.left}>
                </View>
                <View style={styles.right}>
                    <View style={styles.rightTop}>
                    </View>
                    <View style={styles.rightBottom}>
                    </View>
                </View>
            </View>
               
            </View>
        );
    }
 
}
 
 
const styles = StyleSheet.create({
   container : {
    flex : 1 ,
    flexDirection: 'column'
   },
   body : {
    flex : 1,
    flexDirection : 'row'
   },
   left : {
       flex : 1,
       backgroundColor : 'red'       
   },
   right : {
       flex : 2 ,
       flexDirection : 'column'
       
   },
   rightTop : {
        flex : 1,
        backgroundColor : 'blue'
   },
   rightBottom : {
        flex : 1 , 
        backgroundColor : 'yellow'
   },navBar : {
        //flex : 1,       
        height : 60,
        justifyContent : 'center',
        alignItems : 'center',
        backgroundColor : 'gray'
   }
});
 
export default FlexBox1;
cs


참초 : freecodecamp.org

            한빛미디어 리엑트 네이티브 듀토리얼 


'React & React Native ' 카테고리의 다른 글

React Native Svg 사용하기 (react-native-svg)  (0) 2018.11.18
ReactNative flexBox 소스 컴포넌트 분리  (0) 2018.11.17
ReactNative flexBox 연습1  (0) 2018.11.15
리액트란? (React)  (0) 2018.10.21
TouchableOpacity  (0) 2018.10.18
블로그 이미지

클라인STR

,


해당레이아웃을 만드는 연습을 해보았다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
class FlexBox1 extends Component {
    render() {
        return (            
           
            <View style={styles.container}>
                <View style={styles.left}>
                </View>
                <View style={styles.right}>
                </View>
            </View>
        );
    }
}
const styles = StyleSheet.create({
   container : {
    flex : 1 ,
    flexDirection: 'row'
   },
   left : {
       flex : 1,
       backgroundColor : 'red'       
   },
   right : {
       flex : 1,
       backgroundColor : 'blue'
   }
});
 
cs


세로로 2등분으로 되게끔 레이아웃을 나누어보았다. 


Blue 영역을 컬럼기준으로 1/2 나눠야 되므로 View 영역을 right 를 기준으로 자식 앨리먼트를 2개 셍성한다. 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
import React, { Component } from 'react';
import {StyleSheet,Text, View} from 'react-native';
 
 
class FlexBox1 extends Component {
 
    render() {
        return (            
           
            <View style={styles.container}>
                <View style={styles.left}>
                </View>
                <View style={styles.right}>
                    <View style={styles.rightTop}>
                    </View>
                    <View style={styles.rightBottom}>
                    </View>
                </View>
            </View>
        );
    }
 
}
 
 
const styles = StyleSheet.create({
   container : {
    flex : 1 ,
    flexDirection: 'row'
   },
   left : {
       flex : 1,
       backgroundColor : 'red'       
   },
   right : {
       flex : 1 ,
       flexDirection : 'column'
       
   },
   rightTop : {
        flex : 1,
        backgroundColor : 'blue'
   },
   rightBottom : {
        flex : 1 , 
        backgroundColor : 'yellow'
   }
});
 
export default FlexBox1;
cs


참조 : 리액트 네이티브 튜토리얼 (리얼한빛)


'React & React Native ' 카테고리의 다른 글

ReactNative flexBox 소스 컴포넌트 분리  (0) 2018.11.17
ReactNative flexBox 연습2  (0) 2018.11.16
리액트란? (React)  (0) 2018.10.21
TouchableOpacity  (0) 2018.10.18
react-native 특정버전으로 프로젝트 생성하기  (0) 2018.10.17
블로그 이미지

클라인STR

,

cp, mv, mkdir, rm 명령문

Linux 2018. 11. 12. 17:54

명령어에는 특수문자를 이용하여, 파일명에 대한 그룹을 지정할 수 있다. 이러한 특수문자를 와일드 카드라고 한다.


 와일드카드

매칭 문자 

 *

모든 문자 

 ?

모든 하나의 문자

 [characters]

characters 문자셋에 포함된 문자

 [!characters]

characters 문자셋에 포함되지 않은 문자

[[:class:]] 

지정된 문자 클래스에 포함된 문자

[와일드카드]


 문자 클래스

매칭 문자 

 [:alnum:]

 모든 알파벳과 숫자 문자

 [:alpha:]

 모든 알파벳 문자

 [:digit:]

 모든 숫자

 [:lower:]

 모든 소문자

 [:upper:]

 모든 대문자

[가장 많이 사용되는 문자 클래스]


 패턴

매칭 문자 

 *

모든 파일 

g* 

g로 시작하는 모든 파일 

b*.txt 

b로 시작하되 .txt 형식 파일 

Data???

Data로 시작하면서 뒤에 정확히 세 개의 문자만 있는 파일 

[abc]*

a,b,c로 시작하는 모든파일 

BACKUP. [0-9][0-9][0-9] 

BACKUP으로 시작하면서 뒤에 정확히 세 개의 숫자로 된 파일 

 [[:upper:]]*

대문자로 시작하는 모든파일 

 [![:digit:]]*

숫자로 시작하는 모든파일 

*[[:lower:]123] 

파일명이 소문자로 끝나거나 1,2,3으로 끝나는 파일


mkdir  디렉토리생성

mkdir 디렉토리명 

여러개 디렉토리를 만들경우는 다음과 같이 뛰어쓰기를 추가하여 차례대로 입력한다.


cp 파일 및 디렉토리 복사

cp 명령어로 파일과 디렉토리를 복사한다. 

cp file1 file2  (file1 파일을 또는 디렉토리를 file2라는 파일 또는 디렉토리로 복사한다.)

다수의 파일이나 디렉토리를 다른 디렉토리로 복사할 수 있다.


 옵션

설명 

 -a

파일 및 디렉토리뿐만 아니라 소유자 및 권한 정보와 같은 속성까지 모두 복사한다. 반면, 일반적으로는 복사를 하는 사용자의 기본적인 속성을 복사한다.  

 -i

 기존 파일을 덮어쓰기 전에 확인 메세지를 보여주는 옵션이다. 이 옵션 없이 cp 명령어를 사용하면 확인 과장 없이 그대로 파일을 덮어쓰게된다.

 -r

 디렉토리와 그 안의 내용까지 복사할 때 쓰는 옵션이다. 이 옵션은 디렉토리를 복사할 때 필요하다.

 -u

 어떤 디렉토리에 있는 파일을 다른 디렉토리로 복사할 때, 그 디렉토리에는 없거나 최신 버전인 파일만을 복사하기 위해서 이 옵션을 사용한다.

 -v

 복사하 완료되었다는 메시지를 보여주는 옵션이다.

[cp 옵션]



mv  파일 이동과 이름 변경

mv 명령어를 어떻게 사용하느냐에 따라서 파일을 이동할 수도 있고 파일명을 수정할 수도 있다. mv 명령을 실행하면 두 경우 모두 기존 파일명은 더 이상 존재하지 않게 된다. 이 명령어의 쓰임은 cp와 매우 비슷하다.

mv file1 file2  (file1 파일 또는 디렉토리를 file2로 이동하거나 이름을 바꾼다.)

하나 이상의 파일이나 디렉토리를 다른 디렉토리로 이동한다.


 옵션

설명 

 -i

기존 파일을 덥어쓰기 전에 확인 메세지를 보여주는 옵션이다. 이 옵션없이 mv 명령어를 사용하면 확인 과정 없이 그대로 파일을 덮어쓴다. 

 -u

파일을 다른 디렉토리로 이동하려고 할 때, 그 디렉토리에는 없거나 또는 최신 버전인 파일만을 이동하기 위해서 이 옵션을 사용한다. 

 -v

이동이 완료되었다는 메시지를 보여주는 옵션이다. 

[mv 옵션]


rm 파일 및 디렉토리 삭제

rm 명령어는 하나이상의 파일 및 디렉토리를 삭제할때 사용한다.

rm file

rm 삭제시 취소가 되지않는다. rm 및 와일드카드를 사용하여 삭제할 경우 ls 명령어로 와일드 카드를 먼저 테스트하는것이 좋다.


 옵션

설명 

 -i

기존 파일을 삭제하기 전에 확인 메세지를 보여주는 옵션이다. 이 옵션 없이 rm 명령어를 사용하면 어떠한 확인 과정 없이 그대로 파일을 삭제하게 된다. 

 -r

재귀적으로 디렉토리를 삭제한다. 즉 삭제된 디렉토리에 하위 디렉토리들이 있다해도 모두 삭제된다. 디렉토리를 완전히 삭제하려면 이 옵션을 반드시 사용해야 한다. 

 -f

존재하지 않는 파일은 확인 메세지 없이 무시하라는 옵션이다. 

 -v

삭제가 완료되었다는 메세지를 보여주는 옵션이다. 


발췌 : 리눅스 커맨드라인 완벽 입문서




'Linux' 카테고리의 다른 글

ls 명령어  (0) 2018.11.09
절대 경로와 상대 경로  (0) 2018.11.08
파일시스템 탐색 (pwd, ls, cd)  (0) 2018.11.06
쉘이란 무엇인가?  (0) 2018.11.05
블로그 이미지

클라인STR

,