본문 바로가기

프로그래밍/ReactJS, React Native

React 의 props 활용하기 - codepen https://codepen.io/shimjaewoon/pen/xzOowp?editors=1010<div id="root" />;class Codelab extends React.Component{ render(){ return( <div> <h1>hello {this.props.name}</h1> <div>{this.props.children}</d..
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 g..
expo 에서 push notifications tool 활용하기 expo 에서 push notifications tool 을 온라인 화면에서 제공해 주는데요.https://expo.io/dashboard/notifications해당 툴을 테스트로 사용할 땐, push 의 token 값은 애뮬레이터에서 얻을 수 없고 꼭 안드로이드나 아이폰 기기에서 얻을 수 있습니다. import React, { Component } from 'react';import { StyleSheet, Text, View ..
React Native 와 Expo 연동하여 맥 환경에서 ios 애뮬레이터 실행해보기 Expo 는 말대로 무료이며 오픈소스이고, React 와 JavaScript 를 사용하여 ios 그리고 안드로이드를 native 하게끔 도와주는 것이라고 생각하면 됩니다. 사이트 주소는 https://expo.io/ 입니다. 우선 회원가입을 합니다.로그인을 하면 Tools 라는 메뉴가 있습니다.  이를 선택하시고, 5가지 아이콘 중에 목록중에 XDE 를 선택합니다.화살표에 표기되어 있는 download from github..
mac 환경에서 create-react-app 으로 react 실행해 보기 https://github.com/facebookincubator/create-react-appnpm 을 설치하고 나서 react 를 간단하게 실행해 보기 위해서 create-react-app 을 설치하고 프로젝트를 생성합니다.npm start 하면 크롬 새창이 뜨면서 브라우저에 실행이 됩니다.Quick Overviewnpm install -g create-react-app create-react-app my-app cd my-app/ npm st..
ReactJS 를 mac 환경에서 설치해보기 ReactJS 작업환경 설정하기https://velopert.com/814webpack2 입문 가이드 및 설치https://hyunseob.github.io/2017/03/21/webpack2-beginners-guide/위의 사이트를 참고로 구성해 봤습니다.폴더를 만들고, 해당 폴더 안에서 webpack 를 설치합니다.yarn add --dev webpackCSS 를 bundle 로 처리하기 위해서...yarn add --dev style-load..