2019년 신년운세 무료보기 신사주닷컴후기

사는이야기 2019. 1. 2. 15:59

http://sinsaju.com/event/campaign/


이벤트 링크를 통해서 접속한다.




1회 무료이용하기를 선택하면 회원가입 팝업이 호출된다. 




아이디 등록정보에 내용을 등록하고 아이디 등록하기 버튼을 선택한다. 





아이디 등록정보완료후 로그인을 한다음 1회무료이용하기를 다시 선택한다.




등록하기 버튼을 선택한다.



상품이용등록이 완료되면 해당팝업이 호출된다. 신사주닷컴, 접속하기 버튼을 눌러서 싸이트로 접속한다음 보고 싶은 무료운세를 선택한다. 






운세정보를 입력한후 운세 결과를 조회한다. 메일로 운세정보를 보내는기능같은게 없다보니까좀 불편한점이있는듯하다. 





프린트하기 버튼을 눌러서 PDF해당내용을 저장가능하니 저장하는게 더 좋을듯하다. 


참고 : https://post.naver.com/viewer/postView.nhn?volumeNo=17462780&memberNo=9229777


저작자표시 변경금지

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

2019년 신년 무료운세 Yes24  (0) 2019.01.08
흥국화재 실비보험 신청하기 [우편접수 및 팩스] [부모님 실비보험 신청]  (0) 2019.01.07
2019년 새해 해돋이 창원근교, 창원 근처 해돋이, 의령 해돋이 정암진  (0) 2019.01.01
런닝머신 10분으로 1시간 효과내기  (0) 2018.12.30
PSN 서비스 이전  (0) 2018.12.20
블로그 이미지

클라인STR

,

리액트네이티브 Image Component not loading http, React Native Http 허용 , http 요청시 이미지 로딩 안됨

React & React Native 2019. 1. 1. 17:09

FlastListComponent 포스팅시 Image컴포넌트에 url 리소스를 http요청으로 할 경우 이미지가 표시되지 않는 경우가 발생하였다.


구글링을 해서 검색 해보니 IOS 플랫폼에 경우 앱전송 보안변경으로 인해 http요청시 이미지가 정상적으로 표시되지 않는경우가 발생하였다. 상용서비스가 아니라 테스트 코드인경우는 https로 이미지를 올려서 해당오류를 개선하였다.


http를 허용하기위해서는 ReactNative 프로젝트를 Xcode로 Open 한다.



Project Navigator에 info.plist 파일을 선택하고, App Transport Security Settings 하위에 Allow Arbitrary Loads 속성을 추가하고 Value 값을 Yes로 변경한다. 



참고 : https://ads-developers.googleblog.com/2015/08/handling-app-transport-security-in-ios-9.html

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

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





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

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

리액트네이티브 리스트 React Native FlatList Component  - #2  (0) 2019.01.04
ES6 나머지매개변수 ,rest parameter  (0) 2019.01.03
React Native VSCODE 단축키 (자주 사용하는)  (0) 2018.12.31
리액트네이티브 ActivityIndicator (리액트네이티브 로딩바)  (0) 2018.12.30
2018년에 당신이 알아야할 리액트 네이티브 컴포넌트 라이브러리 11가지  (0) 2018.12.29
블로그 이미지

클라인STR

,

2019년 새해 해돋이 창원근교, 창원 근처 해돋이, 의령 해돋이 정암진

사는이야기 2019. 1. 1. 09:39
2019년 오랜만에 가족끼리 해돋이를 보러 갔다.

전날 밤에 해돋이 장소를 물색하던중 주남저수지, 정암진 2군데중 좀더 사람이 적게 붐빌만한 곳을 찾다보니 의령까지 가게됬다. 집에서 정암진까지 약 50분~1시간정도 거리였다. 네비게이션이나 지도어플에 정암루를 검색하면 아래와같은 지형을 찾을 수 있다.



지도를 클릭하시면 위치정보를 확인하실 수 있습니다.


일출을 보기위에서는 정암루 근처 솥바위 앞쪽에 강가쪽에 일출을 볼 수 있다. 혹은 정암철교에서 볼 수 도 있다. 


집에서 6시10분쯤 출발하여 7시 10분쯤 정암루 근처에 도착하니 이미 많은 차들이 주차해있었고, 주차장도 꽉차있었다. 근처 길가에 차를대놓고 사람들이 향하는 곳을 쫒아갔다. 정암루 근처에 공원에서 무료로 떡국이나 커피 귤 등을 나눠주고 있었다. 


