A New Life

수업내용 1교시 (09:30-10:20) AugularJS, TypeScript비교 → Vue TypeScript: JS 문법에 타입 정보, 코드 검사 기능이 추가된 언어, 단방향 AugualarJS: 타입스크립트 기반, 양방향 Vue의 장점: 쉽다, 작은 사이즈, VirtualDOM 2교시 (10:30-11:20) vue_01.html {{message}} vue_01.jsp {{message}} vue_02.html vue_03.html 입력된 이름 : vue_04.html 좋아하는 과일을 모두 골라주세요 : 사과 키위, 포도, 수박, 참외 선택한 과일들 : 3교시 (11:30-12:20) 프로젝트 진행 4교시 (12:30-13:20) 프로젝트 진행 5교시 (14:30-15:20) 프로젝트 진행 6교..

수업내용 1교시 (09:30-10:20) 066/App.js import React from 'react'; import ReactonClick from './R066_ReactonClick' function App() { return ( Start React 200! ); } export default App; R066_ReactonClick.js import React, { Component } from 'react'; import './App.css'; // 카멜 케이스 // 합성어를 낙타봉 처럼 쓰는 것 // 합성의 첫 번째 글자를 대문자로 쓰는 것 // ComponentButton : Upper Camel Case // stateButton : Lower Camel Case class R066_..

수업내용 1교시 (09:30-10:20) 059/App.js import React from 'react'; import FetchGet from './R059_FetchGet'; import './App.css'; function App() { return ( Start React 200! ); } export default App; R059_FetchGet.js import React, { Component } from 'react'; class R059_FetchGet extends Component { componentDidMouunt = async () => { const response = await fetch('http://date.jsontest.com/'); const body = awa..

수업내용 1교시 (09:30-10:20) 044/App.js import React from 'react'; // import './App.css'; import ReactstrapForm from './R044_ReactstrapForm' import 'bootstrap/dist/css/bootstrap.css' function App() { return ( Start React 200! CSS 적용하기 ); } export default App; R044_ReactstrapForm.js import React, { Component } from 'react' import './App.css'; import { Form, Label, Input, Row, Col, FormGroup } from 'rea..

수업내용 1교시 (09:30-10:20) 프로젝트 진행 2교시 (10:30-11:20) 프로젝트 진행 3교시 (11:30-12:20) 프로젝트 진행 4교시 (12:30-13:20) 프로젝트 진행 5교시 (14:30-15:20) 프로젝트 진행 6교시 (15:30-16:20) 프로젝트 진행 7교시 (16:30-17:20) 프로젝트 진행 8교시 (17:30-18:30) 프로젝트 진행 Notes

수업내용 1교시 (09:30-10:20) 034/App.js import React from 'react'; import './App.css'; import ReactstrapAlerts from './R034_ReactstrapAlerts' import 'bootstrap/dist/css/bootstrap.css' function App() { return ( Start React 200! CSS 적용하기 ); } export default App; // npm install reactstrap --save // npm install bootstrap --save R034_ReactstrapAlerts.js import React, { Component } from 'react'; import { Al..

수업내용 1교시 (09:30-10:20) 025/App.js import React from 'react'; import './App.css'; import SetState from './R025_SetState' function App() { return ( Start React 200! CSS 적용하기 ); } export default App; R025_SetState.js import React, { Component } from 'react'; class R025_SetState extends Component { constructor (props) { super(props); this.state = { StateString: 'react', } } StateChange = (flag) => {..

수업내용 1교시 (09:30-10:20) 019/App.css div { background-color: rgb(162, 127, 243); color: rgb(255, 255, 255); padding: 40px; font-family: 고딕; text-align: center; } h1 { color: white; background-color: #2EFE2E; padding: 10px; font-family: 궁서; } 019/App.js import React from 'react'; import './App.css'; import PropsBoolean from './R019_PropsBoolean' function App() { return ( Start React 200! CSS 적용하기 )..

수업내용 1교시 (09:30-10:20) 리액트 재설명 2교시 (10:30-11:20) 016/App.js import React from 'react'; import './App.css'; import Jquery from './R016_Jquery' function App() { return ( Start React 200! CSS 적용하기 ); } export default App; // # npm install jquery // npm init -y // 1. create-react-app 016 // 2. cd 016 // 3. 016>npm start 016/App.css div { background-color: rgb(162, 127, 243); color: rgb(255, 255, 255..

수업내용 1교시 (09:30-10:20) 지난 시간 복습 CRA : React, ReactDOM, babel, webpack props, state가 데이터에서 중요 2교시 (10:30-11:20) 014/App.css .div { background-color: rgb(162, 127, 243); color: rgb(255, 255, 255); padding: 40px; font-family: 고딕; text-align: center; } h1 { color: white; background-color: #2EFE2E; padding: 10px; font-family: 궁서; } 014/App.js import React from 'react'; import './App.css'; import ForE..

수업내용 1교시 (09:30-10:20) 프로젝트 진행 2교시 (10:30-11:20) 프로젝트 진행 3교시 (11:30-12:20) 프로젝트 진행 4교시 (12:30-13:20) 프로젝트 진행 5교시 (14:30-15:20) 프로젝트 진행 6교시 (15:30-16:20) 프로젝트 진행 7교시 (16:30-17:20) 프로젝트 진행 8교시 (17:30-18:30) 프로젝트 진행 Notes

수업내용 1교시 (09:30-10:20) 프로젝트 진행 2교시 (10:30-11:20) 프로젝트 진행 3교시 (11:30-12:20) 프로젝트 진행 4교시 (12:30-13:20) 프로젝트 진행 5교시 (14:30-15:20) 프로젝트 진행 6교시 (15:30-16:20) 프로젝트 진행 7교시 (16:30-17:20) 프로젝트 진행 8교시 (17:30-18:30) 프로젝트 진행 Notes