728x90
수업내용
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 (
<div>
<h1>Start React 200!</h1>
<p>CSS 적용하기</p>
<ReactstrapForm/>
</div>
);
}
export default App;- R044_ReactstrapForm.js
import React, { Component } from 'react'
import './App.css';
import { Form, Label, Input, Row, Col, FormGroup } from 'reactstrap';
class R044_ReactstrapForm extends Component {
render() {
return (
<Form>
<Label for="exampleGender">gender</Label>
<Input type="select" bsSize="sm">
<option>no select</option>
<option>woman</option>
<option>man</option>
</Input>
<Row Form>
<Col md={6}>
<FormGroup>
<Label for="exampleAddress">address</Label>
<Input type="text" name="address" id="address"/>
</FormGroup>
</Col>
<Col md={4}>
<FormGroup>
<Label for="exampleMobile">mobile</Label>
<Input type="text" name="mobile" id="mobile"/>
</FormGroup>
</Col>
<Col md={2}>
<FormGroup>
<Label for="exampleAge">age</Label>
<Input type="text" name="age" id="age"/>
</FormGroup>
</Col>
</Row>
</Form>
)
}
}
export default R044_ReactstrapForm;
2교시 (10:30-11:20)
- 047/App.js
import React from 'react';
// import './App.css';
import ListGroup from './R047_ReactstrapListGroup'
import 'bootstrap/dist/css/bootstrap.css'
function App() {
return (
<div>
<h1>Start React 200!</h1>
<p>CSS 적용하기</p>
<ListGroup/>
</div>
);
}
export default App;- R047_ReactstrapListGroup.js
import React, { Component } from 'react';
import './App.css';
import { ListGroup, ListGroupItem, Badge } from 'reactstrap';
class R047_ReactstrapListGroup extends Component {
render() {
return (
<>
<ListGroup>
<ListGroupItem color="danger" className="jstify-content-between">Badge
<Badge pill>200</Badge>
</ListGroupItem>
</ListGroup>
<ListGroupItem disabled tag="a" href="#">Disabled</ListGroupItem>
<ListGroupItem tag="a" href="http://example.com">Link</ListGroupItem>
<ListGroupItem tag="button" action onClick={e => alert("button")}>Button</ListGroupItem>
</>
)}
}
export default R047_ReactstrapListGroup;
3교시 (11:30-12:20)
- 048/App.js
import React from 'react';
import Modal from './R048_ReactstrapModal'
import 'bootstrap/dist/css/bootstrap.css';
function App() {
return (
<div>
<h1>Start React 200!</h1>
<Modal/>
</div>
);
}
export default App;- R048_ReactstrapModal.js
import React, { Component } from 'react';
import { Button, Modal, ModalHeader, ModelBody, ModelFooter } from 'reactstrap';
import './App.css';
class R048_ReactstrapModal extends Component {
constructor(props) {
super(props);
this.state = { modal: false }
}
toggle = () => {
this.setState({modal: !this.state.modal})
}
render() {
return (
<>
<Button color="warning" onClick={this.toggle}>Modal 버튼</Button>
<Modal isOpen={this.state.modal} fade={true} toggle={this.toggle}>
<ModalHeader toggle={this.toggle}>Modal Header</ModalHeader>
</Modal>
</>
)
}
}
export default R048_ReactstrapModal;
4교시 (12:30-13:20)
- 054/App.js
import React from 'react';
import ReactstrapTable from './R054_ReactstrapTable'
import 'bootstrap/dist/css/bootstrap.css'
function App() {
return (
<div>
<h1>Start React 200!</h1>
<ReactstrapTable/>
</div>
);
}
export default App;- R054_ReactstrapTable.js
import React, { Component } from 'react';
import { Table } from 'reactstrap';
import './App.css';
class R054_ReactstrapTable extends Component {
render() {
return (
<Table borderless size="sm">
{ /*
<Table>
<Table striped hover>
<Table dark bordered>
*/ }
<thead>
<tr>
<th>number</th>
<th>Book Name</th>
<th>Procie</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>React 100</td>
<td>￦10000</td>
</tr>
<tr>
<th scope="row">2</th>
<td>React 200</td>
<td>￦20000</td>
</tr>
</tbody>
</Table>
)
}
}
export default R054_ReactstrapTable;
5교시 (14:30-15:20)
- 안드로이드 ← 안드로이드 스튜디오 설치까지 완료
외우면 안드로이드 안다고 봄
Content Providers etc.
Linux Kernel
Broadcat Receiver
Content Provider
안드로이드
모바일 웹 web 환경
-------------------------
웹 : 브라우저 서비스
테스크탑 웹 desktop web : http://naver.com
모바일 웹 moblie web : 태블릿, 스마트폰 등 모바일 브라우저 : http://m.naver.com
모바일 장치에서 테스크탑 웹을 그대로 실행시키면 화면 해상도가
달라서 제대로 보기가 어렵다.
웹 페이지를 작성할 때 모바일 장치의 환경에 맞춰 화면을 구성해야 한다.
앱 : App : Mobile Application
네이티브앱 native app
: 각 플랫폼 전용의 개발 도구(언어)와 SDK(Software Development Kit)를
이용하여 개발한다.
아이폰은 XCode와 Object-C 언어를, 안드로이드폰은 자바, 윈도폰은 C# 언어를
사용하여 각각 개발한다.
카메라, 스피커, GPS 등의 장치를 직접 제어할 수 있고 효율성이 높다.
웹앱 web app
: 웹 기술로 개발하지만 겉모양은 네이티브앱 처럼 보이는 애플리케이션을 말한다.
하이브리드앱 hybrid app
: 네이티브앱 처럼 모바일 기기에 설치해서 사용하지만 내부적으로는 웹 기술로 구현한다.
먼저, 표준 웹 기술로 웹앱을 개발하고 이를 다시 네이티브앱으로 변환한 다음
배포하는 형태이다.
안드로이드 구조
-------------------------리눅스 커널에서 응용프로그램이 도는거야
1. 응용프로그램 Application
안드로이드 스마트폰에서 사용할 수 있는 일반적인 응용프로그램
웹브라우저, 달력, 구글 맵, 연락처, 게임 등
2. 응용 프로그램 프레임워크 Application Framework (*****)
안드로이드 api
Activity Manager, View System, Content Providers etc. (외워)
3. 안드로이드 런타임 Android Runtime
Java 코어 라이브러 와
달빅 가상머신(Dalvik Virtual Machine) 또는 아트 런타임(ART Runtime)
안드로이드는 Java 문법으로 프로그래밍하지만 자바 가상 머신을 사용하지 않고
달빗 가상 머신이나 아트 런타임을 사용한다.
4. 라이브러리 Libraries
안드로이드에서 사용되는 여러 시스템 라이브러리,
시스템 접근 때문에 C로 작성되어 있다.
5. 리눅스 커널 Linux Kernel (*****)
하드웨어의 운영과 관련된 저수준의 관리 기능
메모리 관리, 디비아스 드라이버, 보안 등...
카메라, 터스스크린, GPS 등
많은 스마트폰 장치 지원을 리눅스 커널 사용
안드로이드 설치
-------------------------
1. 인텔 HAXM(Hardware Accelerated eXecution Manager)설치
https://github.com/intel/haxm/releases/
intelhaxm-android.exe
2. Android Studio 다운로드
http://developer.android.com
3. Android Studio 설치
android-studio-2021.2.1.15-windows.exe <-- 최신버전
android-studio-ide-201.7042882-windows.exe : 4.1
android-studio-ide-191.5900203-windows.exe : 3.5.1
4. Android Studio 환경 설정
5. 안드로이드 SDK 업데이트
6. Android Virtual Device(AVD) 만들기 : 애뮬레이터 : 윈도우에서 돌아가는 실제 폰
6교시 (15:30-16:20)
- 프로젝트 진행
7교시 (16:30-17:20)
- 프로젝트 진행
8교시 (17:30-18:30)
- 프로젝트 진행
Notes
728x90