프로그래밍/ReactJS, React Native (9) 썸네일형 리스트형 React, Redux, and Firebase 로 todo 앱 만들기 A Simple Todo App withe React, Redux, and Firebase https://github.com/rajatk16/firedux-todo firebase 은 realtime database 에서 추가, 삭제가 이루어 진다. React와 함께 Redux 라이브러리를 사용하여이 앱의 상태를 관리합니다. Redux는 ToDo 앱처럼 단순한 앱에는 필요하지 않지만 Redux를 다른 React App에 추가하는 데 필요한 단계를 이해하는 데 도움이됩니다!Google의 Firebase는이 애플리케이션에서 사용할 놀라운 기술 중 하나입니다. Firebase는 인증, 저장, 테스트 및 데이터베이스와 같은 다양한 기능과 서비스를 제공 할 수 있습니다. 그러나이 게시물에서는 파이어베이스를 사용하.. React 를 통해 Firebase Authentication 사용해 보기 React 를 통해 Firebase Authentication 사용해 보기 필자는 Firebase로 인증을 완료하고 React를 신속하게 처리하기위한 간단한 가이드를 작성하고자했습니다.나는 여기서 매우 직접적이고 직설적 일 것이다. 인증 된 경로와 같은 엣지 경우를 다루지 않거나 오류 메시지를 올바르게 표시하지 않겠습니다.이 튜토리얼에서는 기본적인 Google 인증을 수행하는 데 필요한 최소한의 변경 만 수행 할 것입니다.우리는 몇 가지 오픈 소스 프로젝트를 사용할 것입니다.https://github.com/nodejs/nodehttps://github.com/facebook/reacthttps://github.com/facebook/create-react-apphttps://github.com/arma.. React App 을 Surge 에 배포해 보기 React App 을 Surge 사이트에 배포하는 방법에 대해 알아보고자 합니다. 해당 사이트는 https://surge.sh/ 이며 배포하는 방법이 매우 쉽습니다. 이는 단지 html , css , js 로 구성된 소스는 전부 무료로 사용이 가능하며, 배포시에는 서브도메인 별도로 제공해 줍니다. React App 을 개발하면 이를 배포하기 위해 build 명령어를 사용할 필요가 있는데요. npm run build 명령어를 실행하면 build 폴더가 생성되면서 해당 폴더 내에 optimized 되어 소스가 저장됩니다.해당 build 폴더의 내용을 surge 사이트에 배포해 보겠습니다. ✘ shimjaewoon@shimjaewoonui-MacBook-Air ~/desktop/work/react/reac.. React 의 props 활용하기 - codepen https://codepen.io/shimjaewoon/pen/xzOowp?editors=1010 ; class Codelab extends React.Component{ render(){ return( hello {this.props.name} {this.props.children} ); }} class App extends React.Component{ render(){ return( {this.props.children} ); }} ReactDOM.render(luckshim,document.getElementById('root')); react 에서 props 를 활용한 방법입니다. "this.props.속성"을 의미하며, this.props.children 은 내용 양쪽 태그 글 내용에 표현됩니다. react.js 로 gatsby.js 를 활용하여 IIS 환경에 구동시키기 react.js 로 gatsby.js 를 활용하여 IIS 환경에 구동시키기 reactjs 를 구현함에 있어서 static site generator 를 만들어 보기 위해 gatsby.js 를 사용해 보기로 하였습니다.https://www.gatsbyjs.org/ 1. node.js 를 설치합니다. (https://nodejs.org/en/download/)2. gatsby 의 cli 를 npm 명령어로 설치합니다. npm install --global gatsby-cli3. 이제 gatsby 를 생성해 봅니다. 이름은 react-gatsby 라고 기재하면 해당 폴더가 생성되면서 기본적인 reactjs 파일이 생성됩니다.gatsby new react-gatsby4. 설치 완료되면 이제 개발모드 환경에서 실.. expo 에서 push notifications tool 활용하기 expo 에서 push notifications tool 을 온라인 화면에서 제공해 주는데요. https://expo.io/dashboard/notifications 해당 툴을 테스트로 사용할 땐, push 의 token 값은 애뮬레이터에서 얻을 수 없고 꼭 안드로이드나 아이폰 기기에서 얻을 수 있습니다. import React, { Component } from 'react';import { StyleSheet, Text, View } from 'react-native'; import Expo from 'expo';import { TextInput } from 'react-native-gesture-handler'; //var { ivalue } = ""; async function getToken().. React Native 와 Expo 연동하여 맥 환경에서 ios 애뮬레이터 실행해보기 Expo 는 말대로 무료이며 오픈소스이고, React 와 JavaScript 를 사용하여 ios 그리고 안드로이드를 native 하게끔 도와주는 것이라고 생각하면 됩니다. 사이트 주소는 https://expo.io/ 입니다. 우선 회원가입을 합니다.로그인을 하면 Tools 라는 메뉴가 있습니다. 이를 선택하시고, 5가지 아이콘 중에 목록중에 XDE 를 선택합니다.화살표에 표기되어 있는 download from github 를 선택하여 사이트 이동합니다.맥북이면 xde-2.22.1.dmg 를 다운받아 설치하며, 윈도우라면 xde-setup-2.22.1.exe 파일을 다운로드 받습니다. 다운로드 받아 설치한 다음 응용프로그램에서 실행합니다.여기서 신규 생성을 하고자 한다면 Create new project .. mac 환경에서 create-react-app 으로 react 실행해 보기 https://github.com/facebookincubator/create-react-app npm 을 설치하고 나서 react 를 간단하게 실행해 보기 위해서 create-react-app 을 설치하고 프로젝트를 생성합니다.npm start 하면 크롬 새창이 뜨면서 브라우저에 실행이 됩니다.Quick Overviewnpm install -g create-react-app create-react-app my-app cd my-app/ npm startThen open http://localhost:3000/ to see your app. When you’re ready to deploy to production, create a minified bundle with npm run build.폴더 구조.. 이전 1 2 다음