2019년 1월 1일 의령에 일출시간은 07시 36분이었으나, 정암루근처에서 해가 보이기 시작할때는 07시 45분쯤 산등성이에서 서서히 보이기 시작했다. 










폰카메라라서 화질이 좀 아쉽긴하지만 정말 오랜만에 본 해돋이는 멋있었다. 

2019년에는 좀더 건강하고 알찬 한해를 보내길 바래본다. 


사람이 좀 덜 분비는 곳을 찾기위해서 방문한 정암루는 대략 500명 정도의 사람이 방문한것같았다. 아마도 해돋이를 보는 명소들은 좀더 많은 사람들이 오지 않을까 싶다. 

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

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

흥국화재 실비보험 신청하기 [우편접수 및 팩스] [부모님 실비보험 신청]  (0) 2019.01.07
2019년 신년운세 무료보기 신사주닷컴후기  (0) 2019.01.02
런닝머신 10분으로 1시간 효과내기  (0) 2018.12.30
PSN 서비스 이전  (0) 2018.12.20
덤벨 팔운동 기초 [헬린이]  (0) 2018.12.19
블로그 이미지

클라인STR

,

React Native VSCODE 단축키 (자주 사용하는)

React & React Native 2018. 12. 31. 20:37


rnc 


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import React, { Component } from 'react';
import { View, Text } from 'react-native';
 
export default class componentName extends Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
 
  render() {
    return (
      <View>
        <Text> textInComponent </Text>
      </View>
    );
  }
}
 
cs


imrc


import React, { Component } from 'react';



rnss


1
2
3
const styles = StyleSheet.create({
    
});

cs



cdm

1
2
3
componentDidMount() {
        
}
cs



작업하면서 계속 추가해야겠다.

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

ES6 나머지매개변수 ,rest parameter  (0) 2019.01.03
리액트네이티브 Image Component not loading http, React Native Http 허용 , http 요청시 이미지 로딩 안됨  (0) 2019.01.01
리액트네이티브 ActivityIndicator (리액트네이티브 로딩바)  (0) 2018.12.30
2018년에 당신이 알아야할 리액트 네이티브 컴포넌트 라이브러리 11가지  (0) 2018.12.29
리액트네이티브 리스트 React Native FlatList Component  - #1  (0) 2018.12.29
블로그 이미지

클라인STR

,

리액트네이티브 ActivityIndicator (리액트네이티브 로딩바)

React & React Native 2018. 12. 30. 15:18

ActivityIndicator

로딩바를 표시하는 컴포넌트이다. 



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
import React, {Component} from 'react';
import {StyleSheet, View, ActivityIndicator} from 'react-native';
 
 
export default class App extends Component {
  render() {
    return (
      <View style={[styles.container, styles.horizontal]}>
        <ActivityIndicator animating="true" size="large" color="#0000ff" />
        <ActivityIndicator size="small" color="#00ff00" />
        <ActivityIndicator size="large" color="#0000ff" />
        <ActivityIndicator size="small" color="#00ff00" />
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center'
  },
  horizontal: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    padding: 10
  }
})
 
cs

[App.js]



주요속성는 다음과 같다. 


animating : ActivityIndicator 표시할지 말지 여부를 나타낸다. (기본값 true)



color : spinner에 전경색을 표시한다. (기본값 회색)


size :  ActivityIndicator에 크기를 지정한다. 숫자값을 지원하는건 Android에서만 가능




원문 : https://facebook.github.io/react-native/docs/activityindicator

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

리액트네이티브 Image Component not loading http, React Native Http 허용 , http 요청시 이미지 로딩 안됨  (0) 2019.01.01
React Native VSCODE 단축키 (자주 사용하는)  (0) 2018.12.31
2018년에 당신이 알아야할 리액트 네이티브 컴포넌트 라이브러리 11가지  (0) 2018.12.29
리액트네이티브 리스트 React Native FlatList Component  - #1  (0) 2018.12.29
리액트네이티브 UI Tool, NativeBase  (0) 2018.12.28
블로그 이미지

클라인STR

,

런닝머신 10분으로 1시간 효과내기

사는이야기 2018. 12. 30. 14:46


오늘가서 한번 해봐야겠다.

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

