Data Scientist 옌

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

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

22-06-24(금) 102일차 [React, MySQL, Node.js, ElasticStack, Team Project] ReactDOM Components, DB 연결, ElasticStack에 대한 개념

옌炎 2022. 6. 24. 23:23
728x90

수업내용

1교시 (09:30-10:20)

  • 태그, 엘리먼트, 노드의 구분
    • 여는 꺽쇠와 닫는 꺽쇠 안의 martk up을 태그
    • 태그 안에 내용까지 포함하면 엘리먼트
    • 엘리먼트로 구성된 HTML Tree가 문서 전체를 읽는 방식인 DOM Tree 형태 + CSS Tree ⇒ HTML 문서
    • HTML → HTML Tree → DOM Tree + CSS Tree
  • React와 ReactDOM이란?
    • React : View를 만드는 Library
      • React를 HTML로 바꾸는 것을 babel로 컴파일 함
    • ReactDOM : UI를 만들기 위한 Library (Tree를 만들어 DOM Tree에게 알려줌) ← babel이 개입
    • React, ReactDOM → babel → 엔진 --DOM Tree→ Browser
      • React, ReactDOM이 <p>, <ul>, <li>를 버추얼 트리로 만들도록 요청
      • 할 수 있는 브라우저(하이 브라우저)에만 요청함
      (1) element 방법: 하나만 하는 경우(3) class, 함수불러오는 방법
      • ES6 : export, export default
      • commonJS : exports, module.exports, require
    • (4) module (ES6)
    • (2) component 방법 : 여러 개 모아 놓은 것 <p></p>
    • 뷰(Vue)는 {{ }}를 쓰지만 같은 구조 <div> … </div>

2교시 (10:30-11:20)

  • 06_components.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>리액트 콤포넌트</title>
</head>
<body>
	<!-- Target Container -->
	<div id="react-container"></div>

	<!-- React Library & React DOM -->
	<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<script>

			class IngredientsList extends React.Component {
				render() {
					return React.createElement("ul", {className: "ingredients"},
						this.props.items.map((ingredient, i) =>
							React.createElement("li", {key: i}, ingredient)
						)
					)
				}
			}

			const items = [
				"연어 500그램",
				"잣 1 컵",
				"버터 상추 2컵",
				"옐로 스쿼시(Yellow Squash, 호박의 한 종류) 1개",
				"올리브 오일 1/2컵",
				"마늘 3쪽"
			]

			ReactDOM.render(
				React.createElement(IngredientsList, {items}, null),
				document.getElementById('react-container')
			)

	</script>
</body>
</html>

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

  • 07_components.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>리액트 컴포넌트</title>
</head>
<body>
	<!-- Target Container -->
	<div id="react-container"></div>

	<!-- React Library & React DOM -->
	<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<script>

		class IngredientsList extends React.Component {

			renderListItem(ingredient, i) {
				return React.createElement("li", {key: i}, ingredient)
			}

			render() {
				return React.createElement("ul", {className: "ingredients"},
					this.props.items.map(this.renderListItem)
				)
			}
		}

		const items = [
			"연어 500그램",
			"잣 1컵",
			"버터 상추 2컵",
			"옐로 스쿼시(Yellow Squash, 호박의 한 종류) 1개",
			"올리브 오일 1/2컵",
			"마늘 3쪽"
		]

		ReactDOM.render(
			React.createElement(IngredientsList, {items}, null),
			document.getElementById('react-container')
		)
		
	</script>
</body>
</html>

  • 08_components.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>리액트 컴포넌트</title>
</head>
<body>
	<!-- Target Container -->
	<div id="react-container"></div>

	<!-- React Library & React DOM -->
	<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
	<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
	<script>

		const IngredientsList = ({items}) =>
			React.createElement("ul", {className: "ingredients"},
				items.map((ingredient, i) =>
					React.createElement("li", {key: i}, ingredient)
				)
			)

		const items = [
			"연어 500그램",
			"잣 1컵",
			"버터 상추 2컵",
			"옐로 스쿼시(Yellow Squash, 호박의 한 종류) 1개",
			"올리브 오일 1/2컵",
			"마늘 3쪽"
		]

		ReactDOM.render(
			React.createElement(IngredientsList, {items}, null),
			document.getElementById('react-container')
		)
		
	</script>
