프로그래밍/ReactJS, React Native 썸네일형 리스트형 React Native 의 Mac 애뮬레이터로 실행해 보기 https://dev-yakuza.github.io/ko/react-native/installation/ RN 설치 react-native를 설치하고 프로젝트가 동작하는지 확인한다. dev-yakuza.github.io 위의 사이트를 통해 설치하는데 오랜 시간이 걸렸지만 실행해서 애뮬레이터로 띄우는것 까지 해봤다. 파일 구조는 아래와 같다. react-native run-ios 를 통해 터미널로 실행한 부분입니다. 실행중에 자동적으로 터미널이 하나 더 생기면서 js 파일을 bundler 하는 작업을 수행합니다. 이 시간이 정말 많이 걸리더군요. 기다리다보면, 애뮬레이터에 최종 결과물을 아래와 같이 보여줍니다. 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.폴더 구조.. ReactJS 를 mac 환경에서 설치해보기 ReactJS 작업환경 설정하기https://velopert.com/814 webpack2 입문 가이드 및 설치https://hyunseob.github.io/2017/03/21/webpack2-beginners-guide/위의 사이트를 참고로 구성해 봤습니다. 폴더를 만들고, 해당 폴더 안에서 webpack 를 설치합니다.yarn add --dev webpackCSS 를 bundle 로 처리하기 위해서...yarn add --dev style-loader css-loaderie 환경에서도 ES2015 사용하기 위해 babel 설치합니다..yarn add --dev babel-loader babel-core babel-preset-env유명한 JavaScript 라이브러리인 Lodash 를 설치해 봅니다.. 이전 1 다음
