리액트네이티브 Xml json 변경 , React Native Xml to Json

React & React Native 2019. 1. 8. 14:34


이전포스팅 예제에서 소스코드를 변경하여 실습하였다.

이전포스팅  클릭


react-native-xml2js 라이브러리를 설치합니다.


1
npm install react-native-xml2js
cs



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
const API_KEY = "xSpkBj5Uf8pu8S.......";
const API_STEM = "http://openapi.airkorea.or.kr/openapi/services/rest/ArpltnInforInqireSvc/getCtprvnRltmMesureDnsty";
var parseString = require('react-native-xml2js').parseString;
 
var SIDO = "경남";
function fetchData() {
    SIDO = encodeURIComponent(SIDO);
    var url = `${API_STEM}?serviceKey=${API_KEY}&numOfRows=10&pageNo=1&sidoName=${SIDO}&ver=1.3`;
   
    return fetch(url)
        .then(response => response.text())
        .then(data => {
            console.log(data);
            parseString(data, function (err, result) {
                console.dir(result);
                console.log(JSON.stringify(result))
                console.log(JSON.parse(JSON.stringify(result)));
                
            });
        })
        .catch(error => {
            console.log(error);
        });
}
export default { fetchData: fetchData};
 
cs


1
2
3
parseString(xml, function (err, result) {
    console.dir(result);
});

cs

위와 같이 해당구문을 이용하여 XML 응답값을 쉽게 파싱할 수 있다. 

JSON.stringfy  이용하여 JSON String 값으로 변경하고, 이를 JSON.parse 이용하여 Json Object 형태로 만들어 줍니다. 



