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 (
    <div>
      <h1>Start React 200!</h1>
      <p>CSS 적용하기</p>
      <Jquery/>
    </div>
  );
}

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);
  padding: 40px;
  font-family: 고딕;
  text-align: center;
}

h1 {
  color: white;
  background-color: #2EFE2E;
  padding: 10px;
  font-family: 궁서;
}

• R016_Jquery.js

import React, { Component } from 'react';
import $ from 'jquery';

class R016_Jquery extends Component {

  input_alert = (e) => {
    var input_val = $('#inputId').val();
    alert(input_val);
  }

  render() {
    return (
      <div>
        <h2>[ THIS IS Jquery ]</h2>
        <input id="inputId" name="inputName"/>
        <button id="buttonId" onClick={e => this.input_alert(e)}>Jquery Button</button>
      </div>
    )
  }
}

export default R016_Jquery;

• 017/App.js

import React from 'react';
import './App.css';
import Props from './R017_Props'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>CSS 적용하기</p>
      <Props props_val="THIS IS PROPS"/>
    </div>
  );
}

export default App;

• 017/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: 궁서;
}

• R017_Props.js

import React, { Component } from 'react';

class R017_Props extends Component {
  render() {
    let props_value = this.props.props_val;
    props_value += ' from App.js'
    return (
    <div>{props_value}</div>
    )
  }
}

export default R017_Props;

3교시 (11:30-12:20)

• 018/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: 궁서;
}

• 018/App.js

import React from 'react';
import './App.css';
import PropsDatatype from './R018_PropsDatatype'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>CSS 적용하기</p>
      <PropsDatatype 
        String="react"
        Number={200}
        Boolean={1==1}
        Array={[0, 1, 8]}
        ObjectJson={{react:"리액트", twohundred:"200"}}
        Function={console.log("FunctionProps: function!")}
      />
    </div>
  );
}

export default App;

• R18_propsDatatype.js

import React, { Component } from 'react';
import datatype from 'prop-types';

class R018_PropsDatatype extends Component {
  render() {
    let {
      String, Number, Boolean, Array, ObjectJson, Function
    } = this.props
    return (
    <div style={{padding: "0px"}}>
      <p>StringProps: {String}</p>
      <p>NumberProps: {Number}</p>
      <span>BooleanProps: {Boolean.toString()}</span>
      <p>ArrayProps: {Array.toString()}</p>
      <p>ObjectJsonProps: {JSON.stringify(ObjectJson)}</p>
      <p>FunctionProps: {Function}</p>
    </div>
    )
  }
}

R018_PropsDatatype.propTypes = {
  String: datatype.number,
  Number: datatype.number,
  Boolean: datatype.bool,
  Array: datatype.array,
  ObjectJson: datatype.object,
  Function: datatype.func,
}

export default R018_PropsDatatype;

4교시 (12:30-13:20)

