환경 : Visual Studio Code 1) 먼저 프로젝트 생성 및 부트 스트랩 설치 npm create-react-app demo05 --skip-git cd demo05 npm i bootstrap npm i bootswatch npm start 2) index.js 파일에 임포트 추가 - 추가한 코드 //bootstrap import "bootstrap/dist/css/bootstrap.min.css"; import "bootswatch/dist/cosmo/bootstrap.min.css"; import './index.css'; //위치 변경 - index.js 전체 코드 import React from 'react'; import ReactDOM from 'react-dom/client'; ..

환경 : Visual Studio Code 이전글과 이어지는 연습 입니다 (참고 : https://ggingggang05.tistory.com/219) [ 실습 1 : 은행 이체 화면 문제 ] - Ex04.js //import import { useState } from "react"; //function function Ex04(){ const [money, setMoney] = useState(0); return( 은행 이체 화면 문제 원 setMoney(money + 1000000)}>100만 setMoney(money + 500000)}>50만 setMoney(money + 100000)}>10만 setMoney(money + 50000)}>5만 setMoney(money + 10000)}>1만 ..

환경 : Visual Studio Code 리액트를 사용하여 기본 컴포넌트 배치를 해보자 위와 같은 구조로 위치를 설정해보자 components 폴더 안에 Ex01.js / Ex02.js 파일을 만든다 - Ex01.js //import //function function Ex01(){ return ( 1번화면 ); } //export export default Ex01; - Ex02.js //import //function function Ex02(){ return( 2번화면 ); } //export export default Ex02; - App.js //JS파일의 최상단에는 import 키워드가 들어온다 // - 이미지, CSS, 다른 JS 파일 등을 불러올 수 있다 // - ES6 Module 시스..

[1] demo02 프로젝트 생성npx create-react-app demo01깃허브 설정 제거 후 프로젝트 생성npx create-react-app demo01 --skip-git [2] demo02 프로젝트 실행cd demo02npm start  [3] 각자 작업할 환경에서 App.js 파일 수정import logo from './logo.svg';import './App.css';function App() { return ( React 실습 구글로 이동 네이버로 이동 카카오로 이동 );}export default App;   (+) 리액트는 전체를 감싸는 태그 하나만 허용한다.   [4] 결과 확인 프로젝트 종료는 cmd에서 Ctrl+C하면 ..