https://beautifier.io/ 이용하여 JSON으로 변경된 데이터를 이쁘게 다시 펼쳐보면 ...


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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
{
    "response": {
        "header": [{
            "resultCode": ["00"],
            "resultMsg": ["NORMAL SERVICE."]
        }],
        "body": [{
            "items": [{
                "item": [{
                    "stationName": ["회원동"],
                    "mangName": ["도시대기"],
                    "dataTime": ["2019-01-07 23:00"],
                    "so2Value": ["0.004"],
                    "coValue": ["0.7"],
                    "o3Value": ["0.022"],
                    "no2Value": ["0.022"],
                    "pm10Value": ["71"],
                    "pm10Value24": ["60"],
                    "pm25Value": ["43"],
                    "pm25Value24": ["31"],
                    "khaiValue": ["90"],
                    "khaiGrade": ["2"],
                    "so2Grade": ["1"],
                    "coGrade": ["1"],
                    "o3Grade": ["1"],
                    "no2Grade": ["1"],
                    "pm10Grade": ["2"],
                    "pm25Grade": ["2"],
                    "pm10Grade1h": ["2"],
                    "pm25Grade1h": ["3"]
                }, {
                    "stationName": ["봉암동"],
                    "mangName": ["도시대기"],
                    "dataTime": ["2019-01-07 23:00"],
                    "so2Value": ["0.003"],
                    "coValue": ["0.6"],
                    "o3Value": ["0.015"],
                    "no2Value": ["0.024"],
                    "pm10Value": ["45"],
                    "pm10Value24": ["43"],
                    "pm25Value": ["31"],
                    "pm25Value24": ["25"],
                    "khaiValue": ["74"],
                    "khaiGrade": ["2"],
                    "so2Grade": ["1"],
                    "coGrade": ["1"],
                    "o3Grade": ["1"],
                    "no2Grade": ["1"],
                    "pm10Grade": ["2"],
                    "pm25Grade": ["2"],
                    "pm10Grade1h": ["2"],
                    "pm25Grade1h": ["2"]
                }, {
                    "stationName": ["상봉동"],
                    "mangName": ["도시대기"],
                    "dataTime": ["2019-01-07 23:00"],
                    "so2Value": ["0.003"],
                    "coValue": ["0.6"],
                    "o3Value": ["0.014"],
                    "no2Value": ["0.034"],
                    "pm10Value": ["58"],
                    "pm10Value24": ["54"],
                    "pm25Value": ["35"],
                    "pm25Value24": ["28"],
                    "khaiValue": ["82"],
                    "khaiGrade": ["2"],
                    "so2Grade": ["1"],
                    "coGrade": ["1"],
                    "o3Grade": ["1"],
                    "no2Grade": ["2"],
                    "pm10Grade": ["2"],
                    "pm25Grade": ["2"],
                    "pm10Grade1h": ["2"],
                    "pm25Grade1h": ["2"]
                }, {
                    "stationName": ["대안동"],
                    "mangName": ["도시대기"],
                    "dataTime": ["2019-01-07 23:00"],
                    "so2Value": ["0.004"],
                    "coValue": ["0.7"],
                    "o3Value": ["0.015"],
                    "no2Value": ["0.015"],
                    "pm10Value": ["58"],
                    "pm10Value24": ["51"],
                    "pm25Value": ["36"],
                    "pm25Value24": ["27"],
                    "khaiValue": ["79"],
                    "khaiGrade": ["2"],
                    "so2Grade": ["1"],
                    "coGrade": ["1"],
                    "o3Grade": ["1"],
                    "no2Grade": ["1"],
                    "pm10Grade": ["2"],
                    "pm25Grade": ["2"],
                    "pm10Grade1h": ["2"],
                    "pm25Grade1h": ["3"]
                }, {
                    "stationName": ["상대동"],
                    "mangName": ["도시대기"],
                    "dataTime": ["2019-01-07 23:00"],
                    "so2Value": ["0.007"],
                    "coValue": ["0.7"],
                    "o3Value": ["0.019"],
                    "no2Value": ["0.028"],
                    "pm10Value": ["57"],
                    "pm10Value24": ["51"],
                    "pm25Value": ["28"],
                    "pm25Value24": ["23"],
                    "khaiValue": ["71"],
                    "khaiGrade": ["2"],
                    "so2Grade": ["1"],
                    "coGrade": ["1"],
                    "o3Grade": ["1"],
                    "no2Grade": ["1"],
                    "pm10Grade": ["2"],
                    "pm25Grade": ["2"],
                    "pm10Grade1h": ["2"],
                    "pm25Grade1h": ["2"]
                }, {
                    "stationName": ["명서동"],
                    "mangName": ["도시대기"],
                    "dataTime": ["2019-01-07 23:00"],
                    "so2Value": ["0.004"],
                    "coValue": ["0.7"],
                    "o3Value": ["0.024"],
                    "no2Value": ["0.029"],
                    "pm10Value": ["57"],
                    "pm10Value24": ["55"],
                    "pm25Value": ["28"],
                    "pm25Value24": ["26"],
                    "khaiValue": ["77"],
                    "khaiGrade": ["2"],
                    "so2Grade": ["1"],
                    "coGrade": ["1"],
                    "o3Grade": ["1"],
                    "no2Grade": ["1"],
                    "pm10Grade": ["2"],
                    "pm25Grade": ["2"],
                    "pm10Grade1h": ["2"],
                    "pm25Grade1h": ["2"]
                }, {
                    "stationName": ["웅남동"],
                    "mangName": ["도시대기"],
                    "dataTime": ["2019-01-07 23:00"],
                    "so2Value": ["0.005"],
                    "coValue": ["0.8"],
                    "o3Value": ["0.020"],
                    "no2Value": ["0.029"],
                    "pm10Value": ["63"],
                    "pm10Value24": ["64"],
                    "pm25Value": ["30"],
                    "pm25Value24": ["26"],
                    "khaiValue": ["84"],
                    "khaiGrade": ["2"],
                    "so2Grade": ["1"],
                    "coGrade": ["1"],
                    "o3Grade": ["1"],
                    "no2Grade": ["1"],
                    "pm10Grade": ["2"],
                    "pm25Grade": ["2"],
                    "pm10Grade1h": ["2"],
                    "pm25Grade1h": ["2"]
                }, {
                    "stationName": ["가음정동"],
                    "mangName": ["도시대기"],
                    "dataTime": ["2019-01-07 23:00"],
                    "so2Value": ["0.006"],
                    "coValue": ["-"],
                    "o3Value": ["-"],
                    "no2Value": ["-"],
                    "pm10Value": ["-"],
                    "pm10Value24": ["-"],
                    "pm25Value": ["-"],
                    "pm25Value24": ["-"],
                    "khaiValue": ["-"],
                    "khaiGrade": [""],
                    "so2Grade": [""],
                    "coGrade": [""],
                    "o3Grade": [""],
                    "no2Grade": [""],
                    "pm10Grade": [""],
                    "pm25Grade": [""],
                    "pm10Grade1h": [""],
                    "pm25Grade1h": [""]
                }, {
                    "stationName": ["용지동"],
                    "mangName": ["도시대기"],
                    "dataTime": ["2019-01-07 23:00"],
                    "so2Value": ["0.003"],
                    "coValue": ["0.3"],
                    "o3Value": ["0.030"],
                    "no2Value": ["0.020"],
                    "pm10Value": ["48"],
                    "pm10Value24": ["48"],
                    "pm25Value": ["25"],
                    "pm25Value24": ["24"],
                    "khaiValue": ["72"],
                    "khaiGrade": ["2"],
                    "so2Grade": ["1"],
                    "coGrade": ["1"],
                    "o3Grade": ["1"],
                    "no2Grade": ["1"],
                    "pm10Grade": ["2"],
                    "pm25Grade": ["2"],
                    "pm10Grade1h": ["2"],
                    "pm25Grade1h": ["2"]
                }, {
                    "stationName": ["반송로"],
                    "mangName": ["도로변대기"],
                    "dataTime": ["2019-01-07 23:00"],
                    "so2Value": ["0.004"],
                    "coValue": ["0.6"],
                    "o3Value": ["0.018"],
                    "no2Value": ["0.018"],
                    "pm10Value": ["205"],
                    "pm10Value24": ["81"],
                    "pm25Value": ["30"],
                    "pm25Value24": ["25"],
                    "khaiValue": ["101"],
                    "khaiGrade": ["3"],
                    "so2Grade": ["1"],
                    "coGrade": ["1"],
                    "o3Grade": ["1"],
                    "no2Grade": ["1"],
                    "pm10Grade": ["3"],
                    "pm25Grade": ["2"],
                    "pm10Grade1h": ["4"],
                    "pm25Grade1h": ["2"]
                }]
            }],
            "numOfRows": ["10"],
            "pageNo": ["1"],
            "totalCount": ["30"]
        }]
    }
}

