728x90
수업내용
1교시 (09:30-10:20)
- 066/App.js
import React from 'react';
import ReactonClick from './R066_ReactonClick'
function App() {
return (
<div>
<h1>Start React 200!</h1>
<ReactonClick/>
</div>
);
}
export default App;- R066_ReactonClick.js
import React, { Component } from 'react';
import './App.css';
// 카멜 케이스
// 합성어를 낙타봉 처럼 쓰는 것
// 합성의 첫 번째 글자를 대문자로 쓰는 것
// ComponentButton : Upper Camel Case
// stateButton : Lower Camel Case
class R066_ReactonClick extends Component {
buttonClick = (param) => {
if(typeof param != 'string') param = "Click a"
console.log('param : ' + param);
}
render() {
return (
<>
<button onClick={e => this.buttonClick("Click button")}>Click button</button>
<div onClick={e => this.buttonClick("Click div")}>Click div</div>
<a href="javascript:" onClick={this.buttonClick}>Click a</a>
</>
)
}
}
export default R066_ReactonClick;
- 067/App.js
import React from 'react';
import R067_onChange from './R067_onChange'
function App() {
return (
<div>
<h1>Start React 200!</h1>
<R067_onChange/>
</div>
);
}
export default App;- R067_onChange.js
import React, { Component } from 'react';
import './App.css';
class R067_onChange extends Component {
change = (e) => {
var val = e.target.value;
console.log('param : ' + val);
}
render() {
return (
<>
<input type="text" onChange={this.change}/>
<select onChange={this.change}>
<option value="react">react</option>
<option value="200">200</option>
</select>
</>
)
}
}
export default R067_onChange;
- 리눅스
--------------
리눅스는 GNU OS 이다.
리눅스의 라이센스라던지 기타 제반 사항들은 모두 GNU를 따르게 되어 있습니다.
배포판 : 레드헷 7.0, 8.0, SUSE 9.0
커널 : 커널 2.6.6, 커널 2.530
: 커널 버전 두번째 숫자가 짝수 면 안정화 버전, 홀수 면 개발버전
수세(OpenSUSE) : 서버용 : 독일에서 출시 : 유럽에서 많이 사용 : 안정적인 리눅스 : 국내에는 자료가 별로 없음
데비안(Debian) : 서버용 : 배포되는 리눅스 들 중 안정성이 매우 높고, 다양한 패키지 활용, 서버용
: ORG 비영리 단체에서 만들며, 완벽한 GNU를 추구
우분투(Ubnutu) : 개인용 : 데비안 계열
: APT(Advanced Package Tool)
레드햇(Red Hat) : 서버용 : 현재 레드햇은 상용으로 판매되는 레드햇 엔터프라이즈 리눅스(RHEL)
: RPM(Redhat Package Management)으로 인기
페도라(Fedora) : RHEL에 포함될 기능을 미리 시험하는 용도로 사용 : 레드햇 계열
센트OS(centOS) : 개인용 : 레드햇 계열
한컴리눅스 : 데스크탑 운영체제를 추구한다.
리눅스용 한글프로그램을 만들어서,
리눅스를 사무용, 개인용으로 일반 사용자들이 쉽게 사용할 수 있도록 만들고 있다.
와우 : 서버급 운영체제, 한글화나 유저들이 좀더 쉽게 사용할수 있도록 프로그램을 만든다.
초보자 : 우분투
해킹용 : 칼리 리눅스(Kali linux)
서버용 : RHEL(유료), centOS(무료)
전문가용 : 페도라
2교시 (10:30-11:20)
- 071/App.js
import React from 'react';
import ReactOnKey from './R071_OnKey'
function App() {
return (
<div>
<h1>Start React 200!</h1>
<ReactOnKey/>
</div>
);
}
export default App;- R071_OnKey.js
import React, { Component } from 'react';
import './App.css';
class R071_OnKey extends Component {
OnKey(event, e) {
var val = e.target.value;
console.log('event : '+event, ", value : " + val);
}
render() {
return (
<>
onKeyDown : <input type="text" onKeyDown={e => this.OnKey("onKeyDown", e)}/><br/>
onKeyPress : <input type="text" onKeyPress={e => this.OnKey("onKeyPress", e)}/><br/>
onKeyUp : <input type="text" onKeyUp={e => this.OnKey("onKeyUp", e)}/>
</>
)
}
}
export default R071_OnKey;
3교시 (11:30-12:20)
- 080/App.js
import React, {Component} from 'react'
import StrAddButton from './StrAddButton'
import './App.css';
class App extends Component {
render() {
return (
<div>
<h1>Start React 200!</h1>
<span>{this.props.store.getState().data.str}</span><br/>
<StrAddButton store={this.props.store}/>
</div>
);
}
}
export default App;- actions/index.js
export const ADD = 'ADD';
export const add = () => {
return {
type: ADD
}
};- reducers/index.js
import {ADD} from '../actions'
import {combineReducers} from 'redux'
const initState = {
str: 'react',
};
const data = (state = initState, action) => {
switch (action.type) {
case ADD:
return state, {
str: state.str + '200'
};
default:
return state;
}
};
const App = combineReducers({
data
});
export default App;- StrAddButton.js
import React, {Component} from 'react';
import {add} from './actions'
class StrAddButton extends Component {
render() {
return (
<input value='Add200' type="button" onClick={this.addString}/>
)
}
addString = () => {
this.props.store.dispatch(add());
}
}
export default StrAddButton;
4교시 (12:30-13:20)
- 083/App.js
import React, {Component} from 'react'
import {connect} from 'react-redux'
import StrAddButton from './StrAddButton'
import './App.css'
// npm install --save redux
// npm install --save react-redux
// react-redux 장점
// 1. store 를 매번 상속하지 않고 사용가능
// 2. store 데이터를 사용, 변경하는 코드를 모듈화해 컴포넌트 내에 중복된 코드 사용 최소화
class App extends Component {
render() {
return (
<div>
<h1>Start React 200!</h1>
{/* <span>{this.props.store.getState().data.str}</span><br/> */}
<span>{this.props.str}</span><br/>
{/* <StrAddButton store={this.props.store}/> */}
<StrAddButton AppProp="200"/>
</div>
);
}
}
let mapStateToProps = (state, props) => {
console.log('Props from indes.js : ' + props.indexProp)
return {
str: state.data.str,
};
};
App = connect(mapStateToProps, null)(App);
export default App;- actions/index.js
export const ADD = 'ADD';
export const add = () => {
return {
type: ADD
}
};- reducers/index.js
import {ADD} from '../actions'
import {combineReducers} from 'redux'
const initState = {
str: 'react',
};
const data = (state = initState, action) => {
switch (action.type) {
case ADD:
return state, {
str: state.str + '200'
};
default:
return state;
}
};
const App = combineReducers({
data
});
export default App;- StrAddButton.js
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {add} from './actions'
class StrAddButton extends Component {
render() {
return (
// <input value='Add200' type="button" onClick={this.addString}/>
<input value='Add200' type="button" onClick={this.props.addString}/>
)
}
// addString = () => {
// this.props.store.dispatch(add());
// }
}
let mapDispatchToProps = (dispatch, props) => {
console.log('Props from App.js : ' + props.AppProp)
return {
addString: () => dispatch(add())
};
};
StrAddButton = connect(null, mapDispatchToProps)(StrAddButton);
export default StrAddButton;
5교시 (14:30-15:20)
- 프로젝트 진행
6교시 (15:30-16:20)
- 프로젝트 진행
7교시 (16:30-17:20)
- 프로젝트 진행
8교시 (17:30-18:30)
- 프로젝트 진행
Notes
728x90