본문 바로가기

분류 전체보기

 (6)
[React-Native] 메모장 iPhone X 이상의 버전에서 태그는 노치 부분까지 화면을 그린다. 태그를 사용하면 된다. 스크롤되는 화면을 그리기 위해서는 태그를 사용하면 된다. 디바이스의 너비는 Dimensions.get('window').width 리스트는 'FlatList' 새 창을 띄울 때는 'Modal' API 사용은 Fetch, Promise 카카오 로그인 API는 expo 환경에서 사용할 수 없다.
[자바스크립트] Promise Promise Promise는 비동기로 실행되는 작업의 결과를 나타내는 객체이다. new 생성자로 Promise를 생성할 수 있다. 기본 예제 function getData() { return new Promise(function(resolve, reject) { resolve(); reject(); }); } getData() .then() .catch(); Promise의 상태 Pending(대기): new Promise()로 생성하면 대기 상태가 된다. Fulfilled(이행): resolve() 를 실행하면 이행 상태가 된다. Rejected(실패): reject() 를 실행하면 실패 상태가 된다. 여러 개의 Promise를 사용하기 getDate() .then(func1) .then(func2)..
[React-Native] BuilderX로 쉽고 간편하게 디자인하기 BuilderX BuilderX is a browser based design tool that codes React Native & React for you BuilderX는 리액트와 리액트 네이티브를 코딩하는 브라우저 기반 디자인 툴입니다. BuilderX를 접하게 된 계기는 구글링을 통해서였습니다. 필자는 리액트 네이티브 개발을 공부하면서 편리한 UI/UX 디자인 툴이 없을까 생각하다가 검색을 통해 BuilderX를 발견했습니다. 심플한 첫 화면입니다. 해당 사이트에서 스크롤을 내려보니 소개 사진이 있었습니다, 실행 화면 해당 서비스는 위에서 언급한 대로 프로그램이 아닌 브라우저 기반의 서비스입니다. 브라우저에서 구동됩니다. 사진 캡처를 위해 1분만에 컴포넌트들을 배치해보았습니다. 보시다시피 이미 ..
[React-Native] Redux란? (설치, 소개, 예제) Redux 설치 npm install --save react-redux npm install --save redux npm install --save-dev redux-devtools React 바인딩과 개발자 도구가 필요하다. Redux 공식 홈페이지에서는 편안한 개발 경험을 위해 Webpack이나 Browserify 같은 CommonJS 모듈 번들러 사용을 권하고 있다. Redux란? 앱의 상태(state) 전부가 하나의 스토어(store) 안에 있는 객체 트리에 저장된다. 상태 트리를 변경하기 위해서는 액션(action)을 보내는 것뿐이다. 액션이 상태 트리를 어떻게 변경할지 명시하기 위해 리듀서(reducers)를 작성해야 한다. import { createStore } from 'redux' f..
[React-Native] 커스텀 버튼 제작 React-Native 커스텀 버튼 제작 리스트의 컴포넌트를 추가해줄 동그란 + 버튼이 필요했다. 를 이용하여 버튼 효과를 주기로 했다. import React, { Component } from 'react'; import { StyleSheet, TouchableOpacity, Text } from 'react-native'; export default class RoundButton extends Component { render() { return ( {this.props.text} ); } } const styles = StyleSheet.create({ button: { backgroundColor: 'green', alignItems: 'center', justifyContent: 'cent..
[자바스크립트/ECMAScript6/ES6] Arrows Function, 화살표 함수 화살표 함수 표현은 function 표현보다 축약하여 사용할 수 있는 기능이다. 자신의 this, arguments, super, new.target은 바인딩하지 않는다. 화살표 함수는 항상 익명이다. 메서드 함수가 아닌 곳에 가장 적합하므로 생성자로서 사용할 수 없다. 기본 구문 (param1, param2, …, paramN) => { statements } (param1, param2, …, paramN) => expression // 다음과 동일함: => { return expression; } // 매개변수가 하나뿐인 경우 괄호는 선택사항: (singleParam) => { statements } singleParam => { statements } // 매개변수가 없는 함수는 괄호가 필요: (..

티스토리툴바