22-06-08(수) 090일차 [JavaScript, Node.js, Python] http-server, python 설치 및 자료형

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

22-06-08(수) 090일차 [JavaScript, Node.js, Python] http-server, python 설치 및 자료형

옌炎 2022. 6. 23. 21:49

728x90

수업내용

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

JavaScript

[리액트 교재 25p] let 키워드
script_02.html

✅ if (topic) { <= 돌아가는지?

✅ var topic = "리액트"; <= topic = "리액트";는 다른지?

✅ var topic 에 숫자를 할당하거나 할당을 안 했을 때 if문이 돌아가는가?

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
</head>
<body>
	<script type="text/babel">
	
		// var 변수의 영역은 블록 안으로젠한되지 않는다.
		var topic = "자바스크립트";
		if (topic) {
			var topic = "리액트";
			console.log('블록', topic); 
		}
		console.log('글로벌', topic);

		// ES6 let을 쓰면 구문적 변수 영역 규칙을 적용할 수 있다.
		var topic1 = "자바스크립트";
		if (topic1) {
			let topic1 = "리액트"
			console.log('블록', topic1);
		}
		console.log('글로벌', topic1);

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

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

http-server 모듈 설치
http-server 설치
---------------------------

npm i -g http-server --save
npm install --global http-server --save

C:\00.KOSMO108\50.react\node_http>npm i -g http-server --save
C:\Users\kosmo\AppData\Roaming\npm\http-server -> C:\Users\kosmo\AppData\Roaming\npm\node_modules\http-server\bin\http-server
+ http-server@14.1.1
updated 1 package in 1.281s

http-server 실행하기
---------------------------
-p : 포트 사용하기 옵션
8000 : 8000 port 열기

C:\00.KOSMO108\50.react\node_http>http-server -p 8000
Starting up http-server, serving ./

http-server version: 14.1.1

http-server settings:
CORS: disabled
Cache: 3600 seconds
Connection Timeout: 120 seconds
Directory Listings: visible
AutoIndex: visible
Serve GZIP Files: false
Serve Brotli Files: false
Default File Extension: none

Available on:
http://192.168.219.152:8000
http://127.0.0.1:8000
Hit CTRL-C to stop the server

http-server 서버 닫기
---------------------------
CTRL-C

http-server stopped.

C:\00.KOSMO108\50.react\node_http>

브라우저에서 요청하기
http://localhost:8000/

node.js http-server 사용하기

$ npm init -y
$ npm install http-server -g
$ http-server
$ http-server -p 8089

$ http-server [path] [options]
path : 웹문서 루트 경로

$ http-server ./node-http
$ http-server -p 8089
$ http-server -h

-p 또는 --port 사용할 포트를 지정 (디폴트는 8080)
-d 디렉토리 파일목록 가능여부 (디폴트는 true)
-i 자동 인덱스 사용여부 (디폴트는 true)
-g 또는 --gzip 활성화할 경우에 xxx.js 요청에 대해서 xxx.js.gz 파일이 존재하는지 확인하여 서비스
-s 또는 --silent 로그 메시지를 출력하지 않습니다
--cors Accss-Control-Allow-Origin 헤더를 사용하여 CORS 기능을 활성화
-c 캐시 타임아웃을 초(Seconds) 단위로 지정합니다. (예: -c10 은 캐쉬 타임아웃 10초)
--log-ip 로깅시 클라이언트 IP 주소를 출력합니다. (디폴트는 false)
-S 또는 -ssl https 통신을 활성화 합니다. (인증서 설정 필요)
-C 또는 --cert SSL 인증서 파일의 경로를 지정합니다.
-K 또는 --key SSL 키 파일의 경로를 지정합니다.
-h 또는 --help 도움말을 출력합니다.
-v 또는 --version 버전정보를 출력합니다.

npm i --global http-server  --save

http-server -p 8000 // server on

script_03.html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<style media="screen">
    #container {
        display: flex;
        justify-content: space-around;
    }

  	#container>div {
      	height: 5em;
      	width: 5em;
      	background-color: purple;
  	}       
</style>
</head>
<body>
	<h3>박스를 클릭하세요</h3>
	<div id="container"></div>

	<script type="text/babel">

		let div,
			constainer = document.getElementById('container');
			
		for (let i=0; i < 5; i++) {
			div = document.createElement('div');
			div.onclick = function() {
				alert('이것은 박스 #' + i + '입니다.');
			}
			container.appendChild(div);
		}	
			
	</script>
</body>
</html>

script_03_1.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Document</title>
	<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
	<style media="screen">
			#container {
				display: flex;
				justify-content: space-around;
			}

			#container>div {
				height: 5em;
				width: 5em;
				background-color: purple;
			}
	</style>
