웹개발 종합반
1. 1주~5주차 강의 복습
1-1. 웹 브라우저의 원리
서버에서 HTML, CSS, 자바스크립트를 다운받아 클라이언트(브라우저)에서 실행
1-2. HTML, CSS
<!DOCTYPE html> : 현재 문서가 HTML5 문서임을 명시합니다. 파서가 가장 먼저 만날 문장.
<html> : HTML 문서의 루트(root) 요소를 정의합니다.
<head> : HTML 문서의 메타데이터(metadata)를 정의
<title> : HTML 문서의 제목(title)
<body> : 내용(content)
<h1> ~ <h6> : 제목(heading)
<p> : 단락(paragraph), 줄바꿈
...
1-3. CSS
<style> : 해당되는 클래스의 색이나 모양을 바꿈
<head>
<style>
.myh1{
color : red;
}
</style>
</head>
<body>
<h1 class = "myh1"> HelloWorld </h1>
<p><input type = 'text'></p>
</body>1-4. 많이 쓰는 CSS 연습 (1)
h1, h5, background-image, background-size, background-position
color, width, height, border-radius, margin, padding 등
1-5. 많이 쓰는 CSS 연습 (2)
<div>를 이용하여 컨턴츠를 이동시킨다
<head>
...
<style>
.mytitle {
...
}
.wrap {
width: 300px;
margin: 20px auto 0px auto;
}
</style>
</head>
<body>
<div class="wrap">
<div class="mytitle">
<h1>...</h1>
<h5>...</h5>
</div>
</div>
</body>1-6. 구글 폰트 사용하기
1. [fonts.google.com](fonts.google.com)
2. Sellect Regular 400 + 클릭
3. 오른쪽 위 사각형 3개, + 버튼 클릭
4. @import 선택, 아래 2개 붙여넣기<style>
@import url('https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap');
*{
font-family: 'Nanum Pen Script', cursive;
}
</style>1-7. 파일분리
<!-- style.css 파일을 같은 폴더에 만들고, head 태그에서 불러오기 -->
<link rel="stylesheet" type="text/css" href = "(css파일이름).css">
2주차
2-1. 자바스크립트
❔ 브라우저가 알아들을 수 있는 언어(브라우저 표준 언어)
2-2. Javascript & JQuery 연습하기 (1)
<head>
<script>
function checkResult() {
let a = '사과'
$('#q1').text(a)
$('#q1').css('color', 'red' )
alert(a) //알람띄우기
}
</script>
</head>
<body>
<div id="q1">테스트</div>
</body>2-3. Javascript & JQuery 연습하기 (2)
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script> //jQuery사용시 필요
<script>
function checkResult() {
//1 반복문
let fruits = ['사과','배','감','귤']
fruits.forEach((a) => {
console.log(a)
})
//2 조건문
let age = 24
if (age > 20) {
console.log('성인입니다')
}
}
//3 append
function checkResult() {
let fruits = ['사과','배','감','귤','수박']
fruits.forEach((a)=>{
// ``<==백틱임 주의!!!
let temp_html = `<p>사과</p>`
$('#q1').append(temp_html) //html를 붙임
})
}
</script>
</head>2-4. 서버-클라이언트 통신 이해하기
1) HTTP 통신
클라이언트의 요청이 있을 때 서버가 응답하는 단방향 통신
JSON, Image, HTML 등 다양한 파일을 전송, 전달 가능
응답후 connetion이 끊어지는 것이 일반적
2) socket 통신
양방향 통신
3) JSON
자료형 Dictionary와 유사
4) GET, POST
클라이언트가 요청 할 때에도, "타입"이라는 것이 존재
GET → 일반적으로 데이터 조회(Read)시 사용
url뒤에 아래와 같이 붙여서 데이터를 가져감
http://naver.com?param=value¶m2=value2
POST → 일반적으로 데이터 생성(Create), 변경(Update), 삭제(Delete)시 사용
1-9. Fetch 시작하기 (1)
fetch("여기에 URL을 입력") url로부터 data받기
.then(res => res.json()) 받은데이터 json화 시킴
.then(data => { json화된 데이터를 data에 넣기
console.log(data)
})
1-10. Fetch 시작하기 (2)
<script>
function q1() {
fetch("서울시url")
.then((response) => response.json())
.then((data) => {
$('#names-q1').empty()
let rows = data['RealtimeCityAir']['row']
rows.forEach((a) => {
let gu_name = a['MSRSTE_NM']
let gu_mise = a['IDEX_MVL']
let temp_html = ``
if (gu_mise > 40) {
temp_html = `<li class="bad">${gu_name} : ${gu_mise}</li>`
} else {
temp_html = `<li>${gu_name} : ${gu_mise}</li>`
}
$('#names-q1').append(temp_html)
});
})
}
</script>3주차
3-1. VC 가상환경만들기
1. 폴더하나 만들기
2. 터미널 git bash로 설정
3. 인터프리터 선택(원하는 파이썬 버전)
4. python -m venv venv (가상의 라이브러리 폴더 만들어짐)
5. 인터프리터 venv를 선택
6. 터미널 git bash를 설정, venv가 뜨면 성공
3-2. 크롤링 기본
# BeautifulSoup 이용 => html파서
import requests
from bs4 import BeautifulSoup
headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64;x64)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get('url',headers=headers)
soup = BeautifulSoup(data.text, 'html.parser')
trs = soup.select('#old_content > table > tbody > tr')
for tr in trs:
a = tr.select_one('td.title > div > a')
if a is not None:
print(a.text)3-3. mongoDB
RDBMS(SQL)
행/열의 생김새가 정해진 엑셀에 데이터를 저장하는 것과 유사
중간에 열을 하나 더하기는 어렵다
데이터의 일관성이나 / 분석에 용이
No-SQL
딕셔너리 형태로 데이터를 저장해두는 DB
데이터 하나 하나 마다 같은 값들을 가질 필요가 없다
자유로운 형태의 데이터 적재에 유리한 대신, 일관성이 부족3-4. mongoDB 연결하기
1. mongoDB 가입하기
2. 가상환경에 라이브러리 추가 pip install pymongo dnspython
3. mongoDB 조작
from pymongo import MongoClient
client = MongoClient('여기에 URL 입력/비번입력')
db = client.dbsparta
doc = {
'name' : '홍길동',
'age' : 24
}
db.user.insert_one(doc)
3-5. pymongo로 DB조작하기
# DB연결하기 & 데이터 넣기
db.users.insert_one({'name':'영희','age':30})
db.users.insert_one({'name':'철수','age':20})
db.users.insert_one({'name':'john','age':30})
# 모든 데이터 뽑아보기
all_users = list(db.users.find({},{'_id':False}))
print(all_users[0]) # 0번째 결과값을 보기
print(all_users[0]['name']) # 0번째 결과값의 'name'을 보기
for a in all_users: # 반복문을 돌며 모든 결과값을 보기
print(a)
#특정 결과 값을 뽑아 보기
user = db.users.find_one({})
print(user)
#수정하기
db.users.update_one({'name':'영수'},{'$set':{'age':19}})
user = db.users.find_one({'name':'영수'})
print(user)
#t삭제하기(거의 안씀)
db.users.delete_one({'name':'영수'})
user = db.users.find_one({'name':'영수'})
print(user)
4주차
4-1. Flask 시작하기 - 서버만들기
1) 가상의 폴더 하나 만들기
1. 폴더하나 만들기
2. 터미널 git bash로 설정
3. 인터프리터 선택(원하는 파이썬 버전)
4. python -m venv venv (가상의 라이브러리 폴더 만들어짐)
5. 인터프리터 venv를 선택
6. 터미널 git bash를 설정, venv가 뜨면 성공
7. pip install flask
2) 프레임워크 Flask이용
render_template 를 이용하여 웹페이지 만들기
1. template폴더 만들기
2. template폴더에 index.html만들기
3. 코드에 render_template 추가
4. 루트에 render_template('index.html')로 불러오기
from flask import Flask, render_template
app = Flask(__name__)
## URL 별로 함수명이 같거나,
## route('/') 등의 주소가 같으면 안됨
@app.route('/')
def home():
return render_template('index.html')
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)4-2. Flask 시작하기 - 본격 API 만들기
1. app.py
from flask import Flask, render_template, request, jsonify
from pymongo import MongoClient
client = MongoClient('MongoDB url, password')
db = client.dbsparta
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
# 주기 == 사용자가 입력한 값을 DB에 넣기
@app.route("/mars", methods=["POST"])
def mars_post():
name_receive = request.form['name_give']
address_receive = request.form['address_give']
size_receive = request.form['size_give']
doc = {
'name':name_receive,
'address':address_receive,
'size':size_receive,
}
db.mars.insert_one(doc)
return jsonify({'msg':'저장완료!'})
# 받기 == 서버에서 원하는 값 받기
@app.route("/mars", methods=["GET"])
def mars_get():
marsdata = list(db.mars.find({},{'_id':False}))
return jsonify({'result':marsdata})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True) 2. index.html
<!DOCTYPE html>
<html lang="en">
<head>
...
<style>
...
</style>
<script>
$(document).ready(function () {
show_order();
});
function show_order() {
fetch('/mars').then((res) => res.json()).then((data) => {
console.log(data)
$('#order-box').empty()
let rows = data['result']
rows.forEach(element => {
let name = element['name']
let address = element['address']
let size = element['size']
let temp_html = `<tr>
<td>${name}</td>
<td>${address}</td>
<td>${size}</td>
</tr>`
$('#order-box').append(temp_html)
});
})
}
function save_order() {
let formData = new FormData();
let name = $('#name').val()
let address = $('#address').val()
let size = $('#size').val()
formData.append("name_give", name)
formData.append("address_give", address)
formData.append("size_give", size)
fetch('/mars', { method: "POST", body: formData }).then((res) => res.json()).then((data) => {
console.log(data)
alert(data["msg"])
window.location.reload()
});
}
</script>
</head>
<body>
<div class="mask"></div>
<div class="order">
<div class="order-info">
<div class="input-group mb-3">
<label class="input-group-text" for="size">평수</label>
<select class="form-select" id="size">
<option selected>-- 주문 평수 --</option>
<option value="10평">10평</option>
<option value="20평">20평</option>
<option value="30평">30평</option>
<option value="40평">40평</option>
<option value="50평">50평</option>
</select>
</div>
<button onclick="save_order()" type="button" class="btn btn-warning mybtn">
주문하기
</button>
</div>
<table class="table">
<thead>
<tr>
<th scope="col">이름</th>
<th scope="col">주소</th>
<th scope="col">평수</th>
</tr>
</thead>
<tbody id="order-box">
<tr>
<td>홍길동</td>
<td>서울시 용산구</td>
<td>20평</td>
</tr>
<tr>
<td>임꺽정</td>
<td>부산시 동구</td>
<td>10평</td>
</tr>
<tr>
<td>세종대왕</td>
<td>세종시 대왕구</td>
<td>30평</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>4-3. 실습
실습 다시 만들기5주차
5-1. 버킷리스트, 팬명록
실습 다시 만들기