2019년 신년운세 무료보기 신사주닷컴후기  (0) 2019.01.02
2019년 새해 해돋이 창원근교, 창원 근처 해돋이, 의령 해돋이 정암진  (0) 2019.01.01
PSN 서비스 이전  (0) 2018.12.20
덤벨 팔운동 기초 [헬린이]  (0) 2018.12.19
2019년 무료 운세 보는법 KDB생명 [2019년 신년운세][2019년 토정비결]  (0) 2018.12.19
블로그 이미지

클라인STR

,

2018년에 당신이 알아야할 리액트 네이티브 컴포넌트 라이브러리 11가지

React & React Native 2018. 12. 29. 23:48

2018년에 당신이 알아야할 리액트 네이티브 컴포넌트 라이브러리 11가지


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

React Native VSCODE 단축키 (자주 사용하는)  (0) 2018.12.31
리액트네이티브 ActivityIndicator (리액트네이티브 로딩바)  (0) 2018.12.30
리액트네이티브 리스트 React Native FlatList Component  - #1  (0) 2018.12.29
리액트네이티브 UI Tool, NativeBase  (0) 2018.12.28
리액트네이티브 Data 가져오기, React Native Fetching Data Fom An API  (0) 2018.12.28
블로그 이미지

클라인STR

,

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

React & React Native 2018. 12. 29. 22:32
FlatList 컴포넌트는 데이터 구조가 비슷한 경우사용하기 위해 디자인되었다.

1
2
3
<FlatList
    data={this.state.data}
    renderItem={this._renderItem} />
cs


이 컴포넌트는 props로 data와 renderItem을 반드시 지정해야한다.

data는 FlatList에서 렌더링할 데이터를 의미한다. 데이터는 배열타입으로 배열데이터 항목은 고유의 key 값을 가지고 있어야한다. 

renderItem 함수는 data배열에 속한 데이터를 바탕으로 해당하는 컴포넌트를 리턴하도록 구현한다. 


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 {StyleSheet, Text, View, FlatList} from "react-native";
 
 
 
class SimpleList extends Component {
 
    constructor(props) {
        super(props);
        this.state = {
            data : [
                {key: "a"},
                {key: "b"},
                {key: "c"},
                {key: "d"},
                {key: "e"},
                {key: "f"},
                {key: "g"},
                {key: "h"},
                {key: "i"},
                {key: "j"},
                {key: "k"},
                {key: "l"},
                {key: "m"},
                {key: "n"},
                {key: "o"},
                {key: "p"},
                {key: "q"},
                {key: "r"}
            ]
        }
    }
 
    _renderItem = ({item}) => {
        return <Text style={styles.row}>
                    {item.key}
                </Text>
    };
 
    render() {
        return (
             <View style={styles.container}>
                <FlatList
                    data={this.state.data}
                    renderItem={this._renderItem}
                    />
             </View>
        );
    }
 
}
 
 
const styles = StyleSheet.create({
    
    container : {
        flex : 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: "#F5FCFF"
    }, row : {
        flex : 1,
        fontSize:24,
        padding: 42,
        borderWidth: 1,
        borderColor: "#DDDDDD"
    }
});
export default SimpleList;

cs

[SimpleListDemo.js]

_renderItem에는 FlatList에 표현할 row항목을 디자인하여 return 하게끔 구성한다. 

뉴욕API 목록 갱신하기 예제 (API 연동전)


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
import React, { Component } from 'react';
import {StyleSheet, Image, FlatList, View, Text } from 'react-native';
import BookItem from "./BookItem";
 
const mockBooks = [
    {
        rank : 1,
        title : "GATHERING PREY",
        author : "John Sandford",
        book_image : "https://i.postimg.cc/cLdPyZLY/host1.jpg"
    },
    {
        rank : 2,
        title : "MEMORY MAN",
        author : "David Baldacci",
        book_image : "https://i.postimg.cc/3rcwxSvd/host2.jpg"
    }
 
];
 
class BookList extends Component {
  constructor(props) {
    super(props);
    this.state = {
        data: this._addKeysToBooks(mockBooks)};
    };
 
    _renderItem = ({item}) => {
 
        return (
            <BookItem
            coverURL={item.book_image}
            title={item.key}
            author={item.author}
            />
        )
    };
 