• MongoDB 비관계형 데이터베이스 Document-Orieted Database
  자바스크립트 객체를 그대로 저장할 수 있다.
  
  SQL : 관계형 데이터베이스 Relational Database
  NoSQL : 비관계형 데이터베이스  NoSQL Not Only SQL 
  
  
  몽고디비는 여러 데이터가 모인 하나의 단위를 컬렉션 Collection 이라고 한다.
  
  데이터베이스 : 컬렉센의 집합
  컬렉션 #2         <--- 컬렉션 : 문서의 집합
  컬렉션 #1
  컬렉션 #0
  문서 #0
  name: '소녀시대'
  age: 20
  문서 #1
  name: '걸스데이'
  mobile: 010-0001-0001
  
  몽고디비는 데이터 저장소를 가지고 있으며 그 안에 여러 개의 컬렉션을 넣을 수 있다.
  즉, 데이터베이스는 컬렉션의 집합이라고 할 수 있다.
  각각의 컬렉션은 여러 개의 문저 객체 Document를 가질 수 있다.
  문서 객체는 속성들의 집합으로서 한 사람의 이름과 나이 등을 저장하고 싶을 때
  하나의 문서 객체를 만들 후 그 안에 
  자바스크립트 객체와 같이 속성들을 추가로 저장할 수 있다.
  
  컬렉션은 데이블과 비슷
  그 안의 각각의 문서 객체는 테이블 안데 들어 있는 한 줄의 데이터인 레코드 Record 와 비슷하다.
  문서 객체의 속성은 동일하지 않아도 된다.
  
  
  컬렉션 == 테이블
  문서 == 레코드
  
  mongodb://localhost:27017
  
  C:\Program Files\MongoDB\Server\5.0\bin>mongo --version
  MongoDB shell version v5.0.9
  Build Info: {
      "version": "5.0.9",
      "gitVersion": "6f7dae919422dcd7f4892c10ff20cdc721ad00e6",
      "modules": [],
      "allocator": "tcmalloc",
      "environment": {
          "distmod": "windows",
          "distarch": "x86_64",
          "target_arch": "x86_64"
      }
  }
  
  환경변수 세팅한다.
  C:\Users\kosmo>mongo --version
  
  
  데이터베이스 만들기 
  database\local
  
  C:\00.KOSMO108\40.node 폴더에 데이터베이스를 만든다.
  
  database\local 폴더 만들기 
  C:\00.KOSMO108\40.node\database\local
  
  
  
  C:\00.KOSMO108\40.node\database\local>mongod --dbpath C:\00.KOSMO108\40.node\database\local
  
  ctrl + c
  
  C:\00.KOSMO108\40.node\database\local>mongo
  MongoDB shell version v5.0.9
  connecting to: mongodb://127.0.0.1:27017/?compressors=disabled&gssapiServiceName=mongodb
  Implicit session: session { "id" : UUID("227eb082-b73e-473b-aff5-2ca0afddc710") }
  MongoDB server version: 5.0.9us
  
  
  use 명령어로 local 데이터베이스를 지정한다.
  =======================================
  > use local
  switched to db local
  > db.users.insert({name:'소녀시대', age:20})
  WriteResult({ "nInserted" : 1 })
  > db.users.find().pretty()
  {
          "_id" : ObjectId("62c2669625f481db0a4d4ebd"),
          "name" : "소녀시대",
          "age" : 20
  }
  > db.users.find()
  { "_id" : ObjectId("62c2669625f481db0a4d4ebd"), "name" : "소녀시대", "age" : 20 }
  >

---

5교시 (14:30-15:20)

• login.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>
<h3>로그인</h3>
<hr>
<form method="POST" action="/mongo_process/login">
    <table>
        <tr>
            <td><label>아이디</label></td>
            <td><input type="text" name="id"></td>
        </tr>
        <tr>
            <td><label>비밀번호</label></td>
            <td><input type="text" name="password"></td>                    
        </tr>
    </table>
    <input type="submit" value="전송" name="">
</form> 
</body>
</html>

• mongo_01.js

/*

npm install express
npm install http
npm install path
npm install body-parser
npm install cookie-parser
npm install server-static
npm install errorhandler
npm install express-error-handler
npm install express-session
npm install mongodb --save -g

http://localhost:3001/public/login.html

*/

// 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 app = express();

// 기본 속성 설정
app.set('port', process.env.PORT || 3001);

// body-parser를 이용해 application/x-xxx-form-urlencoded 파싱
app.use(bodyParser.urlencoded({ extended: false }));

// body-parser를 이용해 application/json 파싱
app.use(bodyParser.json());

console.dir(__dirname);
// console.dir(static);

// 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 MongoClient = require('mongodb').MongoClient;

// 데이터베이스 객체를 위한 변수 선언
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();
	}
});

// 라우터 객체 등록
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);
		}
	});
}

// Express 서버 시작
http.createServer(app).listen(3001, function(){
	console.log('서버 스타트 : 3001');

	// 데이터베이스 연결을 위한 함수 호출
	connectDB();
});

미리 만들어 놨던 user 정보 지우고 다시 설정

6교시 (15:30-16:20)

• 프로젝트 진행

7교시 (16:30-17:20)

• 프로젝트 진행

8교시 (17:30-18:30)

• 프로젝트 진행

---

Notes

---