[#8 채팅기능 구현하기] 환경 구축부터 스토어 출시까지 디데이 앱 따라 만들며 배우는 React Native
2020. 11. 27. 12:50
Develop/React-Native
리액트 네이티브 튜토리얼 [#1 리액트 네이티브 맛보기] [#2 Component와 메인화면 분할] [#3 레이아웃 구성하기] [#4 레이아웃 구현 마무리하기] [#5 state] [#6 설정 Modal 만들기] [#7 설정 Modal 기능 추가하기] [#8(구현 끝) 채팅기능 구현하기] 드디어 기능구현의 마지막인 채팅기능을 구현하게됩니다. 새로 이용하는 개념은 별로 없고 이전에 사용했던 asyncstorage를 이용해서 구현합니다. // App.js export default class App extends React.Component { constructor(props) { super(props); this.state = { dday: new Date(), ddayTitle: '', chatInput..
[#7 설정 Modal 기능 추가하기] 환경 구축부터 스토어 출시까지 디데이 앱 따라 만들며 배우는 React Native
2020. 11. 17. 13:56
Develop/React-Native
리액트 네이티브 튜토리얼 [#1 리액트 네이티브 맛보기] [#2 Component와 메인화면 분할] [#3 레이아웃 구성하기] [#4 레이아웃 구현 마무리하기] [#5 state] [#6 설정 Modal 만들기] [#7 설정 Modal 기능 추가하기] [#8(구현 끝) 채팅기능 구현하기] 이번 글에서는 설정 모달의 기능들을 구현해보겠습니다. 가장 먼저 모달 외부를 눌렀을 때, 모달창이 닫히게 해보겠습니다. //App.js export default class App extends React.Component { constructor(props) { super(props); this.state = { dday: new Date(), ddayTitle: '테스트 디데이', chatLog: [], settin..
[#6 설정 Modal 만들기] 환경 구축부터 스토어 출시까지 디데이 앱 따라 만들며 배우는 React Native
2020. 11. 15. 13:39
Develop/React-Native
리액트 네이티브 튜토리얼 [#1 리액트 네이티브 맛보기] [#2 Component와 메인화면 분할] [#3 레이아웃 구성하기] [#4 레이아웃 구현 마무리하기] [#5 state] [#6 설정 Modal 만들기] [#7 설정 Modal 기능 추가하기] [#8(구현 끝) 채팅기능 구현하기] 이번시간에는 설정 버튼을 눌렀을 때, 디데이 제목과 날짜를 설정할 수 있는 모달창을 만들어 보겠습니다. 먼저 Setting컴포넌트를 만들기 위해 새로운 js파일을 생성할 거에요. App.js가 있는 프로젝트 폴더에 Setting.js를 생성해주세요. //Setting.js import React from 'react'; import {View, StyleSheet, Text, TextInput, TouchableOpac..
[#5 state] 환경 구축부터 스토어 출시까지 디데이 앱 따라 만들며 배우는 React Native
2020. 9. 30. 17:54
Develop/React-Native
리액트 네이티브 튜토리얼 [#1 리액트 네이티브 맛보기] [#2 Component와 메인화면 분할] [#3 레이아웃 구성하기] [#4 레이아웃 구현 마무리하기] [#5 state] [#6 설정 Modal 만들기] [#7 설정 Modal 기능 추가하기] [#8(구현 끝) 채팅기능 구현하기] 이제 앱의 기능인 Dday기능을 구현해야하는데, 문자열 정보와 d-day정보가 필요하겠네요! react native에서는 state라는 것을 이용하면 구현할 수 있습니다. // App.js export default class App extends React.Component { constructor(props) { super(props); this.state = { } } ... 생략 } App.js의 앞부분에 con..
[#4 레이아웃 구현 마무리하기] 환경 구축부터 스토어 출시까지 디데이 앱 따라 만들며 배우는 React Native
2020. 9. 30. 17:43
Develop/React-Native
리액트 네이티브 튜토리얼 [#1 리액트 네이티브 맛보기] [#2 Component와 메인화면 분할] [#3 레이아웃 구성하기] [#4 레이아웃 구현 마무리하기] [#5 state] [#6 설정 Modal 만들기] [#7 설정 Modal 기능 추가하기] [#8(구현 끝) 채팅기능 구현하기] 안녕하세요! 올해 1월에 #3까지 작성한 후, 업로드를 하지 못하였는데 마무리는 지어야 할것 같아 다시 글을 작성합니다! #3까지 진행하면서 setting과 Dday부분은 뷰가 완성되었어요. 이제 Chat부분을 작업해볼거에요. 현재 전송버튼은 보이는데 입력값을 받을 Input은 화면엔 보이지 않아요. 그 이유는 width를 지정해주지 않았기 때문이에요. //App.js const styles = StyleSheet.cr..
release 버전에서 axios 에러가 발생하는 경우
2020. 9. 3. 20:14
Develop/React-Native
github.com/facebook/react-native/issues/24039#issuecomment-518687649 Network request Issues with react native 0.59 · Issue #24039 · facebook/react-native 🐛 Bug Report Hello, I recently encountered a problem with the network requests of my app. Before version 0.59 the requests to my API worked perfectly but since this version the requests to my API n... github.com added these to my /android/app/s..
[1일 1깡 어플] 1일 N깡이 출시 되었습니다~~!
2020. 5. 24. 12:43
Develop/React-Native
1일 1깡이 대세인 요즘 1일 3깡. 1일 7깡 프로 깡러분들이 많아졌습니다. 그들을 위한 깡 랭킹앱을 개발했습니다! 깡 영상 3분을 보면 1깡이 적립되고 오늘 나의 등수를 알아보세요! -아직 플레이스토어에 등록한지 얼마되지 않아 검색으로는 나오지 않습니다!!.. https://play.google.com/store/apps/details?id=com.odmg 1일 N깡 - One Day Many Gang (1일 1깡 어플) - Google Play 앱 요즘 대세인 1일 1깡! No No 1일 3깡은 해야지! 오늘 몇깡 했는지 알아보고 오늘 랭킹을 확인해보세요. 오늘의 깡 탑3는 누가 될까요? - 깡 영상을 3분 보면 1깡이 추가됩니다. play.google.com
[#3 레이아웃 구성하기] 환경 구축부터 스토어 출시까지 디데이 앱 따라 만들며 배우는 React Native
2020. 1. 21. 13:58
Develop/React-Native
리액트 네이티브 튜토리얼 [#1 리액트 네이티브 맛보기] [#2 Component와 메인화면 분할] [#3 레이아웃 구성하기] [#4 레이아웃 구현 마무리하기] [#5 state] [#6 설정 Modal 만들기] [#7 설정 Modal 기능 추가하기] [#8(구현 끝) 채팅기능 구현하기] #2 에서는 flex를 이용해 view를 분할해보았습니다. 이번 시간에는 각 컴포넌트들을 넣어주고 스타일을 통해 자리를 잡아주는 작업을 해볼거에요. Component 생성 가장 먼저 setting은 image에 터치를 할 수 있게 해주는 TouchableOpacity를 이용하여 구현할거에요. 아이콘은 위의 png파일을 사용할거에요. 다운로드 받고, 프로젝트폴더에 icon폴더를 만들고 그 안에 넣어주세요. //App.js..
[#2 Component와 메인화면 분할] 환경 구축부터 스토어 출시까지 디데이 앱 따라 만들며 배우는 React Native
2020. 1. 20. 12:34
Develop/React-Native
리액트 네이티브 튜토리얼 [#1 리액트 네이티브 맛보기] [#2 Component와 메인화면 분할] [#3 레이아웃 구성하기] [#4 레이아웃 구현 마무리하기] [#5 state] [#6 설정 Modal 만들기] [#7 설정 Modal 기능 추가하기] [#8(구현 끝) 채팅기능 구현하기] 저번시간에는 리액트 네이티브가 무엇인지와 간단한 맛보기만 진행했는데, 이번시간에는 본격적으로 주로 사용되는 Component를 이용해서 간단한 메인화면을 구현 해 보겠습니다. View UI를 구성할 때 가장 기본이 되는 컴포넌트 입니다. //App.js import React from 'react'; import { StyleSheet, Text, View } from 'react-native'; export defau..
[#1 리액트 네이티브 맛보기] 환경 구축부터 스토어 출시까지 디데이 앱 따라 만들며 배우는 React Native
2020. 1. 20. 03:51
Develop/React-Native
리액트 네이티브 튜토리얼 [#1 리액트 네이티브 맛보기] [#2 Component와 메인화면 분할] [#3 레이아웃 구성하기] [#4 레이아웃 구현 마무리하기] [#5 state] [#6 설정 Modal 만들기] [#7 설정 Modal 기능 추가하기] [#8(구현 끝) 채팅기능 구현하기] 시작에 앞서 리액트 네이티브가 무엇인지 어떻게 사용되는지 잠시 알아보고 가도록 하겠습니다 리액트 네이티브가 뭘까? React Native는 Facebook에서 만든 오픈 소스 모바일 응용 프로그램 프레임 워크입니다. 개발자가 기본 플랫폼 기능과 함께 React를 사용할 수 있도록하여 Android, iOS, 웹 및 UWP 용 애플리케이션을 개발하는 데 사용됩니다. -위키백과 Facebook에서 만든 모바일 앱 개발용 오..