</head>
<body>
	<h3>박스를 클릭하세요</h3>
	<div id="container"></div>

	<script type="text/babel">

		var div,
			container = document.getElementById('container');

		for (var i=0; i < 5; i++) {
			div = document.createElement('div');
			div.onclick = function() {
				alert('이것은 박스 #' + i + '입니다.');
			}
			container.appendChild(div);
		}

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

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

Node.js

http_02.js

var http = require('http');

// 웹 서버 객체를 만든다.
var server = http.createServer();

// 웹 서버를 시작하면 3000번 포트에서 대기하도록 설정한다.
var port = 3000;
server.listen(port, function() {
	console.log('웹 서버가 시작되었습니다. : %d', port);
});

// 클라이언트 연결 이벤트 처리
server.on('connection', function(socket) {
	var addr = socket.address();
	console.log('클라이언트가 접속했습니다. : %s, %d', addr.address, addr.port);
});

// 클라이언트 요청 이벤트 처리
server.on('request', function(req, res) {
	console.log('클라이언트 요청이 들어왔습니다.');
	// console.dir(req);
});

// 서버 종료 이벤트 처리
server.on('close', ()=> {
	console.log('서버가 종료됩니다.');
});

setTimeout(function(){
	server.close();
}, 1000);

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

index.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Document</title>
</head>
<body>
	<h3>Hello NodeJS !!!!  </h3>
</body>
</html>

http_04.js

var http = require('http');
var fs = require('fs');

var app = http.createServer(function(req, res) {
	
	var _url = req.url;

	if (_url == '/') {
		_url = '/index.html';
	}

	if (_url == '/favicon.ico') {
		res.writeHead(404);
		res.end();
		return;
	}

	res.writeHead(200);
	res.end(fs.readFileSync(__dirname + _url));
});

app.listen(3000, function() {
	console.log('http_04.js 웹 서버 시작 >>> : ');
});

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

js_04.js

var f = false;
console.log(f);
var t = true;
console.log(t);
var max = Number.MAX_VALUE;
console.log(max);
var min = Number.MIN_VALUE;
console.log(min);
var s1 = 'abc';
console.log(s1);
var s2 = "abc";
console.log(s2);


var age = 20;
console.log('나이 : %d ', age);
var name = '소녀시대';
console.log('이름 : %s ', name);

// 자바스크립트에서 {} 중괄호를 이용해서 객체 만들고
// {} 중괄호로 묶은 객체 안에는 속성을 추가할 수 있다.
var Person = {};

Person['age'] = 20;
Person['name'] = '소녀시대';
Person.mobile = '010-1234-1234';

// 객체 안에 들어있는 속성의 이름은 하나의 변수로 생각할 수 있다.
// 변수의 이름과 변수 값 또는 속성의 이름과 속성의 값이라는 형태로 조합된다.
// 객체에 넣을 수 있는 속성은 점(.) 연산자와 속성의 이름으로 접근할 수 있고
// [] 대괄호와 속성의 이름으로 접근할 수 있다.
console.dir(Person);
console.log('나이 : %d ', Person.age);
console.log('이름 : %s ', Person.name);
console.log('전화 : %s ', Person.mobile);
console.log('나이 : %d ', Person['age']);
console.log('이름 : %s ', Person['name']);
console.log('전화 : %s ', Person['mobile']);

Python 개론
- 교재 Appendix B : ORM 방식
- 요즘은 Django보다 가벼워서 Flask를 많이 씀

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

Python 설치
- https://www.python.org/downloads/release/python-3810/

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

PyCharm 설치
hello.py

print('hello python')
# 주석
'''주석'''
"""주석"""
"""
파이썬 공부하기
1. 파이썬은 스크립트 언어이다.
2. 데이터 타입을 선언하지 않는다.
3. 인터프리터 방식을 사용한다.
4. 순간적으로 메모리를 많이 사용해서 수행 속도가 저하될 수 있다.

변수와 객체
자료형
--------------
기본 자료형
    숫자 : 정수, 실수, 복소수, 8진수, 16진수
    논리 : True, False
    문자열 자료형
        String : 한개 이상의 문자열 '', "", '''''', """"""
그룹 자료형
    리스트 자료형 : List : ArrayList
        list : [] 안에 원소를 순서대로 나열
    튜플 자료형
        tuple :() 안에 원소를 순서대로 나열, 원소값 변경 불가
    딕셔너리 자료형
        dictionary : {} 브레이스 안에 key:value
    집합 자료형
        set : {} 안에 key만 가지고 있는 형태
"""

