728x90
수업내용
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 (
<div>
<h1>Start React 200!</h1>
<p>CSS 적용하기</p>
<PropsBoolean BooleanTrueFalse={false}/>
<PropsBoolean BooleanTrueFalse/>
</div>
);
}
export default App;- R019_PropsBoolean.js
import React, { Component } from 'react';
class R019_PropsDatatype extends Component {
render() {
let {
BooleanTrueFalse
} = this.props
return (
<div style={{padding: "0px"}}>
{BooleanTrueFalse? '2. ' : '1. '}
{BooleanTrueFalse.toString()}
</div>
)
}
}
export default R019_PropsDatatype;
- 021/App.js
import React from 'react';
import './App.css';
import PropsRequired from './R021_PropsRequired'
function App() {
return (
<div>
<h1>Start React 200!</h1>
<p>CSS 적용하기</p>
<PropsRequired ReactNumber={200}/>
</div>
);
}
export default App;- R021_PropsRequired.js
import React, { Component } from 'react';
import datatype from 'prop-types';
class R021_PropsRequired extends Component {
render() {
let {
ReactString,
ReactNumber
} = this.props
return (
<div style={{padding: "0px"}}>
{ReactString}{ReactNumber}
</div>
)
}
}
R021_PropsRequired.propTypes = {
ReactString: datatype.isRequired,
}
export default R021_PropsRequired;
2교시 (10:30-11:20)
- 022/App.js
import React from 'react';
import './App.css';
import PropsDefault from './R022_PropsDefault'
function App() {
return (
<div>
<h1>Start React 200!</h1>
<p>CSS 적용하기</p>
<PropsDefault ReactNumber={200}/>
</div>
);
}
export default App;- R022_PropsDefault.js
import React, { Component } from 'react';
class R022_PropsDefault extends Component {
render() {
let {
ReactString,
ReactNumber
} = this.props
return (
<div style={{ padding: "0px" }}>
{ReactString}{ReactNumber}
</div>
)
}
}
R022_PropsDefault.defaultProps = {
ReactString: "리액트",
ReactNumner: 400
}
export default R022_PropsDefault;
- 023/App.js
import React from 'react';
import './App.css';
import PropsNode from './R023_PropsNode'
function App() {
return (
<div>
<h1>Start React 200!</h1>
<p>CSS 적용하기</p>
<PropsNode>
<span>node from App.js</span>
</PropsNode>
</div>
);
}
export default App;- R023_PropsNode.js
import React, { Component } from 'react';
class R023_PropsNode extends Component {
render() {
return (
<div style={{pading: "0px"}}>
{this.props.children}
</div>
)
}
}
export default R023_PropsNode;
3교시 (11:30-12:20)
- 024/App.js
import React from 'react';
import './App.css';
import ReactState from './R024_ReactState'
function App() {
return (
<div>
<h1>Start React 200!</h1>
<p>CSS 적용하기</p>
<ReactState reactString={"react"}/>
</div>
);
}
export default App;- R024_ReactState.js
import React, { Component } from 'react';
class R024_ReactState extends Component {
constructor (props) {
super(props);
this.state = {
StateString: this.props.reactString,
StateNumber: 200,
}
}
render() {
return (
<div style={{padding: "0px"}}>
{this.state.StateString}{this.state.StateNumber}
</div>
)
}
}
export default R024_ReactState;
- adduser.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>사용자추가 테스트</title>
</head>
<body>
<h1>사용자추가</h1>
<br>
<form method="post" action="/mongo_process/adduser">
<table>
<tr>
<td><label>아이디</label></td>
<td><input type="text" name="id" /></td>
</tr>
<tr>
<td><label>비밀번호</label></td>
<td><input type="password" name="password" /></td>
</tr>
<tr>
<td><label>사용자명</label></td>
<td><input type="text" name="name" /></td>
</tr>
</table>
<input type="submit" value="전송" name="" />
</form>
</body>
</html>- mongo_02.js
/**
* 데이터베이스 사용하기
*
* 몽고디비에 사용자 추가하기
* 웹브라우저에서 아래 주소의 페이지를 열고 웹페이지에서 요청
* http://localhost:3000/public/adduser.html
*
*
* npm install express
npm install http
npm install path
npm install body-parser
npm install cookie-parser
npm install server-static
npm install express-session
npm install mongodb --save -g
*
*/
// Express 기본 모듈 불러오기
var express = require('express')
, http = require('http')
, path = require('path');
// Express의 미들웨어 불러오기
var bodyParser = require('body-parser')
, cookieParser = require('cookie-parser')
, static = require('serve-static');
// Session 미들웨어 불러오기
var expressSession = require('express-session');
// 몽고디비 모듈 사용
var MongoClient = require('mongodb').MongoClient;
// 익스프레스 객체 생성
var app = express();
// 기본 속성 설정
app.set('port', process.env.PORT || 3000);
// body-parser를 이용해 application/x-www-form-urlencoded 파싱
app.use(bodyParser.urlencoded({ extended: false }))
// body-parser를 이용해 application/json 파싱
app.use(bodyParser.json())
// public 폴더를 static으로 오픈
app.use('/public', static(path.join(__dirname, 'public')));
// cookie-parser 설정
app.use(cookieParser());
// 세션 설정
app.use(expressSession({
secret:'my key',
resave:true,
saveUninitialized:true
}));
//===== 데이터베이스 연결 =====//
// 데이터베이스 객체를 위한 변수 선언
var database;
//데이터베이스에 연결
function connectDB() {
// 데이터베이스 연결 정보
var databaseUrl = 'mongodb://localhost:27017/local';
// 데이터베이스 연결
MongoClient.connect(databaseUrl, function(err, db) {
if (err) throw err;
console.log('데이터베이스에 연결되었습니다. : ' + databaseUrl);
// database 변수에 할당
database = db.db('local');
});
}
//===== 라우팅 함수 등록 =====//
// 라우터 객체 참조
var router = express.Router();
// 로그인 라우팅 함수 - 데이터베이스의 정보와 비교
router.route('/mongo_process/login').post(function(req, res) {
console.log('/mongo_process/login 호출됨.');
// 요청 파라미터 확인
var paramId = req.body.id || req.query.id;
var paramPassword = req.body.password || req.query.password;
console.log('요청 파라미터 : ' + paramId + ', ' + paramPassword);
// 데이터베이스 객체가 초기화된 경우, authUser 함수 호출하여 사용자 인증
if (database) {
authUser(database, paramId, paramPassword, function(err, docs) {
if (err) {throw err;}
// 조회된 레코드가 있으면 성공 응답 전송
if (docs) {
console.dir(docs);
// 조회 결과에서 사용자 이름 확인
var username = docs[0].name;
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
res.write('<h1>로그인 성공</h1>');
res.write('<div><p>사용자 아이디 : ' + paramId + '</p></div>');
res.write('<div><p>사용자 이름 : ' + username + '</p></div>');
res.write("<br><br><a href='/public/login.html'>다시 로그인하기</a>");
res.end();
} else { // 조회된 레코드가 없는 경우 실패 응답 전송
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
res.write('<h1>로그인 실패</h1>');
res.write('<div><p>아이디와 패스워드를 다시 확인하십시오.</p></div>');
res.write("<br><br><a href='/public/login.html'>다시 로그인하기</a>");
res.end();
}
});
} else { // 데이터베이스 객체가 초기화되지 않은 경우 실패 응답 전송
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
res.write('<h2>데이터베이스 연결 실패</h2>');
res.write('<div><p>데이터베이스에 연결하지 못했습니다.</p></div>');
res.end();
}
});
// 사용자 추가 라우팅 함수 - 클라이언트에서 보내오는 데이터를 이용해 데이터베이스에 추가
router.route('/mongo_process/adduser').post(function(req, res) {
console.log('/mongo_process/adduser 호출됨.');
var paramId = req.body.id || req.query.id;
var paramPassword = req.body.password || req.query.password;
var paramName = req.body.name || req.query.name;
console.log('요청 파라미터 : ' + paramId + ', ' + paramPassword + ', ' + paramName);
// 데이터베이스 객체가 초기화된 경우, addUser 함수 호출하여 사용자 추가
if (database) {
addUser(database, paramId, paramPassword, paramName, function(err, result) {
if (err) {throw err;}
// 결과 객체 확인하여 추가된 데이터 있으면 성공 응답 전송
if (result && result.insertedCount > 0) {
console.dir(result);
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
res.write('<h2>사용자 추가 성공</h2>');
res.end();
} else { // 결과 객체가 없으면 실패 응답 전송
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
res.write('<h2>사용자 추가 실패</h2>');
res.end();
}
});
} else { // 데이터베이스 객체가 초기화되지 않은 경우 실패 응답 전송
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
res.write('<h2>데이터베이스 연결 실패</h2>');
res.end();
}
});
// 라우터 객체 등록
app.use('/', router);
// 사용자를 인증하는 함수
var authUser = function(database, id, password, callback) {
console.log('authUser 호출됨 : ' + id + ', ' + password);
// users 컬렉션 참조
var users = database.collection('users');
// 아이디와 비밀번호를 이용해 검색
users.find({"id":id, "password":password}).toArray(function(err, docs) {
if (err) { // 에러 발생 시 콜백 함수를 호출하면서 에러 객체 전달
callback(err, null);
return;
}
if (docs.length > 0) { // 조회한 레코드가 있는 경우 콜백 함수를 호출하면서 조회 결과 전달
console.log('아이디 [%s], 패스워드 [%s] 가 일치하는 사용자 찾음.', id, password);
callback(null, docs);
} else { // 조회한 레코드가 없는 경우 콜백 함수를 호출하면서 null, null 전달
console.log("일치하는 사용자를 찾지 못함.");
callback(null, null);
}
});
}
//사용자를 추가하는 함수
var addUser = function(database, id, password, name, callback) {
console.log('addUser 호출됨 : ' + id + ', ' + password + ', ' + name);
// users 컬렉션 참조
var users = database.collection('users');
// id, password, username을 이용해 사용자 추가
users.insertMany([{"id":id, "password":password, "name":name}], function(err, result) {
if (err) { // 에러 발생 시 콜백 함수를 호출하면서 에러 객체 전달
callback(err, null);
return;
}
// 에러 아닌 경우, 콜백 함수를 호출하면서 결과 객체 전달
if (result.insertedCount > 0) {
console.log("사용자 레코드 추가됨 : " + result.insertedCount);
} else {
console.log("추가된 레코드가 없음.");
}
callback(null, result);
});
}
//===== 서버 시작 =====//
// 프로세스 종료 시에 데이터베이스 연결 해제
process.on('SIGTERM', function () {
console.log("프로세스가 종료됩니다.");
app.close();
});
app.on('close', function () {
console.log("Express 서버 객체가 종료됩니다.");
if (database) {
database.close();
}
});
// Express 서버 시작
http.createServer(app).listen(app.get('port'), function(){
console.log('서버가 시작되었습니다. 포트 : ' + app.get('port'));
// 데이터베이스 연결을 위한 함수 호출
connectDB();
});
4교시 (12:30-13:20)
- mongo_03.js
/*
데이터베이스 사용하기
mongoose로 데이터베이스 다루기
모델 객체에 추가한 메소드를 이용해 사용자 조회, 사용자 추가
웹브라우저에서 아래 주소의 페이지를 열고 웹페이지에서 요청
(먼저 사용자 추가 후 로그인해야 함)
http://localhost:3000/public/login.html
http://localhost:3000/public/adduser.html
npm install mongooes --save -g
*/
// Express 기본 모듈 불러오기
var express = require('express')
, http = require('http')
, path = require('path');
// Express의 미들웨어 불러오기
var bodyParser = require('body-parser')
, cookieParser = require('cookie-parser')
, static = require('serve-static');
// Session 미들웨어 불러오기
var expressSession = require('express-session');
// mongoose 모듈 사용
var mongoose = require('mongoose');
// 익스프레스 객체 생성
var app = express();
// 기본 속성 설정
app.set('port', process.env.PORT || 3000);
// body-parser를 이용해 application/x-www-form-urlencoded 파싱
app.use(bodyParser.urlencoded({ extended: false }))
// body-parser를 이용해 application/json 파싱
app.use(bodyParser.json())
// public 폴더를 static으로 오픈
app.use('/public', static(path.join(__dirname, 'public')));
// cookie-parser 설정
app.use(cookieParser());
// 세션 설정
app.use(expressSession({
secret:'my key',
resave:true,
saveUninitialized:true
}));
//===== 데이터베이스 연결 =====//
// 데이터베이스 객체를 위한 변수 선언
var database;
// 데이터베이스 스키마 객체를 위한 변수 선언
var UserSchema;
// 데이터베이스 모델 객체를 위한 변수 선언
var UserModel;
// 데이터베이스에 연결
function connectDB() {
// 데이터베이스 연결 정보
var databaseUrl = 'mongodb://localhost:27017/local';
// 데이터베이스 연결
console.log('데이터베이스 연결을 시도합니다.');
mongoose.Promise = global.Promise; // mongoose의 Promise 객체는 global의 Promise 객체 사용하도록 함
mongoose.connect(databaseUrl);
database = mongoose.connection;
database.on('error', console.error.bind(console, 'mongoose connection error.'));
database.on('open', function() {
console.log('데이터베이스에 연결되었습니다. : ' + databaseUrl);
// 스키마 정의
UserSchema = mongoose.Schema({
id: {type: String, required: true, unique: true},
password: {type: String, required: true},
name: {type: String, index:'hashed'},
age: {type: Number, 'default': -1},
created_at: {type: Date, index: {unique: false}, 'default': Date.now},
updated_at: {type: Date, index: {unique: false}, 'default': Date.now}
});
// 스키마에 static으로 findById 메소드 추가
UserSchema.static('findById', function(id, callback) {
return this.find({id:id}, callback);
});
// 스키마에 static으로 findAll 메소드 추가
UserSchema.static('findAll', function(callback) {
return this.find({}, callback);
});
console.log('UserSchema 정의함');
// UserModel 모델 정의
UserModel = mongoose.model("users2", UserSchema);
console.log('UserModel 정의함');
});
// 연결 끊어졌을 때 5초 후 재연결
database.on('disconnected', function(){
console.log('연결이 끊어졌습니다. 5초 후 재연결합니다.');
setInterval(connectDB, 5000);
});
}
// 라우팅 함수 등록
// 라우터 객체 참조
var router = express.Router();
// 로그인 라우팅 함수 - 데이터베이스의 정보와 비교
router.route('/mongo_process/login').post(function(req, res){
console.log('/mongo_process/login 호출됨');
// 요청 파라미터 확인
var paramId = req.body.id || req.query.id;
var paramPassword = req.body.password || req.query.password;
console.log('요청 파라미터 : ' + paramId + ', ' + paramPassword);
// 데이터베이스 객체가 초기화된 경우, authUser 함수 호출하여 사용자 인증
if (database) {
authUser(database, paramId, paramPassword, function(err, docs) {
// 에러 발생 시, 클라이언트로 에러 전송
if (err) {
console.error('로그인 중 에러 발생 : ' + err.stack);
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
res.write('<h2>로그인 중 에러 발생</h2>');
res.write('<p>' + err.stack + '</p>');
res.end();
return;
}
// 조회된 레코드가 있으면 성공 응답 전송
if (docs) {
console.dir(docs);
// 조회 결과에서 사용자 이름 확인
var username = docs[0].name;
res.writeHead('200', {'Content-Type': 'text/html;charset=utf8'});
res.write('<h1>로그인 성공</h1>');
res.write('<div><p>사용자 아이디 : ' + paramId + '</p></div>');
res.write('<div><p>사용자 이름 : ' + username + '</p></div>');
res.write("<br><br><a href='/public/login.html'>다시 로그인하기</a>");
res.end();
} else { // 조회된 레코드가 없는 경우 실패 응답 전송
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
res.write('<h1>로그인 실패</h1>');
res.write('<div><p>아이디와 패스워드를 다시 확인하십시오.</p></div>');
res.write("<br><br><a href='/public/login.html'>다시 로그인하기</a>");
res.end();
}
});
} else { // 데이터베이스 객체가 초기화되지 않은 경우 실패 응답 전송
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
res.write('<h2>데이터베이스 연결 실패</h2>');
res.write('<div><p>데이터베이스에 연결하지 못했습니다.</p></div>');
res.end();
}
});
// 사용자 추가 라우팅 함수 - 클라이언트에서 보내오는 데이터를 이용해 데이터베이스에 추가
router.route('/mongo_process/adduser').post(function(req, res) {
console.log('/mongo_process/adduser 호출됨.');
var paramId = req.body.id || req.query.id;
var paramPassword = req.body.password || req.query.password;
var paramName = req.body.name || req.query.name;
console.log('요청 파라미터 : ' + paramId + ', ' + paramPassword + ', ' + paramName);
// 데이터베이스 객체가 초기화된 경우, addUser 함수 호출하여 사용자 추가
if (database) {
addUser(database, paramId, paramPassword, paramName, function(err, addedUser) {
// 동일한 id로 추가하려는 경우 에러 발생 - 클라이언트로 에러 전송
if (err) {
console.error('사용자 추가 중 에러 발생 : ' + err.stack);
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
res.write('<h2>사용자 추가 중 에러 발생</h2>');
res.write('<p>' + err.stack + '</p>');
res.end();
return;
}
// 결과 객체 있으면 성공 응답 전송
if (addedUser) {
console.dir(addedUser);
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
res.write('<h2>사용자 추가 성공</h2>');
res.end();
} else { // 결과 객체가 없으면 실패 응답 전송
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
res.write('<h2>사용자 추가 실패</h2>');
res.end();
}
});
} else { // 데이터베이스 객체가 초기화되지 않은 경우 실패 응답 전송
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
res.write('<h2>데이터베이스 연결 실패</h2>');
res.end();
}
});
// 사용자 리스트 함수
router.route('/mongo_process/listuser').post(function(req, res) {
console.log('/mongo_process/listuser 호출됨.');
// 데이터베이스 객체가 초기화된 경우, 모델 객체의 findAll 메소드 호출
if (database) {
// 1. 모든 사용자 검색
UserModel.findAll(function(err, results) {
// 에러 발생 시, 클라이언트로 에러 전송
if (err) {
console.error('사용자 리스트 조회 중 에러 발생 : ' + err.stack);
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
res.write('<h2>사용자 리스트 조회 중 에러 발생</h2>');
res.write('<p>' + err.stack + '</p>');
res.end();
return;
}
if (results) { // 결과 객체 있으면 리스트 전송
console.dir(results);
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
res.write('<h2>사용자 리스트</h2>');
res.write('<div><ul>');
for (var i = 0; i < results.length; i++) {
var curId = results[i]._doc.id;
var curName = results[i]._doc.name;
res.write(' <li>#' + i + ' : ' + curId + ', ' + curName + '</li>');
}
res.write('</ul></div>');
res.end();
} else { // 결과 객체가 없으면 실패 응답 전송
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
res.write('<h2>사용자 리스트 조회 실패</h2>');
res.end();
}
});
} else { // 데이터베이스 객체가 초기화되지 않은 경우 실패 응답 전송
res.writeHead('200', {'Content-Type':'text/html;charset=utf8'});
res.write('<h2>데이터베이스 연결 실패</h2>');
res.end();
}
});
// 라우터 객체 등록
app.use('/', router);
// 사용자를 인증하는 함수 : 아이디로 먼저 찾고 비밀번호를 그 다음에 비교하도록 함
var authUser = function(database, id, password, callback) {
console.log('authUser 호출됨 : ' + id + ', ' + password);
// 1. 아이디를 이용해 검색
UserModel.findById(id, function(err, results) {
if (err) {
callback(err, null);
return;
}
console.log('아이디 [%s]로 사용자 검색결과', id);
console.dir(results);
if (results.length > 0) {
console.log('아이디와 일치하는 사용자 찾음.');
// 2. 패스워드 확인
if (results[0]._doc.password === password) {
console.log('비밀번호 일치함');
callback(null, results);
} else {
console.log('비밀번호 일치하지 않음');
callback(null, null);
}
} else {
console.log("아이디와 일치하는 사용자를 찾지 못함.");
callback(null, null);
}
});
}
//사용자를 추가하는 함수
var addUser = function(database, id, password, name, callback) {
console.log('addUser 호출됨 : ' + id + ', ' + password + ', ' + name);
// UserModel 인스턴스 생성
var user = new UserModel({"id":id, "password":password, "name":name});
// save()로 저장 : 저장 성공 시 addedUser 객체가 파라미터로 전달됨
user.save(function(err, addedUser) {
if (err) {
callback(err, null);
return;
}
console.log("사용자 데이터 추가함.");
callback(null, addedUser);
});
};
// 서버 시작
// 프로세스 종료 시에 데이터베이스 연결 해제
process.on('SIGTERM', function () {
console.log("프로세스가 종료됩니다.");
app.close();
});
app.on('close', function () {
console.log("Express 서버 객체가 종료됩니다.");
if (database) {
database.close();
}
});
// Express 서버 시작
http.createServer(app).listen(app.get('port'), function(){
console.log('서버가 시작되었습니다. 포트 : ' + app.get('port'));
// 데이터베이스 연결을 위한 함수 호출
connectDB();
});
5교시 (14:30-15:20)
- 프로젝트 진행
6교시 (15:30-16:20)
- 프로젝트 진행
7교시 (16:30-17:20)
- 프로젝트 진행
8교시 (17:30-18:30)
- 프로젝트 진행
Notes
728x90