me made it !

flexDirection웹rowreact nativecolumn import { StatusBar } from 'expo-status-bar'; import React from "react" import {View} from 'react-native'; export default function App() { return ( ); } import { StatusBar } from 'expo-status-bar'; import React from "react" import {View} from 'react-native'; export default function App() { return ( ); } 부모의 flex 수치는 자식들의 flex값의 기준이 되는 값이다 ( 즉 값이 변경되어도 자식들의 크기은 ..

StyleSheet.create({}) 를 쓰는 이유 1. 아주 좋은 자동 완성 기능을 제공한다. 2. 스타일 component 를 정리하는데 유용하다 ( 물론, 필수는 아님 ) 1. div = > 를 쓴다 react native로 부터 view import 는 필수 2. 모든 텍스트는 text component 안에 있어야함 3. 원하는 대로 styles를 쓸 수 있다 ! 상태바 자동 적용!

Snack 을 아시나요.. ? snack이란? Expo Snack is an open-source platform for running React Native apps in the browser. It dynamically bundles and compiles code and runs it in the Expo Go or in a web-player. https://snack.expo.dev/ Snack - React Native in the browser Write code in Expo's online editor and instantly use it on your phone. snack.expo.dev react 코드를 바로바로 android / IOS / web 등의 환경에서 잘 돌아가는지 볼 수..

https://nomadcoders.co/react-for-beginners render() : 사용자에게 보여준다는 의미 1 . import React JS , React-DOM React JS : element 생성, event listener 더하는 것 도와주는 역할, interactive power React-DOM : react element을 가져다가 HTML 로 바꿈 이 곳 비어있는 div 는 React-DOM이 React element 들을 가져다놓을 곳임 막줄 : ReactDOM.render(container, root); 이 코드의 의미는 react element 들을 root div 안에서 보여주라는 뜻 react 는 element 에 event listener 를 달수 있다는 점에서..

불가능 !! ! ! return( ) ) component 사용 {/* 제목 날짜 상세내용 */} /* eslint-disable*/ import React, { useState } from 'react'; import logo from './logo.svg'; import './App.css'; function App() { let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집', '강남 고기 맛집','강남 냉면 맛집']); let [음표, 음표변경] = useState(0); let posts = '강남 고기 맛집'; // 음표변경('대체할 데이터'); => 함수! // function 제목바꾸기(){ // var newArray = [...글제목]; // new..

/* eslint-disable*/ import React, { useState } from 'react'; import logo from './logo.svg'; import './App.css'; function App() { let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집', '강남 고기 맛집','강남 냉면 맛집']); let [음표, 음표변경] = useState(0); let posts = '강남 고기 맛집'; // 음표변경('대체할 데이터'); => 함수! let [버튼, 버튼변경] = useState(글제목[2]); return ( 개발 Blog { 글제목[1] } {음표변경(음표 + 1)} }>♬ {음표} 2월 17일 발행 {버튼} {버튼변경('강..

코드 치는 동시에 결과물을 확인하는 방법 npm start 변수명에 저장하기 import logo from './logo.svg'; import './App.css'; function App() { let posts = '강남 고기 맛집'; return ( 개발 Blog { posts } 2월 17일 발행 { posts } 2월 17일 발행 ); } export default App; 자바스크립트 문법 사용 var [a,b] = [10, 100]; state import React, { useState } from 'react'; import logo from './logo.svg'; import './App.css'; function App() { let [글제목, 글제목변경] = useState('남..

node.js의 가장 최신 버전을 설치한 후 Creating an App 을 하기 위해 npx create-react-app my-app 를 복사 - 붙여넣기 를 해준다 이 때, 이와 같은 오류가 뜬다면 당신의 터미널의 오류이다 ! 현재 기본 터미널이 powershell 로 되어있는 것이 문제의 원인임 [해결방법] 1. ctrl + shift +p 2. terminal : select defalut profile 3. cmd 선택 하면 완 . 일줄 알았으나 이번엔 두번째 오류가 발생한다. 이 경우는 npm error인 것이므로 .... ! If you use npm 5.1 or earlier, you can't use npx. Instead, install create-react-app globally:..