cs


해당형태로 변경된것을 알 수 있다. 


JSON.parse 참고

JSON.stringfy 참고



저작자표시 비영리 변경금지

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

React props  (0) 2019.01.10
React Native Navigation V2 - Simple Blog - 1, Navigation.showModal  (0) 2019.01.10
리액트네이티브 XML Parsing , React Native Xml Parsing  (0) 2019.01.07
react-native 실행시 undefined is not a function ('...react DevTools.connect DevTools...'), 리액트네이티브 이전 버전실행시 오류 0.56.0  (0) 2019.01.04
리액트네이티브 리스트 React Native FlatList Component  - #2  (0) 2019.01.04
블로그 이미지

클라인STR

,

2019년 신년 무료운세 Yes24

사는이야기 2019. 1. 8. 09:17

모바일 브라우저로 m.yes24 접속한다.

데스크탑 브라우저일 경우 

Yes24 무료운세보기 클릭한다. (http://m.yes24.com/Event/EventDetail?eventNo=164742)



모바일웹 접속시 해당이벤트 화면이 뜬다. 안보일경우 새로 고침하거나 위에 적인 이벤트페이지 URL 로 접속한다.


2019년 신년운세 외에 상품권, 추천도서, SNS 이벤트에대한 정보를 볼 수 있다.



생년월일, 태어난 시를 선택하고 토정비결 보기를 선택한다. 



Yes24 2019년 토정비결은 1월1일부터 ~ 1월 31일까지 서비스를 이용가능하다.



'사는이야기' 카테고리의 다른 글

연봉탐색기2019 사용해보기  (0) 2019.01.12
잦은 방귀를 유도하는 음식들  (0) 2019.01.10
흥국화재 실비보험 신청하기 [우편접수 및 팩스] [부모님 실비보험 신청]  (0) 2019.01.07
2019년 신년운세 무료보기 신사주닷컴후기  (0) 2019.01.02
2019년 새해 해돋이 창원근교, 창원 근처 해돋이, 의령 해돋이 정암진  (0) 2019.01.01
블로그 이미지

클라인STR

,

흥국화재 실비보험 신청하기 [우편접수 및 팩스] [부모님 실비보험 신청]

사는이야기 2019. 1. 7. 21:53

흥국화재 보험금 청구안내


2008년에 가입하신 실비보험을 단한번더 청구하시지 않으셨다고 하셔서, 부모님집에 있는동안 실비보험 청구하기로 했다.


보험금 청구하는 방법은 우편접수, 팩스, 인터넷, 모바일앱, 고객센터 접수 등 있는데, 부모님께서 공인인증서를 사용하지 않으시기 때문에 우편접수나 팩스중 하나를 선택하기로 했다. 


우편접수

우편접수나 팩스접수를 하기위해서는 보험금청구서 , 개인신용정보 동의서를 인터넷에서 다운로드 받아야된다. 

흥국화재 보험금 청구안내   <- 링크클릭



공통서류 항목란에서 PDF 다운받기 또는 JPG 다운받기를 선택한 후 해당문서를 프린터를 이용해서 출력한다.


서류를 작성하기 전에 우선으로 해야될게 있는데 관련서류를 준비하는것이다. 



간단한 질병에 경우는 진료비 계산서 영수증 만으로 해결가능하며, 3만원 초과시에는 처방전, 진료비세부내역서 추가로 진단서, 통원확인서, 진료차트, 소견서 등이 필요하다. 실비청구를 여러번 나의 경우에는 대부분 진료비계산서 영수증, 진료비 세부내역서 만으로 일반 병원비를 청구하였고, MRI나 입원, 수술이 필요한 경우는 위에 사진에 적혀있는대로 추가 증빙서류가 필요하였다.


보험금청구서 1장, 개인(신용)정보 처리 동의서 2장으로 구성되어있다.

보험금청구서 양식에 필수기재 사항이 표시되어있으므로 빠짐없이 체크하고 작성한다. 동의서에 경우 동의항목에  동의여부를 체크한다.



[실 작성예시]



서류작성이 끝나면  아래의 주소로해서 등기로 우편을 접수한다.

우편(등기)접수 : (07254) 서울특별시 영등포구 버드나루로2길 7(영등포2가) 흥국생명빌딩 9층 접수담당자


팩스접수에 경우는  콜센터로 사고접수 후 가상팩스번호 발급 (☎ 1688-1688 > 4 > 0 > 상담사 연결) 후 가상팩스번호로 보낸다. 



접수가 정상적으로 완료되면 카카오톡으로 해당 메세지를 받을수 있다. 특별한 사유가 없으면 3일이내에 입금받을수 있다.

'사는이야기' 카테고리의 다른 글

잦은 방귀를 유도하는 음식들  (0) 2019.01.10
2019년 신년 무료운세 Yes24  (0) 2019.01.08
2019년 신년운세 무료보기 신사주닷컴후기  (0) 2019.01.02
2019년 새해 해돋이 창원근교, 창원 근처 해돋이, 의령 해돋이 정암진  (0) 2019.01.01
런닝머신 10분으로 1시간 효과내기  (0) 2018.12.30
블로그 이미지

클라인STR

,

리액트네이티브 XML Parsing , React Native Xml Parsing

React & React Native 2019. 1. 7. 10:39

공공데이터 포털에서 제공하는 API를사용하여 날씨앱을 제작할려고 이것저것 알아보는중 XML 파싱에대해서 실습한 내용을 기록으로 남긴다. 


XMLDOM 라이브러리를 사용하였다. 


npm install xmldom   라이브러리를 설치한다. 


 공공데이터 포털에서 사용할 서비스는 대기오염정보 조회 서비스 이다. 해당 API를 사용하기 위해서 회원가입을 하고 서비스 신청을 선택해야된다. 


실제 테스트로 사용할 API는 시도별 실시간 측정정보 조회서비스이다. API 조회시 응답 데이터 포맷이 XML이다. 


미리보기 버튼을 선택시 해당 XML값이 리턴된다.



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
const API_KEY = "xSpkBj5Uf8pu8S%...."; //key는 ..처리함
const API_STEM = "http://openapi.airkorea.or.kr/openapi/services/rest/ArpltnInforInqireSvc/getCtprvnRltmMesureDnsty";
var DOMParser = require('xmldom').DOMParser;
var SIDO = "경남";
function fetchData() {
    SIDO = encodeURIComponent(SIDO);
    var url = `${API_STEM}?serviceKey=${API_KEY}&numOfRows=10&pageNo=1&sidoName=${SIDO}&ver=1.3`;
    
    return fetch(url)
        .then(response => response.text())
        .then(data => {
            console.log(data);
            var xmlDoc = new DOMParser().parseFromString(data, 'text/xml');
            var x=xmlDoc.getElementsByTagName("item");
            
            for (var i=0;i<x.length;i++){
                console.log(x[i].childNodes);
                var nodeList = x[i].childNodes;
 
                for (var j=0; j<nodeList.length; j++) {
                    var item = nodeList[j];
                    
                    if (item.firstChild) {
                        console.log(item.nodeName +" : "+item.childNodes[0].nodeValue);
                    }
                }
            }
        
            return xmlDoc;
        })
        .catch(error => {
            console.log(error);
        });
}
export default { fetchData: fetchData};
 
 
cs

[Data.js]

fetch함수내에 13라인에 DOMParser()를 생성한후 parseFromString 메서드를 사용하여 문자열을 XML로 파싱할 수 있게 변경한다. 

xml 구조상 <items> 하위에 <item>...</item> 앨리먼트로 존재한다. getElementsByTagName메서드로 다수의 item을 선택한후 childeNodes를 메서드를 이용하여 NodeList에 접근한다. NodeList내부에는 Element, Text 객체로 구성되어있는데, 이때 firstChild메서드를 이용하여 Elemente 내에 Node 속성에 접근하였다. XML 구조를 명확하게 보기위해서는 console.log() 함수를 이용하여 데이터 구조를 찍어보자.




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
import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View} from 'react-native';
import Data from "./src/Data";
 
 
 