</body>
</html>

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

  • D 드라이브에 작업 폴더 만들고 작업
    • 나중에는 소스와 오라클 파일(스키마, 오브젝트, 데이터 설정)만 들고 다녀야 함
    • C 드라이브는 OS가 있어 자주 다시 깔아야 하기 때문에 D 쓰기
  • 프로젝트 폴더 구성
    • D:\봄이왔조
      • java
      • tomcat
      • app
      • MySQL
      • eclipse
      • eclipse_work
  • 형상관리 툴 설명
    • CVN, SVN, git/github

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

  • Elastic Stack
    • logstash → elastic → kibana
      • Logstash: collect, transform and route log entries
      • elastic: store and search logs
      • kibana: visualize & analyze

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

  • oracle_dbconfig.js
module.exports = {
	user			: "scott",
	password		: "tiger",
	connectString 	: "localhost:1521/orclKSY00",
	externalAuth	: false
};
  • oracle_01.js
/*

npm i oracledb -g --save

C:\00.KOSMO108\40.node\node_test\04_db\oracle_dbconfig.js

C:\00.KOSMO108\40.node\instantclient_21_6
*/


const express = require("express");
const app = express();

// database
const oracledb = require('oracledb');
const dbConfig = require("./oracle_dbconfig");

// 서버 listen
const server = app.listen(3000, ()=> {
	console.log("Start server : localhost:3000");
});

// 라우터 설정
app.get("/", function(req, res) {
    res.render("index.html")
});

http://localhost:3000/db

/*
물리적인 경로 
http://localhost:3000/

// 물리적인 디렉토리 경로 
C:\00.KOSMO108\40.node\node_test\04_db

http://localhost:3000/
C:\00.KOSMO108\40.node\node_test\04_db

/ : 컨텍스트 패스 

app.get("/db", function (req, res){


C:\00.KOSMO108\40.node\node_test\04_db\oracle_01.js
C:\00.KOSMO108\40.node\node_test\04_db/public/login2.html
C:\00.KOSMO108\40.node\node_test\04_db/public/adduser2.html
*/

app.get("/db", function(req, res) {

	// DB Select
	selectDatabase();

	// 화면에 보여줄 txt
	res.send("execute!!!");
});

// DB Select
async function selectDatabase() {

	console.log("!!!!! db connection !!!!!");

	let connection = await oracledb.getConnection(dbConfig);

	let binds = {};
	let options = {
		outFormat: oracledb.OUT_FORMAT_OBJECT  // query result format
	};

	console.log("!!!!! db select !!!!!");

	let result = await connection.execute("select * from emp", binds, options);

	console.log("!!!!! db response !!!!!");
	console.log(result.rows[0]);

	console.log("!!!!! db close !!!!!");
	await connection.close();
}

// 초기화
function init() {

	// oracle client 경로 설정
	oracledb.initOracleClient({ libDir: 'C:\\00.KOSMO108\\40.node\\instantclient_21_6' });
}

// 초기화
init()

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

  • 프로젝트 진행

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

  • 프로젝트 진행

Notes

728x90
저작자표시

'국비지원교육 (22.01-22.07) > 강의노트' 카테고리의 다른 글

22-06-28(화) 104일차 [Node.js, Team Project] Node.js MySQL insert  (0) 2022.06.28
22-06-27(월) 103일차 [React, Python, Team Project] React의 Creat-React-App, Python의 flask 서버 구축  (0) 2022.06.27
22-06-23(목) 101일차 [Career] 이력서 클리닉  (0) 2022.06.24
22-06-22(수) 100일차 [Career] 이력서 클리닉  (0) 2022.06.24
22-06-21(화) 099일차 [JavaScript, React, Python, Android] React.createElement, Python XML parsing  (0) 2022.06.24

'국비지원교육 (22.01-22.07)/강의노트'의 다른글

  • 현재글22-06-24(금) 102일차 [React, MySQL, Node.js, ElasticStack, Team Project] ReactDOM Components, DB 연결, ElasticStack에 대한 개념

관련글

댓글

티스토리툴바