React사용자 인터페이스를 만들기위한 javascript 라이브러리대표적인 자바스크립트 UI 라이브러리 예 - AngularJS, React, View SPA (Single Page Application)서버에서 필요한 데이터만 비동기로 받아와서 동적으로 현재 화면에 다시 렌더링 하는 방식을 의미합니다. 사용자가 애플리케이션과 상호작용할 때마다 서버에 요청하여 전체 HTML 화면을 받아오는 방식이 아니라, 화면 렌더링을 로컬 PC에서 즉시 생성하므로 더 빠르게 화면 전환을 처리할 수 있어서 널리 사용되고 있습니다.SPA가 ‘단일 페이지 애플리케이션’이라고 일컬어지지만, 하나의 페이지만 존재하는 애플리케이션을 의미하지는 않습니다. SPA도 여러 페이지가 존재하는데요. 다수의 페이지를 표시하는 데 있어서 ..

React 비동기 - 사진 출력하기 온라인 코딩툴 사이트 : https://snack.expo.dev/ 코드전체 : https://snack.expo.dev/@rebornborn/happy-almond?platform=ios Dog.js import styled from 'styled-components'; import { useFetch } from './useFetch' // ` ESC키 하단에 있는 EC6기반의 변수할당하는 문법 const StyledImage = styled.Image` background-color: #7f8c8d; width: 300px; height: 300px; `; const ErrorMessage = styled.Text` font-size: 18px; color: #e..

React 다크모드버튼, 카운트버튼 만들기 온라인 코딩툴 사이트 : https://snack.expo.dev/ package.json { "dependencies": { "expo-constants": "~13.2.4", "@expo/vector-icons": "^13.0.0", "react-native-paper": "4.9.2", "prop-types": "15.7.2", "styled-components": "4.2.0" } } Counter.js import {useState} from 'react'; //import 2개이상일 경우 중괄호 {} import {View, Text} from 'react-native'; //외장컴포넌트를 가져다 씀 (import) import MyButton fro..

React 초보자 입문강의 정리 설명출처영상 : https://www.youtube.com/watch?v=qcphnSqneE0 123탄 온라인 코딩툴 사이트 : https://replit.com/ 리액트의 장점 1. 리액트는 자동으로업데이트를 해준다. 2. 코드 재활용을 많이한다 3. 코드정리가 깔끔하다 - html + javascript = JSX문법 App.jsx import './App.css' export default function App() { return ( rebornborn⚛️ + Vite ⚡ + Replit 🌀 ) } 여기 내용이 웹사이트에서 보일내용이다. 안에 내용을 입력하고 수정해보자 , reflesh하지 않아도 자동으로 업데이트 되는 것 을 확인 할 수 있다. 이것의 원리가 무엇..