export default class App extends Component {
 
  
  componentDidMount() {
    Data.fetchData().then(data => {
      
    }); 
  }
 
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>        
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});
 
cs

[App.js]

App.js에는 componentDidMound() {..} 함수내에서 fetchData()함수를 호출하는 간단한 코드이다.


공공데이터 포털에서 제공하는 API는 https요청이 아닌 http요청이므로 

아래링크를 참조하여 http요청을 허용해야 한다.


http허용설정링크 참조  <== 클릭





참고

xmldom

xmldom예제

https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

https://developer.mozilla.org/ko/docs/Web/API/Node/childNodes

저작자표시 비영리 변경금지

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

React Native Navigation V2 - Simple Blog - 1, Navigation.showModal  (0) 2019.01.10
리액트네이티브 Xml json 변경 , React Native Xml to Json  (0) 2019.01.08
react-native 실행시 undefined is not a function ('...react DevTools.connect DevTools...'), 리액트네이티브 이전 버전실행시 오류 0.56.0  (0) 2019.01.04
리액트네이티브 리스트 React Native FlatList Component  - #2  (0) 2019.01.04
ES6 나머지매개변수 ,rest parameter  (0) 2019.01.03
블로그 이미지

클라인STR

,

react-native 실행시 undefined is not a function ('...react DevTools.connect DevTools...'), 리액트네이티브 이전 버전실행시 오류 0.56.0

