HATEOAS를 알아보다 알게 된 것들… (REST API, Charset, Link)
2019-12-05
2018-11-15
Explanation
이제 가장 처음에 해볼만한 몇가지를 준비해봤습니다. 제목에서 보시다 싶이 비동기 통신과 애니메이션, 그리고 네이티브 컴포넌트 사용에 대해 짧게, 코드에서 바로 적어보려 합니다.
역시 예제 소스를 만들어서 깃헙에 올렸습니다. https://github.com/falsy/react-native-example/tree/native-components를 참고하시면 좋을 것 같습니다.
이전 글을 보셨다면, ./src/views/Dashboard.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 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 |
// ./src/views/Dashboard.js import React, {Component} from 'react'; import {DatePickerIOS, AlertIOS, Animated, Easing, StyleSheet, Text, View} from 'react-native'; // 딱 보시면 아시겠지만 // 날짜를 선택할 수 있는 네이티브 컴포넌트 : DatePickerIOS // 알림창 네이티브 컴포넌트 : AlertIOS // 애니메이션을 사용할 수 있는 컴포넌트 : Animated // 애니메이션의 easing 값을 줄 수 있는 : Easing import DashboardFooter from '../components/DashboardFooter'; import DashboardHeader from '../components/DashboardHeader'; import axios from 'axios'; // 저는 비동기 통신에서 주로 axios를 많이 사용해서 axios를 예로 사용했습니다. class Dashboard extends Component { constructor(props) { super(props); this.state = { data: '', date: new Date(), datePickerShow: false, left: new Animated.Value(0) // 애니메이션 값을 이렇게 Animated 객체로 기본값을 설정해 주셔야 합니다. }; } componentDidMount() { axios.get('http://localhost:44444/test').then(data => { this.setState({ data: data.data }); }); // 이건 이렇게 그냥 하면 오류가 나겠죠? 저는 개인적으로 간단하게 노드로 서버를 하나 띄어서 해봤어요. // 흔한 예로 setTimeout()을 써서 해보셔도 될 거 같아요. // setTimeout(() => { // this.setState({ // data: 'test' // }); // }, 500); } actionAnimate() { Animated.timing( this.state.left, { toValue: 100, // 애니메이션 변화 할 마지막 값? easing: Easing.quad, // 이진값 duration: 5000, // 애니메이션할 시간?? } ).start(); } actionAlert() { AlertIOS.alert( 'alert', 'Hello World.' ); // 알림창 첫번째 파라미터는 타이틀 // 두번째 파라미터는 메세지 // 생략했지만 세번째 파라미터는 콜백 } actionDatePicker() { this.setState({ datePickerShow: true }); // 이건 그냥 구현을 위해서 actionDatePicker() 가 실행되면 // 데이트피커가 출력되도록 합니다. } render() { return ( <View style={{flex: 1}}> <DashboardHeader /> <View style={styles.content}> <Text style={styles.welcome}>{this.state.data}</Text> <Text style={styles.welcome} onPress={this.actionAnimate.bind(this)}>Animate</Text> <Text style={styles.welcome} onPress={this.actionAlert.bind(this)}>Alert</Text> <Text style={styles.welcome} onPress={this.actionDatePicker.bind(this)}>DatePicker</Text> </View> { this.state.datePickerShow ? <View> <DatePickerIOS date={this.state.date} /> </View> : null } <Animated.View style={{ position: 'absolute', zIndex: 1, top: 100, width: 100, height: 50, backgroundColor: 'red', left: this.state.left.interpolate({ inputRange: [0, 100], outputRange: ['0%', '100%'], }), // 요게 조금 추가된 부분이랄까요? // 위 예에서는 변화할 값이 % 이다보니 이게 그냥 하면 안되거든요, ('100%' 는 사실 그냥 문자열이다보니??) // 그래서 이렇게 inputRange, outputRange 속성으로 사용할 수 있답니다. }}> <Text>Animated</Text> </Animated.View> <DashboardFooter /> </View> ); } } const styles = StyleSheet.create({ wrap: { flex: 1 }, content: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#fff', }, welcome: { fontSize: 20, textAlign: 'center', color: '#000' } }); export default Dashboard |
사실 위 부분들은 아주 간단하게 React Native 공홈을 확인하시면 쉽게 해보실 수 있어요.
(그 밖에도 쉽게 사용할 수 있는 것들이 많습니다.)
참고 링크.
알림창
데이트 피커
애니메이션
짜짠 사실 여기까지가 준비한 리액트 네이티브의 첫걸음? 정도인 거 같아요.
(여기서부터는 약간 아주 짧은 개인적인 생각인데요.) 리액트 네이티브는 정말 신기할 정도로 리액트에 익숙하다면 쉽게 다가갈 수 있는거 같습니다. 하지만 여기에는 적지 않았지만 디바이스의 권한이 필요한 기능들이나 조금만 깊은 네이티브 요소들을 사용하기는 정말 쉽지 않아요. 안드로이드 스튜디오나 Xcode에 대한 지식과 기본 네이티브 언어(자바, 오브젝트씨, 등.. )나 애플리케이션에 대한 이해가 있으면 좋을 거 같아요.
이제.. 많은 계란을 준비해야 할 것 같습니다.
웹앱에서 본인인증을해야 캘린더 정보를 볼수 있는데
퀵스타터는 실행하면 주는 url접속후 인증하고 뱉어내는 code를 입력해야 정보가 나옵니다.
다른 유저가 이 기능을 쓰려면 어떻게 해야하죠?
url을 클라한테 보내줘서 인증하게 해야하나요?
간단히 말해 응용방법을 모르겠습니다 ㅠ
안녕하세요, sofkaints님.
실제로 서비스에서 사용하시려면 몇가지 수정이 필요할 것 같습니다. sofkaints님이 말씀하신 것처럼 구글 사용자 인증을 위해서 (문서상 변수)’authUrl’로 클라이언트에서 새로 페이지를 띄우거나 리다이렉션 시켜서 사용자가 인증절차를 걸칠 수 있게 해야 합니다. 그리고 인증이 완료되면 구글 API 프로젝트에서 사용자 인증에서 ‘승인된 리디렉션 URI’부분에 등록된 URI로 리다이렉션이 되는데 이때 스트링 파라미터로 ?code=… 라는 값이 함께 옵니다.
‘승인된 리디렉션 URI’에 등록된 URI의 로직에서는 스트링 파라미터로 code가 있는지 확인하고, 있다면 code를 이용해서 ‘getToken’ 하여 토큰을 만들어서 ‘storeToken’ 토큰을 등록하고 다음 이벤트 로직을 실행하면 됩니다.
짧게 글로만 적으려니, 더 복잡하게 느껴지는거 같네요. 조금이나마 도움이 되었을지 모르겠습니다…
댓글 감사합니다 :)
글 정말 잘봤습니다 근데… 한대로 그대로 따라했는데
Error: ENOENT: no such file or directory, mkdir
이런오류가 계속 나네요.. 혹시 왜그런지 아세요 ?ㅠㅠ
안녕하세요? 댓글 확인이 늦었네요.
파일이나 디렉토리를 찾을 수 없다는 것으로 보아, 예제에서 디렉토리 파일을 읽어오는 부분.
‘ var TOKEN_DIR= ‘ 토큰을 저장할 디렉토리를 선언하는 부분이나
‘ client_secret.json ‘ 파일의 위치에서 문제가 생긴게 아닐까 싶습니다.
‘client_secret.json’ 파일을 올바른 디렉토리에 넣었는지, 또는 파일 디렉토리 경로를 수정하시거나
생성하신 서버의 환경에 맞게 토큰을 저장할 디렉토리(‘TOKEN_DIR’)를 새로 지정하시면 되지 않을까 싶습니다.