Data Scientist 옌

매일 발전하는 IT문제해결사

728x90

국비지원교육 (22.01-22.07)/강의노트 117

22-07-14(목) 116일차 [Vue, Team Project] Vue란

수업내용 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교..

22-07-13(수) 115일차 [React, Team Project] React onClick, onChange, OnKey, redux, 리눅스란

수업내용 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_..

22-07-12(화) 114일차 [React, Android, Team Project] React의 FetchGet, FetchPost, AxiosGet, AxiosPost, Promise, 안드로이드 Hello Android!

수업내용 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..

22-07-11(월) 113일차 [React, Android, Team Project] React의 Reactstrapform, ReactstrapListGroup, ReactstrapModal, ReactstrapTable, 안드로이드 스튜디오 설치

수업내용 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..

22-07-07(목) 111일차 [React, MongoDB, Node.js, Team Project]

수업내용 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..

22-07-06(수) 110일차 [React, MongoDB, Node.js, Team Project] React SetState, ComponentClass, FunctionComponent, Fragment, Node.js mongoose로 MongoDB연결 후 암호화하여 사용자 입력 및 로그인

수업내용 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) => {..

22-07-05(화) 109일차 [React, MongoDB, Node.js, Team Project] React Props, state, MongoDB Node.js로 유저 추가 및 로그인

수업내용 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 적용하기 )..

22-07-04(월) 108일차 [React, MongoDB, Node.js, Team Project] React jQuery, props, MongoDB 설치 및 Node.js 연결

수업내용 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..

22-07-01(금) 107일차 [React, Python, Team Project] React ForEach, Map, Python flask 서버에서 톰캣 서버로 데이터 이동

수업내용 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..

728x90