React & React Native 2019. 1. 4. 23:12

샘플코드 작성중 아래와 같은 오류가 나면서 프로그램이 제대로 실행되지 않는 오류가 발생하였다.


현재 모든 실습 샘플은 리액트네이티브 구버전인 0.56.0으로 테스트하고있었다. 

구글링 해서 찾아보니 아래와 같이 해결하면 정상적으로 프로젝트가 실행되었다. 


1
npm install --save-dev react-devtools-core@3.4.2
cs


해당패키지를 설치하고 에뮬레이터 및 컴파일러를 종료후 재실행한다.


2019년1월5일 현재 react-devtools-core버전이 3.4.3이 나오면서 이문제는 해결된듯 보인다. 기존에 작성된 프로젝트인경우 react-devtools-core버전을 3.4.3으로 변경한다음. npm install 명령어를 실행한후 프로젝트를 재기동 해보자.


참고 

https://github.com/facebook/react-native/issues/22865

https://github.com/facebook/react-native/issues/22863

저작자표시 비영리 변경금지

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

리액트네이티브 Xml json 변경 , React Native Xml to Json  (0) 2019.01.08
리액트네이티브 XML Parsing , React Native Xml Parsing  (0) 2019.01.07
리액트네이티브 리스트 React Native FlatList Component  - #2  (0) 2019.01.04
ES6 나머지매개변수 ,rest parameter  (0) 2019.01.03
리액트네이티브 Image Component not loading http, React Native Http 허용 , http 요청시 이미지 로딩 안됨  (0) 2019.01.01
블로그 이미지