    _addKeysToBooks = books => {
        //뉴욕타임스 api 응답을 가져와서 렌더링을 위한 key 속성을 객체에 추가 
        return books.map(book => {
          return Object.assign(book, {key: book.title});
        });
    };
    render() {
      return <FlatList
                data={this.state.data}
                renderItem={this._renderItem}
            />
    }
  }
 
  const styles = StyleSheet.create({
        container : {
            flex : 1,
            paddingTop: 22,
        }
  });
 export default BookList;

cs

[BookList.js]



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
import React, { Component } from "react";
 
import { StyleSheet, Text, View, Image, ListView } from "react-native";
 
const styles = StyleSheet.create({
  bookItem: {
    flexDirection: "row",
    backgroundColor: "#FFFFFF",
    borderBottomColor: "#AAAAAA",
    borderBottomWidth: 2,
    padding: 5,
    height: 175
  },
  cover: {
    //width: "10%", height: "20%" 
       flex: 1, 
       height: 150, 
       resizeMode: "contain" 
    },
  info: {
    flex: 3,
    alignItems: "flex-end",
    flexDirection: "column",
    alignSelf: "center",
    padding: 20
  },
  author: { fontSize: 18 },
  title: { fontSize: 18, fontWeight: "bold" }
});
 
class BookItem extends Component {
  render() {
    return (
      <View style={styles.bookItem}>
        <Image style={styles.cover} source={{uri: this.props.coverURL}} />
        <View style={styles.info}>
          <Text style={styles.author}>{this.props.author}</Text>
          <Text style={styles.title}>{this.props.title}</Text>
        </View>
 
        
      </View>
    );
  }
}
 
export default BookItem;
 
cs

[BookItem.js]


1
2
3
4
5
6
7
8
9
10
import React, {Component} from 'react';
import BookList from './bookstore/BookList';
 
export default class App extends Component {
  render() {
    return (
        <BookList/>
      );
  }
}

cs

[App.js]


실제 데이터 연결예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const API_KEY = "73b19491b83909c7e07016f4bb4644f9:2:60667290";
const LIST_NAME = "hardcover-fiction";
const API_STEM = "https://api.nytimes.com/svc/books/v3/lists";
 
 
function fetchBooks(list_name = LIST_NAME) {
    let url = `${API_STEM}/${LIST_NAME}?response-format=json&api-key=${API_KEY}`;
    return fetch(url)
        .then(response => response.json())
        .then(data => {
            return data.results.books;
        })
        .catch(error => {
            console.log(error);
        });
}
export default { fetchBooks: fetchBooks};
 
 
cs

[NYT.js]



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
import React, { Component } from 'react';
import {StyleSheet, Image, FlatList, View, Text } from 'react-native';
import BookItem from "./BookItem";
import NYT from "./NYT";
 
class BookList extends Component {
  constructor(props) {
    super(props);
    this.state = {
        data: []};
    };
 
 
    componentDidMount() {
        this._refreshData();
    }
 
    _renderItem = ({item}) => {
 
        return (
            <BookItem
            coverURL={item.book_image}
            title={item.key}
            author={item.author}
            />
        )
    };
 
    _addKeysToBooks = books => {
        //뉴욕타임스 api 응답을 가져와서 렌더링을 위한 key 속성을 객체에 추가 
        return books.map(book => {
          return Object.assign(book, {key: book.title});
        });
    };
 
    _refreshData = () => {
        NYT.fetchBooks().then(books => {
            this.setState({data:this._addKeysToBooks(books)});
        });
    }
 
    render() {
      return <FlatList
                data={this.state.data}
                renderItem={this._renderItem}
            />
    }
  }
 
  
 
  export default BookList;
cs

[BookList.js]

NYT 모듈을 import에 추가한다. _refreshData() 메서드를 추가하고 NYT.fetchBooks 메서드를 이용하여 데이터를 가져오게끔 코드를 추가한다. 37~39라인 




FlastList관련참고

예제소스 참고 : 빠른 모바일 앱 개발을 위한 React Native 2/E


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

리액트네이티브 ActivityIndicator (리액트네이티브 로딩바)  (0) 2018.12.30
2018년에 당신이 알아야할 리액트 네이티브 컴포넌트 라이브러리 11가지  (0) 2018.12.29
리액트네이티브 UI Tool, NativeBase  (0) 2018.12.28
리액트네이티브 Data 가져오기, React Native Fetching Data Fom An API  (0) 2018.12.28
리액트네이티브 아이콘 사용하기, react-native-vector-icons 사용하기  (0) 2018.12.27
블로그 이미지

클라인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

티스토리툴바