# 정수
a = 123
print(a)
print("정수 >>> : " , type(a))

a = 123
print(a)

# 실수
a = 12.23
print(a)
print(type(a))
print("실수 >>> : ", type(a))

# 8진수
'''
0 : 숫자 0
o : 알파벳 소문자 o, 대문자 O
'''
a = 0o12
print(a)
print("8진수 >>> : ", type(a))

# 16진수
'''
0: 숫자 0
x : 알파벳 소문자 x, 대문자 X
'''
a = 0x12A
print(a)
print("16진수 >>> : ", type(a))

# 논리형
b = True
print(b)
print("논리형 >>> : ", type(b))
b = False
print(b)
print("논리형 >>> : ", type(b))

# 문자열
s1 = 'Hello Python'
print(s1)
print("문자열 >>> : ", type(s1))

s1 = "Hello Python"
print(s1)
print("문자열 >>> : ", type(s1))

s1 = '''Hello Python'''
print(s1)
print("문자열 >>> : ", type(s1))

# 문자열 연결
head = "python"
tail = " is fun"
print(head + tail)

# 문자열 곱하기
a = head * 2
print(a)
print("=" * 20)

'''
0  1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  21  22  23
N  o  w     i  s     b  e  t  t   e   r       t   h   a   n       n   e   v   e   r
'''
# 문자열 인덱싱
a = "Now is better than never"
print(a[0])
print(a[4])
print(a[-1])
print(a[-2])

# 문자열 슬라이싱
b = a[0] + a[1] + a[2]
print(b)
print(a[0:3])
print(a[4:6])
print(a[19:])
print(a[:3])
print(a[:])
print(a[7:-11])

# 문자 갯수 계산 : count()
a = "Python"
b = a.count('p')
print('갯수 ', b)
b = a.count('P')
print('갯수 ', b)

# 문자열 위치 : find(), index()
b = a.find('y')
print('문자열 위치 ', b)
b = a.find('p')
print('문자열 위치 ', b)
b = a.index('y')
print('문자열 위치 ', b)

# b = a.index('p')
# print('문자열 위치 ', b)
"""
Traceback (most recent call last):
  File "C:/00.KOSMO93/50.Python/basic/py/hello.py", line 134, in <module>
    b = a.index('p')
ValueError: substring not found
"""

# 문자 삽입 : join()
b = ","
c = b.join('Abcd')
print('''b.join('Abcd') >>> : ''', c)

# 대문자 변환 : upper()
print(a)
print(a.upper())

# 소문자 변환 :lower()
print(a.lower())

# 공백 제거 : lstrip(), rstrip(), strip()
d = "   py    "
print('lstrip() >>> : ', d.lstrip())
print('rstrip() >>> : ', d.rstrip())
print('strip() >>> : ', d.strip())

# 문자열 수정
a = "Pithon"
print(a[1])
# 문자열 수정 불가능 : immutablity
# a[1] = 'y'
# print(a[1])
"""
Traceback (most recent call last):
  File "C:/00.KOSMO93/50.Python/basic/py/hello.py", line 165, in <module>
    a[1] = 'y'
TypeError: 'str' ob
"""

# 문자열 바꾸기 : replace()
a = "Python is difficult."
print(a.replace("difficult", "funny"))

# 문자열 나누기 : split()
b = a.split()
print(b)

c = "a,b,c,d"
print(c.split(','))

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

스프링 코드 버전업하기

Notes

728x90

저작자표시

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

22-06-10(금) 092일차 [JavaScript, Node.js, Python] 호이스팅, express, 크롤링 (0)	2022.06.24
22-06-09(목) 091일차 [JavaScript, Node.js, Python] 템플릿 문자열, 파이썬 문법 (0)	2022.06.24
22-06-07(화) 089일차 [JavaScript, Node.js] Node.js란 무엇인가, 서버 켜는 법 (0)	2022.06.23
22-06-03(금) 088일차 [EL, JSTL] EL, JSTL을 이용하여 데이터 표시 (0)	2022.06.23
22-06-02(목) 087일차 [JSON, EL, JSTL] 차트 시각화, EL 기초 (0)	2022.06.23

현재글22-06-08(수) 090일차 [JavaScript, Node.js, Python] http-server, python 설치 및 자료형

A New Life

22-06-08(수) 090일차 [JavaScript, Node.js, Python] http-server, python 설치 및 자료형

수업내용

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

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

티스토리툴바

22-06-08(수) 090일차 [JavaScript, Node.js, Python] http-server, python 설치 및 자료형

수업내용

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

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

관련글

티스토리툴바