클라인STR

,

리액트네이티브 리스트 React Native FlatList Component  - #2

React & React Native 2019. 1. 4. 00:30

이전글 바로가기 


react-native-elements 라이브러리를 설치한다. 


1
npm install --save react-native-elements
cs




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
69
70
71
import React, { Component } from "react";
import { View, Text, FlatList, ActivityIndicator } from "react-native";
import { List, ListItem, SearchBar } from "react-native-elements";
 
class FlatListDemo extends Component {
 
    constructor(props) {
        super(props);
 
        this.state = {
            loading:false,
            data: [],
            page: 1,
            seed: 1,
            error: null,
            refreshing: false
        };
    }
 
 
    componentDidMount() {
        this.makeRemoteRequest();
    }
 
    makeRemoteRequest = () => {
        const {page, seed} = this.state;
        const url = 'https://randomuser.me/api/?seed=${seed}&page=${page}&results=20';
        this.setState({loading: true});
 
        fetch(url)
        .then(response => response.json())
        .then(response => {
            this.setState({
                data: page === 1 ? response.results : [...this.state.data, ...response.results],
                error: response.error || null,
                loading: false,
                refreshing: false
              });
        })
        .catch(error => {
            this.setState({error, loading: false});
        })
    }
 
 
 
      render() {
        return (
        <List>
            <FlatList
              data={this.state.data}
              renderItem={({ item }) => (
                <ListItem
                  title={`${item.name.first} ${item.name.last}`}
                  subtitle={item.email}
                  avatar={{ uri: item.picture.thumbnail }}
                />
              )}
              keyExtractor={item => item.email}
            />
         <List/>
        
        );
      }
    
    
}
 
 
export default FlatListDemo;
 
cs

[FlatListDemo.js]

생성자 함수에 state 값을 초기화한다. loading(로딩여부), data(dataSource), page or seed (스크롤페이징하기위해서 필요한 파라메터), refreshing (리플레쉬여부) , makeRemoteRequest 는  API로부터 데이터를 가져오기 위한 함수이다.  List, ListItem은 react-native-elements 제공하는 UI 라이브러리이다.

