기록하기록

이번 시간에는 간단하게 스크롤 뷰에 대해 학습하겠습니다. 걍 뭐 학습이랄 것도 없습니다. Scrollview 태그 안에 넣기만 하면 됩니다. class App extends Component{ state = { appName: 'My first app', random: [1,2,3,4,5] } onAddRandomNum = () => { //alert('add random number'); const randomNum = Math.floor(Math.random()*100)+1; this.setState(prevState => { return { random: [...prevState.random, randomNum] } }) } onNumDelete = (position) => { //alert('de..

이번 시간에는 버튼을 클릭하면 랜덤으로 숫자가 1~100까지 추가되고, 생성된 버튼을 누르면 삭제될 수 있도록 하는 이벤트를 배워보겠습니다. App.js 이전 배열에서 추가되는 숫자를 넣기 위해 랜덤 변수를 생성하고, 배열에 append해줍니다. onAddRandomNum = () => { //alert('add random number'); const randomNum = Math.floor(Math.random()*100)+1; this.setState(prevState => { return { random: [...prevState.random, randomNum] } }) } 숫자를 터치하면 숫자가 지워지도록 하기 위한 함수를 생성합니다. filter 함수 특정 조건에 부합하는 요소만 뽑아내서 새..

이번 포스팅에서는 목록을 만들어보려고 합니다. props 개념에 대해 조금씩 이해가 되기 시작했습니다. App.js 조작하기 for문을 출력하기 위해서 먼저 state 값에 배열을 넣어줍니다. 그리고 NumList라는 태그를 만들어서 조각으로 데이터를 쏴줍니다. /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */ import React,{Component} from 'react'; import { View,Text, StyleSheet } from 'react-native'; import Header from './src/header'; import Generator from './sr..

이번 포스팅에서는 버튼을 만들어보려합니다. 버튼 만들기 import React,{Component} from 'react'; import { View,Text, StyleSheet } from 'react-native'; import Header from './src/header'; import Generator from './src/generator'; class App extends Component{ state = { appName: 'My first app' } render(){ return ( alert('text touch event')} >hello world ) } } App.js에서는 왠지 모르겠지만 버튼이라는 이름이 아니라 generator라는 이름으로 버튼을 생성했습니다. genera..

이번 포스팅에서는 state, props를 이용해 데이터를 전송하는 것만 배워보도록 하겠습니다. 이전 포스팅의 자료를 활용할 것입니다. class App extends Component{ state = { appName: 'My first app' } render(){ return ( hello world ) } } state를 생성해준 다음에 변수 이름을 지정해 줍니다. 헤더에 name이라는 속성을 지정하여 해당 변수를 내려줍니다. /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */ import React from 'react'; import { View,Text, StyleSheet..

이번 포스팅에서는 조각을 붙이는 방법을 배우려고 한다. 앱은 조각들을 큰 도화지에다 붙이는 과정이라고 생각하면 된다. 간단하게 header 를 만들어서 도화지에 붙여보려 한다. 저번 포스팅의 코드를 그대로 가져와서 덧붙일 것이다. /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */ import React from 'react'; import { View,Text, StyleSheet } from 'react-native'; // jsx : javaScript xml // const example = hello world // jsx component를 리턴하므로 {} x () o // ..

이번 포스팅에서는 스타일을 꾸며보도록 하겠습니다. 저번 포스팅에서 hello world를 띄우기 완료했다면, 그 소스를 그대로 가지고와서 style 설정을 진행해줍니다. 코드는 web이랑 크게 다른 것 같지 않습니다,. /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */ import React,{Component} from 'react'; import { View,Text, StyleSheet } from 'react-native'; class App extends Component{ render(){ return ( hello world hello world hello world ) ..

맥북도 옛날 버전이라 한번 키는 것도 오래 걸리는 듯 하다... ios 하나 띄우는데 베터리 10퍼 잡아먹는다니.. 오늘은 hello world 띄워보려고 한다. App.js 를 만지는 것으로 설정은 끝이 난다. /** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */ import React,{Component} from 'react'; import { View,Text } from 'react-native'; class App extends Component{ render(){ return ( hello world ) } } export default App; import React,{Co..

dkyou.tistory.com/143 1. RN 환경설정하기 nvm 격리 시키는 역할 gist.github.com/falsy/8aa42ae311a9adb50e2ca7d8702c9af1 NVM(Node Version Manager) 맥OS에서 설치 & 사용하기 NVM(Node Version Manager) 맥OS에서 설치 & 사용하기. GitHub Gist: instan.. dkyou.tistory.com 저번 포스팅에 이어서 작성하려 한다. 프로젝트 만들고 싶은 경로로 이동해서 react-native init --version 0.61.5 my_first_app 작성 cd my_first_app visual studio code에서 시뮬레이터 실행이 잘 되는지 확인해보기 위해 npm start 실행 이..

nvm 격리 시키는 역할 gist.github.com/falsy/8aa42ae311a9adb50e2ca7d8702c9af1 NVM(Node Version Manager) 맥OS에서 설치 & 사용하기 NVM(Node Version Manager) 맥OS에서 설치 & 사용하기. GitHub Gist: instantly share code, notes, and snippets. gist.github.com 1. 설치 sudo curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash 2. 확인 vi ~/.bash_profile 접속 후 export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm..