<웹개발 종합반5주차 개발일지>
4주차에 이어 실습을 해보는 5주차!
4주차에 했던 실습은
첫 번째, 화성에서 땅사기(이름, 주소, 평수 저장하기)
두 번째, 스파르타 피디아(영화 url, 코멘트, 별점 기록하기)
5주차에 해볼 실습은
세 번째, 버킷리스트 페이지(버킷리스트 기록하기)
네 번째, 팬명록 페이지(현재기온, 닉네임, 댓글 남기기 / 인터넷배포)
실습하기에 앞서 인터넷 웹 서비스를 배포할 때 쓸 AWS 서비스에 가입하기로 한다.
AWS는 아마존에서 운영하는 클라우드 서비스임
(가입할 때 승인이 필요한 경우가 있음 - 시간 소요되니 미리! 해외결재 가능 카드 필요)
https://portal.aws.amazon.com/billing/signup#/start
AWS Console - Signup
portal.aws.amazon.com
요런 해외사이트 가입하는거..증말 번거롭고 어렵다.,
가입하기 완료..,
세 번째 실습! 버킷리스트 웹페이지 만들기
새로 만들 폴더 열기
그리고 여러번 해온 준비 작업!
app.py 파일 만들고, 가상환경 연결하기
라이브러리 깔고(flask, pymongo, dnspython, certifi),
templates 폴더 생생 후 하위에 index.html 파일 만들기
코드스니펫 뼈대 복붙(app.py, index.html)
#app.py
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
@app.route("/bucket", methods=["POST"])
def bucket_post():
sample_receive = request.form['sample_give']
print(sample_receive)
return jsonify({'msg': 'POST 연결 완료!'})
@app.route("/bucket", methods=["GET"])
def bucket_get():
return jsonify({'msg': 'GET 연결 완료!'})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)#index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<link
href="https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap"
rel="stylesheet"
/>
<title>인생 버킷리스트</title>
<style>
* {
font-family: "Gowun Dodum", sans-serif;
}
.mypic {
width: 100%;
height: 200px;
background-image: linear-gradient(
0deg,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
),
url("https://images.unsplash.com/photo-1601024445121-e5b82f020549?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80");
background-position: center;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mypic > h1 {
font-size: 30px;
}
.mybox {
width: 95%;
max-width: 700px;
padding: 20px;
box-shadow: 0px 0px 10px 0px lightblue;
margin: 20px auto;
}
.mybucket {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.mybucket > input {
width: 70%;
}
.mybox > li {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
margin-bottom: 10px;
min-height: 48px;
}
.mybox > li > h2 {
max-width: 75%;
font-size: 20px;
font-weight: 500;
margin-right: auto;
margin-bottom: 0px;
}
.mybox > li > h2.done {
text-decoration: line-through;
}
</style>
<script>
$(document).ready(function () {
show_bucket();
});
function show_bucket() {
fetch('/bucket').then(res => res.json()).then(data => {
console.log(data)
alert(data["msg"]);
})
}
function save_bucket() {
let formData = new FormData();
formData.append("sample_give", "샘플데이터");
fetch('/bucket', {method: "POST",body: formData,}).then((response) => response.json()).then((data) => {
alert(data["msg"]);
});
}
</script>
</head>
<body>
<div class="mypic">
<h1>나의 버킷리스트</h1>
</div>
<div class="mybox">
<div class="mybucket">
<input
id="bucket"
class="form-control"
type="text"
placeholder="이루고 싶은 것을 입력하세요"
/>
<button onclick="save_bucket()" type="button" class="btn btn-outline-primary">기록하기</button>
</div>
</div>
<div class="mybox" id="bucket-list">
<li>
<h2>✅ 호주에서 스카이다이빙 하기</h2>
</li>
</div>
</body>
</html>mongoDB 로그인, app.py 실행해주기
웹브라우저에 localhost:5000 검색해서 들어가보기
GET 연결 완료! 문구가 뜬 뒤에, 하기와 같이 페이지가 뜸
기록하기도 마찬가지로 클릭하면 POST 연결 완료! 문구가 뜸
데이터 넣기부터 시작!
POST
내 버킷리스트 기록한 것을 불러와야 하니, 서버에서 받을 값은 1가지!
(bucket_give, bucket_receive)
값을 받아온 뒤에, db에 저장해줘야하니
dbprac.py 파일에 가서 라이브러리 임포트 내역과
저장하는 코드를 가져와 복붙해준다
# 데이터 저장, app.py-수정후1
@app.route("/bucket", methods=["POST"])
def bucket_post():
bucket_receive = request.form['bucket_give'] # bucket_give 보내고, bucket_recevie 받기
doc = { #db에 저장해주기 위해 딕셔너리 형태로 bucket doc로 감싸 만들기
'bucket' : bucket_receive
}
db.bucket.insert_one(doc) # db 저장하는 코드, 콜렉션 이름은 bucket
return jsonify({'msg': 'POST 연결 완료!'})
서버 작업했으면, 프론트엔드 쪽으로
브라우저에서 이 부분을 읽어와야 하기 때문에,
html 뼈대 중에서 저 부분이 어디인지 찾아봐야 한다.
id가 bucket인 것을 확인!
(데이터 저장해야하니, 하단 코드에서 작업해줘야함)
# 데이터저장 index.html 수정전
function save_bucket() {
let formData = new FormData();
formData.append("sample_give", "샘플데이터");
fetch('/bucket', {method: "POST",body: formData,}).then((response) => response.json()).then((data) => {
alert(data["msg"]);
});
save_bucket() 함수 안에 하단의 html 뼈대를 읽어오는 코드를 추가하면됨
# 데이터 저장 index.html 수정후-1
function save_bucket() {
let bucket = $('#bucket').val() # 아래 html 뼈대부분의 id를 가져와 불러오는 코드 추가
let formData = new FormData();
formData.append("sample_give", "샘플데이터");
fetch('/bucket', {method: "POST",body: formData,}).then((response) => response.json()).then((data) => {
alert(data["msg"]);
});
추가로, 아래 새로 만들어진 formdata 안에,
app.py에 수정한 bucket_give를 넣어주고,
값은 방금 html 뼈대에서 불러오는 데이터를 만들어준 bucket을 넣어주면 됨
# 데이터 저장 index.html 수정후-2
function save_bucket() {
let bucket = $('#bucket').val() #이 값을 아래에서 새로운 폼데이터에 넣어주는 것임
let formData = new FormData();
formData.append("bucket_give", bucket); #bucket_give로 변경, 값은 상단의 bucket변수
fetch('/bucket', {method: "POST",body: formData,}).then((response) => response.json()).then((data) => {
alert(data["msg"]); # msg의 값을 저장완료로 바꿔줘야함(->app.py 에서)
});이후 alert를 타고 기록하기를 눌렀을 때 문구가 떠야하는데,
'POST 연결 완료!'가 아닌 '저장 완료!' 문구가 뜨도록 app.py에서 변경함
# 데이터 저장 app.py 수정후-2
@app.route("/bucket", methods=["POST"])
def bucket_post():
bucket_receive = request.form['bucket_give']
doc = {
'bucket' : bucket_receive
}
db.bucket.insert_one(doc)
return jsonify({'msg': '저장 완료!'}) # msg 값을 저장 완료! 로 변경제대로 저장 되는지 테스트
코드 저장, 실행, 웹페이지 새로고침해서 버킷리스트 작성하고 기록하기 클릭
저장 완료! 정상적으로 뜨는 것 확인 완료
추가로 몽고디비에 데이터 잘 저장되었는지 확인
제대로 저장되었음 확인 완료
추가로 자동으로 refresh 시키기 위해 index.html에 코드 추가
# 데이터 저장 index.html 수정후-3
function save_bucket() {
let bucket = $('#bucket').val()
let formData = new FormData();
formData.append("bucket_give", bucket);
fetch('/bucket', {method: "POST",body: formData,}).then((response) => response.json()).then((data) => {
alert(data["msg"]);
window.location.reload(); # 자동 새로고침 코드 추가
});POST 완료
이제 데이터 불러오기 시작!
GET
우선, DB에 저장된 모든 데이터를 꺼내와줘야하기 때문에,
dbprac.py에서 모든 값 불러오는 코드 복붙
# 데이터 불러오기 app.py 수정후-1
@app.route("/bucket", methods=["GET"])
def bucket_get():
all_buckets = list(db.bucket.find({},{'_id':False})) # db 여러개 찾는 코드 복붙
return jsonify({'msg': 'GET 연결 완료!'}) # 콜렉션명 bucket으로 변경, 변수도 변경
받아온 데이터를 프론트엔드로 내려줘야하니,
get 연결 완료가 아니라 데이터를 받은 변수로 넣어줌
# 데이터 불러오기 app.py 수정후-2
@app.route("/bucket", methods=["GET"])
def bucket_get():
all_buckets = list(db.bucket.find({},{'_id':False}))
return jsonify({'result': all_buckets}) # result 라는 변수는 all_buckets를 값으로 받음
프론트엔드에서 보내준 데이터를 받아와서 새로운 변수로 지정해줌
# 데이터 불러오기 index.html 수정후-1
function show_bucket() {
fetch('/bucket').then(res => res.json()).then(data => {
let rows = data['result'] # data의 result값(app.py의 all_buckets)
console.log(rows) # rows라는 변수로 받고, 콘솔에 찍어서 테스트
})
새로고침 후, 검사-콘솔탭에 가보면 rows가 잘 들어간 것 확인함
리스트 형태로 있으니 rows 반복문으로 돌려서 값 빼주면됨
# 데이터 불러오기 index.html 수정후-2
function show_bucket() {
fetch('/bucket').then(res => res.json()).then(data => {
let rows = data['result']
rows.forEach((a)=>{ # for문으로 rows를 돌려 a변수로 받고
let bucket = a['bucket'] # a의 bucket(콘솔탭보면됨)값을 가져옴
console.log(bucket) # 콘솔에 찍어서 다시 테스트
})
새로고침 후, 검사-콘솔탭에 가보면 rows가 반복문 돌아서 하나하나 빠져나온것 확인함
이제 콘솔에만 찍어주는게 아니라 temp_html에 append해서 붙여주면 됨
# 데이터 불러오기 index.html 수정후-3
function show_bucket() {
fetch('/bucket').then(res => res.json()).then(data => {
let rows = data['result']
$('#bucket-list').empty() # 기존에 있던 자료 비우기
rows.forEach((a)=>{
let bucket = a['bucket']
let temp_html = `<li> # temp_html 만들기
<h2>✅ ${bucket}</h2> # html 뼈대에 붙일 영역 복붙
</li>`
$('#bucket-list').append(temp_html) # 붙일 영역 id값 가져와서 append 해주기
})
})
새로고침 하니, 내가 기록했던 버킷리스트 내역이 뜨는걸 확인
추가로 하나 더 등록해보기
바로바로 추가되는 것을 확인했고
몽고디비에도 잘 저장되는 것을 확인
GET 완료
버킷 리스트 완료!!!!!!!!!!!!
이어서 네 번째 실습! 팬명록 웹페이지 만들기
동일하게 새로 만들 폴더 열기
그리고 여러번 해온 준비 작업!
app.py 파일 만들고, 가상환경 연결하기
라이브러리 깔고(flask, pymongo, dnspython, certifi),
templates 폴더 생생 후 하위에 index.html 파일 만들기
코드스니펫 뼈대 복붙(app.py, index.html)
#app.py 뼈대
from flask import Flask, render_template, request, jsonify
app = Flask(__name__)
@app.route('/')
def home():
return render_template('index.html')
@app.route("/guestbook", methods=["POST"])
def guestbook_post():
sample_receive = request.form['sample_give']
print(sample_receive)
return jsonify({'msg': 'POST 연결 완료!'})
@app.route("/guestbook", methods=["GET"])
def guestbook_get():
return jsonify({'msg': 'GET 연결 완료!'})
if __name__ == '__main__':
app.run('0.0.0.0', port=5000, debug=True)#index.html 뼈대
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<title>초미니홈피 - 팬명록</title>
<link
href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200;300;400;500;600;700;900&display=swap"
rel="stylesheet"
/>
<style>
* {
font-family: "Noto Serif KR", serif;
}
.mypic {
width: 100%;
height: 300px;
background-image: linear-gradient(
0deg,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)
),
url("https://cdn.topstarnews.net/news/photo/201807/456143_108614_510.jpg");
background-position: center 30%;
background-size: cover;
color: white;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.mypost {
width: 95%;
max-width: 500px;
margin: 20px auto 20px auto;
box-shadow: 0px 0px 3px 0px black;
padding: 20px;
}
.mypost > button {
margin-top: 15px;
}
.mycards {
width: 95%;
max-width: 500px;
margin: auto;
}
.mycards > .card {
margin-top: 10px;
margin-bottom: 10px;
}
</style>
<script>
$(document).ready(function () {
set_temp();
show_comment();
});
function set_temp() {
fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then((res) => res.json()).then((data) => {
console.log(data)
});
}
function save_comment() {
let formData = new FormData();
formData.append("sample_give", "샘플데이터");
fetch('/guestbook', {method: "POST",body: formData,}).then((res) => res.json()).then((data) => {
//console.log(data)
alert(data["msg"]);
});
}
function show_comment() {
fetch('/guestbook').then((res) => res.json()).then((data) => {
alert(data["msg"])
})
}
</script>
</head>
<body>
<div class="mypic">
<h1>십센치(10cm) 팬명록</h1>
<p>현재기온: <span id="temp">36</span>도</p>
</div>
<div class="mypost">
<div class="form-floating mb-3">
<input type="text" class="form-control" id="name" placeholder="url" />
<label for="floatingInput">닉네임</label>
</div>
<div class="form-floating">
<textarea
class="form-control"
placeholder="Leave a comment here"
id="comment"
style="height: 100px"
></textarea>
<label for="floatingTextarea2">응원댓글</label>
</div>
<button onclick="save_comment()" type="button" class="btn btn-dark">
댓글 남기기
</button>
</div>
<div class="mycards" id="comment-list">
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>새로운 앨범 너무 멋져요!</p>
<footer class="blockquote-footer">호빵맨</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>새로운 앨범 너무 멋져요!</p>
<footer class="blockquote-footer">호빵맨</footer>
</blockquote>
</div>
</div>
<div class="card">
<div class="card-body">
<blockquote class="blockquote mb-0">
<p>새로운 앨범 너무 멋져요!</p>
<footer class="blockquote-footer">호빵맨</footer>
</blockquote>
</div>
</div>
</div>
</body>
</html>mongoDB 로그인, app.py 실행해주기
웹브라우저에 localhost:5000 검색해서 들어가보기
마찬가지로, 들어가면 GET 연결 완료!
댓글남기기 클릭하면 POST 연결 완료! 가 뜸
이번은 팬명록 위에 현재 기온을 나타내는 게 있으니 그것 먼저!
# 온도 index.html 수정전
function set_temp() {
fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then((res) => res.json()).then((data) => {
console.log(data)
});fetch에 저장되어 있는 링크를 타고 들어가면
이렇게 뜨는걸 확인할 수 있고,
여기서 필요한 건 temp 값
# 기온 index.html 수정후-1
function set_temp() {
fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then((res) => res.json()).then((data) => {
console.log(data['temp']) # ['temp'] 추가해서 콘솔탭 확인
콘솔탭에 temp가 잘 뜨는 것 확인 완료
콘솔탭이 아니라 '현재기온 :36도' 안에 넣어줘야함
# 온도 index.html 수정후-2
function set_temp() {
fetch("http://spartacodingclub.shop/sparta_api/weather/seoul").then((res) => res.json()).then((data) => {
let temp = data['temp'] # temp라는 변수에 값을 넣어주고
$('#temp').text(temp) # html 뼈대에서 들어갈 자리 id명(temp)을 찾아서 .text로 넣어줌
});
새로고침 해보면 반영된 것 확인 가능
데이터 넣기 시작!
POST
서버에서 필요한, 받아야하는 부분이 어디인지 확인해보기
닉네임과 응원댓글 2가지의 데이터를 프론트엔드에서 받아야 함.
# 데이터 저장 app.py 수정후-1
@app.route("/guestbook", methods=["POST"])
def guestbook_post():
name_receive = request.form['name_give'] # 닉네임 받기 추가
comment_receive = request.form['comment_give'] # 댓글 받기 추가
return jsonify({'msg': 'POST 연결 완료!'})
DB에 저장하기
(dbprac.py 저장하기와 임포트 코드 복붙)
db에 붙여줄 doc 새로 만들고,
콜렉션 이름 새로 지정한다음 저장해서 실행하기
# 데이터 저장 app.py 수정후-2
@app.route("/guestbook", methods=["POST"])
def guestbook_post():
name_receive = request.form['name_give']
comment_receive = request.form['comment_give']
doc = { # db에 저장할 딕셔너리 형태 doc 만들기
'name' : name_receive,
'comment' : comment_receive
}
db.fan.insert_one(doc) # 콜렉션 이름은 fan 으로 저장
return jsonify({'msg': 'POST 연결 완료!'})
기록하기를 누르면' POST 연결 완료!'가 아니라 '저장 완료!'가 뜨도록 문구 변경
# 데이터 저장 app.py 수정후-3
@app.route("/guestbook", methods=["POST"])
def guestbook_post():
name_receive = request.form['name_give']
comment_receive = request.form['comment_give']
doc = {
'name' : name_receive,
'comment' : comment_receive
}
db.fan.insert_one(doc)
return jsonify({'msg': '저장 완료!'}) # 저장 완료!로 변경서버쪽 코드 완료
프론트엔드 뼈대에서 사용자가 어디에 쓴 값을 불러와야 하는지 뼈대찾기
(닉네임, 응원댓글)
닉네임의 id는 name
응원댓글의 id는 comment
요 값들을 불러올 수 있게 함수 안에 넣어줌
# 데이터 저장 index.hteml 수정후-1
function save_comment() {
let name = $('#name').val() # html 뼈대에서 사용자가 입력하는 영역 id 가져오는 코드
let comment = $('#comment').val() # html 뼈대에서 사용자가 입력하는 영역 id 가져오는 코드
let formData = new FormData();
formData.append("sample_give", "샘플데이터");
fetch('/guestbook', { method: "POST", body: formData, }).then((res) => res.json()).then((data) => {
//console.log(data)
alert(data["msg"]);
});
작성자로부터 받아온 값을 백엔드에 보내줘야 하니,
폼데이터 값 코드를 만들어줌
# 데이터 저장 index.html 수정후-2
function save_comment() {
let name = $('#name').val()
let comment = $('#comment').val()
let formData = new FormData();
formData.append("name_give", name); # name_give로 백엔드에 보내줌, 값은 위에 변수 name
formData.append("comment_give", comment); # comment_give로 백엔드에 보내줌, 값은 위에 변수 comment
fetch('/guestbook', { method: "POST", body: formData, }).then((res) => res.json()).then((data) => {
//console.log(data)
alert(data["msg"]);
});
웹페이지 가서 테스트
닉네임, 응원댓글 작성해서 댓글남기기를 누르면 '저장완료!'가 잘뜨고
몽고디비 데이터베이스에도 잘 올라간 것 확인 완료
추가로, 웹페이지에 새로고침이 자동으로 되도록 코드 추가하기
# 데이터 저장 index.html 수정후-4
function save_comment() {
let name = $('#name').val()
let comment = $('#comment').val()
let formData = new FormData();
formData.append("name_give", name);
formData.append("comment_give", comment);
fetch('/guestbook', { method: "POST", body: formData, }).then((res) => res.json()).then((data) => {
alert(data["msg"]);
window.location.reload() # 새로고침 코드 추가
응원댓글 하나 더 추가해서, 새로고침 되는지 체크 후 몽고디비 한 번 더 확인
POST 완료
이제 데이터 불러오기 시작!
GET
서버부터 만들기.
데이터베이스에 저장되어 있는 자료 전부 가져오기
dbprac.py에서 여러개 가져오기 코드 복붙
# 데이터 불러오기 app.py 수정후-1
@app.route("/guestbook", methods=["GET"])
def guestbook_get():
all_fans = list(db.fan.find({},{'_id':False})) #여러개 가져오기 코드, 콜렉션이름 fan, 변수명 all_fans 변경
return jsonify({'msg': 'GET 연결 완료!'})all_fans 값을 프론트엔드로 내려줘야함
# 데이터 불러오기 app.py 수정후-2
@app.route("/guestbook", methods=["GET"])
def guestbook_get():
all_fans = list(db.fan.find({},{'_id':False}))
return jsonify({'result': all_fans}) # 'result'로 all_fans의 값을 내려준다
프론트엔드에서 result가 잘 내려오는지 확인해야함
# 데이터 불러오기 index.html 수정후-1
function show_comment() {
fetch('/guestbook').then((res) => res.json()).then((data) => {
let rows = data['result'] # 변수지정, data['result'] 가져오기
console.log(rows) # 콘솔탭으로 확인하기
})
새로고침 후 콘솔탭가면 잘 들어온것 확인 완료
리스트형태? 반복문으로 돌려서 닉네임, 댓글 따로 받아주기
# 데이터 불러오기 index.html 수정후-2
function show_comment() {
fetch('/guestbook').then((res) => res.json()).then((data) => {
let rows = data['result']
rows.forEach((a)=>{ # 반복문 돌리기
let name = a['name'] # 콘솔탭의 name을 name 이라는 변수로 넣어주기
let comment = a['comment']# 콘솔탭의 comment을 comment 이라는 변수로 넣어주기
console.log(name, comment) # 콘솔탭에 찍어서 테스트
})
})
콘솔에 잘 찍히는 것 확인
temp_html 만들어서 붙여주기
# 데이터 불러오기 index.html 수정후-3
function show_comment() {
fetch('/guestbook').then((res) => res.json()).then((data) => {
let rows = data['result']
$('#comment-list').empty() # 기존에 작성된 것 비워주기
rows.forEach((a)=>{
let name = a['name']
let comment = a['comment']
let temp_html = `<div class="card-body"> #temp-html 영역 복붙
<blockquote class="blockquote mb-0">
<p>${comment}</p> # 코멘트 들어가는 것 변수넣기
<footer class="blockquote-footer">${name}</footer> # 네임 들어가는 것 변수넣기
</blockquote>
</div>`
$('#comment-list').append(temp_html) # 들어갈 영역의 id찾아 넣어서 append 해주기
})
})저장후 새로고침하여 다시 확인,
새로운 닉네임 댓글 추가해보기
기존에 있던 내역 하단에 뜨는 것 확인 되고 새로 작성한 것도 제대로 들어감.
몽고디비 데이터베이스 안에도 제대로 들어간 것 확인 완료
GET 완료
여기까지 하면 팬명록 서버 만드는 것 완료!!!!!!!!!
이제 우리가 만든 팬명록 서비스를 클라우드 환경에 올리기 전에
(인터넷에 올려 모든 사람들이 볼 수 있게 하기 전에)
og 태그를 먼저 꾸며보도록 한다!
(링크 복붙했을 때 이미지, 제목 등이 이쁘게 나오게 하기 위해!)
index.html의 head부분에 <title> 밑에 og태그 코드스니펫 복붙
# og태그 index.html 수정후-1 <head> 부분에 추가하기
<meta property="og:title" content="내 사이트의 제목" /> #추가
<meta property="og:description" content="보고 있는 페이지의 내용 요약" /> #추가
<meta property="og:image" content="이미지URL" /> #추가
그 다음, 자기가 좋아하는 가수의 공연이미지를 구글에 검색해보기
(난 뉴진스 >,.<)
이미지를 찾은 후 오른쪽마우스 - 이미지 주소 복사 클릭
코드에 이미지url을 지우고 붙여넣기
# og태그 index.html 수정후-2
<meta property="og:title" content="내 사이트의 제목" />
<meta property="og:description" content="보고 있는 페이지의 내용 요약" />
<meta property="og:image" content="https://magazine.cheil.com/wp-content/uploads/2022/09/%EC%BD%98%ED%85%90%EC%B8%A0B_960_600_7-1.jpg" />
# url 새로 복사한 것 붙여넣기
추가로, 하단에 내려보면 백그라운드 이미지 url도 바꿔주기
#og태그 index.html 수정후-3
.mypic {
width: 100%;
height: 300px;
background-image: linear-gradient(0deg,
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.5)),
url("https://cdn.topstarnews.net/news/photo/201807/456143_108614_510.jpg");
# 요 백그라운드 이미지 url 수정해주기(기본은 10센치 이미지였음)
사이트의 제목도 바꿔주기
#og태그 index.html 수정후-4
<body>
<div class="mypic">
<h1>십센치(10cm) 팬명록</h1> #십센치 -> 뉴진스 바꿔주기
<p>현재기온: <span id="temp">36</span>도</p>
</div>
og태그 추가로 붙였던 곳의 제목도 똑같이 바꿔주기
#og태그 index.html 수정후-5
<meta property="og:title" content="뉴진스 팬명록" /> #내 사이트의 제목 <-바꿔주기
<meta property="og:description" content="아티스트에게 응원 한마디!" /> #보고 있는 페이지의 내용 요약 <-바꿔주기
<meta property="og:image" content="https://magazine.cheil.com/wp-content/uploads/2022/09/%EC%BD%98%ED%85%90%EC%B8%A0B_960_600_7-1.jpg" />
사이트 들어가서 새로고침 해보면
이렇게 백그라운드 사진과 내용이 바뀐 것이 확인 가능하다
이제 배포하기!
내 프로젝트를 서버에 먼저 올려야 함
원래 개념은 내 컴퓨터가 계속 켜져 있어야,
내 프로젝트를 배포해줄 수가 있는데 내 컴퓨터를 계속 켜놓긴 어려운일;
그럼 내 컴퓨터 대신 계속 켜져있을 컴퓨터를 구매해야함(?)
그걸 서버라고 부름!
그러나 요즘은 컴퓨터를 직접 사서 셋팅하는 일은 없음.
인터넷 환경에서 컴퓨터를 대여함
어떻게? 클라우드 환경 이용!
그 클라우드 환경이 5주차 시작할 때 처음 깔았떤 AWS!
그 중에서 AWS Elastic Beanstalk 기능을 제공하고 있음
(배포가 쉽고, 자동화가 되어있는 쉬운 방식)
저 엘라스틱 빈스톡 기능을 활용해서 인터넷에 배포해 볼 예정
https://ap-northeast-2.console.aws.amazon.com/elasticbeanstalk/home?region=ap-northeast-2#/welcome
https://ap-northeast-2.console.aws.amazon.com/elasticbeanstalk/home?region=ap-northeast-2#/welcome
ap-northeast-2.console.aws.amazon.com
방법이.. 번거롭기 때문에 미래의 내가 다시 한다면
5-13 강의를 보고 따라하기를..!!!!!!
오른쪽 상단 본인 아이디 - 보안 자격 증명 클릭 후 - 엑세스키 생성
생성된 엑세스키와 비밀엑세스키를 복사해서 따로 메모장에 붙여넣고
배포 명령어 모음도 코드스니펫에서 복사해서 메모장에 같이 넣어준다.
이후 다시 vscode를 열어 터미널에 clear 입력해서 깔끔하게 만들어 준 후,
배포 명령어 모음을 순차적으로 터미널에 입력해서 실행한다
이후 application.py에 들어가서 기존에 있는 코드를 지우고 붙여넣어준다
이후 awsebcli 라이브러리 하나 또 설치해주고..
....
엄청 많은 설치들이 끝나고...
(올릴 파일들을 준비해놓고,
컴퓨터를 하나 구매하고...)
.....
.....
(미래의 나 자신.. 엑세스키 메모장을 확인해라^^)
다 완성 후 aws에서 왼쪽에 어플리케이션을 누르면 요런 화면이 뜸
왼쪽에 환경을 누르면 요런 화면이 뜸
저 오른쪽에 url을 들어가보면(컨트롤 누르고 누르면 새창에서 열림)
내 홈페이지를 볼 수 있음!
og태그 확인
카톡창에 붙여넣으니 og태그도 내가 지정한대로 이쁘게 나오는 것을 확인할 수 있다.
이렇게 하면 배포까지 완료한 것!!!!!!!
추가로 하나 더,
수정할 때는 어떻게?
deploy 폴더 안에 있는 내용들이 실제로 배포가 되는 것
내 컴퓨터에서 돌려 본다음에(localhost:5000) 괜찮으면 배포하면 됨.
폴더를 열고, venv로 맞춰준 다음(새터미널)
내 app.py에 들어가서 오른쪽마우스 - 파이썬 파일 실행해서
localhost:5000 에 들어가서 확인해 본 뒤,
templates의 index.html에 들어가서 제목을 '내가 만든 아이유 팬명록'이라고 바꾼다면
해당 <h1>을 바꾸고 저장하고 localhost:5000 다시 확인해보기
그 이후 바뀐부분을 그대로 복사한다.
그 다음 deploy 폴더 안에 있는 templates의 index.html에 들어가서
바뀐부분을 똑같이 바꿔준다.
(아니면, 원래 내 코드 전체를 복사해서 디플로이 index.html에 붙여넣기 해도됨ㅋ)
그럼 이제 업로드를 해줘야함
일단 deploy 폴더로 이동을 한 다음에 업로드를 해야함
cd deploy 터미널에 붙여넣고 엔터
그 상태에서 업로드!
eb deploy myweb 터미널에 붙여넣고 엔터
조금 기다리면 완료됨(url 다시 들어가보면 바뀌어있음)!
** 과금이 걱정된다면? **
** eb create를 자주하면 안됨!!!!!!!!!!!!!
할 때마다 서버를 구매하는 개념임
aws의 앨라스틱 빈스톡에 들어가서 어플리케이션을 들어가보면,
어플리케이션이 한 개만 있어야함
환경에 가도 한 개만 있어야함
그래야 돈이 안나감!!! 아주 중요
혹시나 여러개가 있다면
선택-작업-어플리케이션 삭제 클릭
deploy 똑같이 입력 후 삭제 클릭
1년이 지나면 과금이 되니 위와 같은 방법으로 삭제!!!!
(후후 캘린더에 추가함)
마지막 숙제는 내가 만든 홈페이지 url을 제출하면 끝!
총 정리~~~~~~~~~~~~~~~~~~~~~ 꺆
1주차 프론트엔드(html css)
2주차 javasript
3주차 python(크롤링, 데이터베이스)
4주차 5주차 flask(파이썬 프레임워크, 서버만들기, 배포)
꺅!!!!!!!!!!!!!!!!!!끝!!!!!!!!!!!!!!!!!!!!!!!!
아직 기간은 3주밖에 지나지 않았지만 5주차까지 끝났당
서로에게 박수쳐주자고해서 남자친구가 박수쳐줬음 >_<
♥
웹개발 강의를 들으면서,
처음에는 이해가 안되는 부분도 많고 개념이 모자라서 뭐지?했던것도 많았지만..
3번이상? 반복하면 머리에 들어오는 건 확실한 것 같다!
그리고 여러번 해보니 꽤 재밌다고 생각!!!!
선생님 강의 속도가 처음 배우는 사랑미 옆에서 코드를 따라쳐보면..
10분짜리 강의가 30분 40분을 잡아먹어서.. 빠른속도에 살짝.. 짜증이났는데..(ㅋ_ㅋ)
나중엔 선생님이 말하기 전에 후루룩 치는 내 모습에 뿌듯!
(틀릴때도 많았지만ㅎ)
내가 배운 건 정말 작은 부분....이겠지만
내 생각보다 웹개발을 배우는게 더 재미있었고(파이썬 데이터 분석보다ㅋ)
여태 배운 코드스니펫을 잘 활용하면
내가 만들고 싶은 홈페이지도 만들 수 있을 것 같다!
두 가지 강의를 같이 들어서 살짝 머리가 섞이고
이거 하고 저거 하고 좀 정신없이 따라다니기 바빴는데..
끝까지 완강한 내 자신 칭차내!
(아직 데이터 분석 2주차가 남았다...)
앞으로 나날이 발전하는 찐쥬가 되기를!
뿌듯하당 >_<!
'코딩 개발일지 > 웹개발 종합반(스파르타 코딩클럽)' 카테고리의 다른 글
| <스파르타 코딩클럽 웹개발 종합반 4주차> (0) | 2023.03.12 |
|---|---|
| <스파르타 코딩클럽 웹개발 종합반 3주차> (0) | 2023.03.07 |
| <스파르타 코딩클럽 웹개발 종합반 2주차> (0) | 2023.02.28 |
| <스파르타 코딩클럽 웹개발 종합반 1주차> (0) | 2023.02.26 |