title은 리스트의제목, subTitle은 subtitle 또는 View 에해당하는 내용을 지정하며, avatar 속성은 React Native Image Source 사용할때 지정하는 속성이다. 

roundAvatar 속성을 지정하면 Image 가 둥글게 영역이 지정되서 보인다.

keyExtractor 속성에 경우 기본으로 지정된 key값대신에 action을 지정했을경우에 ID값을 지정할 수 있다. 


[roundAvatar 지정되지않은경우]


[roundAvatar 지정된경우]


Lists, ListItem을 사용하면, 리스트형태에 UI를 빠르고 간편하게 만들 수 있다. 


화면 최상단, 최하단에 구분선을 삭제할경우 아래와같이 추가로 코드를 수정해야한다. 



1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
render() {
        return (
          <List
            containerStyle={{borderTopWidth : 0, borderBottomWidth : 0}}
          >
            <FlatList
              data={this.state.data}
              renderItem={({ item }) => (
                <ListItem
                  roundAvatar
                  title={`${item.name.first} ${item.name.last}`}
                  subtitle={item.email}
                  avatar={{ uri: item.picture.thumbnail }}
                  containerStyle={{borderBottomWidth:0}}
                />
              )}
              keyExtractor={item => item.email}
              ItemSeparatorComponent={this.renderSeparator}
            />
          </List>
        
        );
      }
cs

List, ListItem containerStyle TopWidth, BottomWidth 값을 0으로 바꾼다. 

ItemSeparatorComponent 메서드를 아래와 같이 구현한다. 


1
2
3
4
5
6
7
8
9
10
11
12
renderSeparator = () => {
        return (
          <View
            style={{
              height: 1,
              width: "86%",
              backgroundColor: "#CED0CE",
              marginLeft: "14%"
            }}
          />
        );
      };
cs


Header와 Footer를 추가해보자 .


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
  renderHeader = () => {
        return <SearchBar placeholder="Type Here..." lightTheme round />;
      };
    
      renderFooter = () => {
        if (!this.state.loading) return null;
    
        return (
          <View
            style={{
              paddingVertical: 20,
              borderTopWidth: 1,
              borderColor: "#CED0CE"
            }}
          >
            <ActivityIndicator animating size="large" />
          </View>
        );
      };
 
cs


1
2
3
4
5
6
<FlatList
            
              ... 
              ListHeaderComponent={this.renderHeader}
              ListFooterComponent={this.renderFooter}
            />
cs


ListHeaderComponent, ListFooterComponent 속성에 함수들을 연결시킨다. 




원문링크 





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

리액트네이티브 XML Parsing , React Native Xml Parsing  (0) 2019.01.07
react-native 실행시 undefined is not a function ('...react DevTools.connect DevTools...'), 리액트네이티브 이전 버전실행시 오류 0.56.0  (0) 2019.01.04
ES6 나머지매개변수 ,rest parameter  (0) 2019.01.03
리액트네이티브 Image Component not loading http, React Native Http 허용 , http 요청시 이미지 로딩 안됨  (0) 2019.01.01
React Native VSCODE 단축키 (자주 사용하는)  (0) 2018.12.31
블로그 이미지

클라인STR

,

ES6 나머지매개변수 ,rest parameter

React & React Native 2019. 1. 3. 17:47

함수의 나머지 매개변수를 하나로 모아 배열값으로 사용할 수 있게한다. 


1
2
3
4
function fun1(...theArgs) {
  console.log(theArgs.length);
}
 
cs





1
2
3
4
5
6
7
8
function multiply(multiplier, ...theArgs) {
  return theArgs.map(function (element) {
    return multiplier * element;
  });
}
 
var arr = multiply(2, 1, 2, 3);
console.log(arr); // [2, 4, 6]
cs


나머지매개변수 참고문서

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

react-native 실행시 undefined is not a function ('...react DevTools.connect DevTools...'), 리액트네이티브 이전 버전실행시 오류 0.56.0  (0) 2019.01.04
리액트네이티브 리스트 React Native FlatList Component  - #2  (0) 2019.01.04
리액트네이티브 Image Component not loading http, React Native Http 허용 , http 요청시 이미지 로딩 안됨  (0) 2019.01.01
React Native VSCODE 단축키 (자주 사용하는)  (0) 2018.12.31
리액트네이티브 ActivityIndicator (리액트네이티브 로딩바)  (0) 2018.12.30
블로그 이미지

클라인STR

,

Git 명령어 연습 및 정리

형상관리 2019. 1. 3. 01:00



git init  - 새로운 git 저장소를 생성한다.  .git이라는 폴더가 생성된다. 

git은 세가지 상태를 가지고 있다. 작업디렉토리는 실제 파일들로 구성되어있고, 파일을 수정하고 수정된 파일을 add 할경우 Staging Area(Index)상태가 되며, commit을 하면 최종확정본 상태(HEAD) 된다. 


git add 명령어를 사용하면 Staging Area 상태로 변경된다. 폴더 전체를 add 할경우 git add * 명령어를 사용한다. git status 명령어를 사용하여 git에 현재 상태를 확인 할 수 있다. 

git rm --cached 파일명 명령어를 이용하면 Staging 상태를 작업상태로 변경할 수 있다. 

Staging 상태에서 Head 상태로 변경할려면 git  commit -m "커밋 메세지" 명령어를 사용한다. 


git log 명령어를 실행하면, commit 기록을 확인할 수 있다.

commit id, 커밋한브랜치정보, 작성자 정보 , commit message를 확인할 수 있다. 

git log --oneline 명렁어를 입력하면 git log를 한줄로 볼 수 있다. 


modified 상태인 파일을 수정전으로 돌릴경우 git checkout -- 파일명 명령어를 사용하면 상태를 변경할 수 있다. 이 명령어는 로컬의 변경내용을 변경 전 상태로 돌려준다. 이미 Staging 추가된 변경내용과 새로 생성한 파일은 그대로 남아있다. 만약 로컬에 있는 모든 변경 내용과 확장본을 포기하려면, 아래 명령으로 원격 저장소의 최신 이력을 가져오고, 로컬 master 브랜치가 저 이력을 가리키도록 수정 할 순 있다. git fetch origin,  git reset --hard origin/master

BookList.js파일을 수정한뒤 git add 명령어를 이용하여 Staging상태로 변경하였다, 이때 git reset --hard 명령어를 이용하면 수정전 상태로 다시 변경된다. 


BookList.js 파일을 add 하고 commit한다음 git log 명령어를 실행하면 최근이력부터 순차적으로 log이력을 보여준다.


브랜치란? 독립적으로 어떤작업을 진행하기위한 개념이다. 필요에 의해 만들어지는 각각의 브랜치는 다른 브랜치의 영향을 받지 않기 때문에, 여러 작업을 동시에 진행할 수 있다.


git checkout -b 브랜치명  이용해서 새로운 branch를 생성할 수 있다. git branch 명령어를 이용해서 현재 로컬 브랜치를 확인 할 수 있다. git checkout 브랜치명 통해서 현재 선택된 브랜치를 변경할 수 있으며, git branch -d 브랜치명 이용하여 브랜치를 삭제할 수 있다. git add 파일이름

git diff 원본 비교대상브랜치 


브랜치를 병합하기위해서는 git merge 브랜치명 사용한다.


참고 : https://backlog.com/git-tutorial/kr/stepup/stepup1_1.html


 


'형상관리' 카테고리의 다른 글

GitHub, Git 로컬저장소에서 원격지저장소로 push 하기  (0) 2019.01.23
GitHub 시작하기  (0) 2019.01.23
Git 슬로우캠퍼스 입문교육자료 요약정리 (OverView)  (0) 2018.11.11
Intellij 에서 SVN Source Commit 하기  (0) 2018.11.01
블로그 이미지

클라인STR

,

공지사항

글 보관함

달력

«   2025/03   »
일 월 화 수 목 금 토
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

티스토리툴바