[스파르타코딩클럽] 웹개발 종합반 5주차 기록
5주차 강의를 들었다.
4주차 때 했던 Flask 프레임워크로 API를 만드는 과정을 다시한번 복습했고,
EC2에 homework 아이유 팬명록을 올려보기도 했다.
5-2 [버킷리스트] 프로젝트 세팅에서부터 5-6 [버킷리스트] POST 연습(완료하기)까지
위와 같은 페이지를 만들어 보았다.
우선
Flask, pymongo, dnspython 패키지를 설치해주었고
static, templates 폴더와 index.html, app.py를 만들어주었다.
@app.route("/bucket", methods=["POST"])
def bucket_post():
bucket_receive = request.form['bucket_give']
bucket_list = list(db.bucket.find({}, {'_id': False}))
count = len(bucket_list) + 1
doc = {
'num' : count,
'bucket': bucket_receive,
'done': 0
}
db.bucket.insert_one(doc)
return jsonify({'msg': '등록 완료'})
서버는 bucket을 받아와서 db에 저장해주면 됐다.
근데 완료를 누르면 지워지게 처리가 되야하기에 bucket에 num과 done을 함께 넣어줘야 했다.
'num'은 bucket 갯수마다 1,2,3,4... 형태로 붙여지는 숫자이기에
bucket_list = list(db.bucket.find({}, {'_id': False}))을 통해 db에 저장된 bucket_list를 찾아주고,
문자열 개수를 반환해주는 함수 len()을 활용해 count = len(bucket_list) + 1을 넣어주었다.
function save_bucket() {
let bucket = $('#bucket').val()
$.ajax({
type: "POST",
url: "/bucket",
data: {bucket_give: bucket},
success: function (response) {
alert(response["msg"])
window.location.reload()
}
});
}
클라이언트는 bucket에 대한 정보만 서버로 보내주고,
서버에서 받아오면 msg를 보여주고 새로고침이 되도록 했다.
@app.route("/bucket", methods=["GET"])
def bucket_get():
bucket_list = list(db.bucket.find({}, {'_id': False}))
return jsonify({'buckets': bucket_list})
서버에서는 받을거없이 buckets에 대한 정보를 보내주기만 하면 됐다.
function show_bucket() {
$.ajax({
type: "GET",
url: "/bucket",
data: {},
success: function (response) {
let rows = response['buckets']
for (let i=0; i<rows.length; i++){
let bucket = rows[i]['bucket']
let num = rows[i]['num']
let done = rows[i]['done']
let temp_html = ``
if (done == 0){
temp_html = `<li>
<h2>✅ ${bucket}</h2>
<button onclick="done_bucket(${num})" type="button" class="btn btn-outline-primary">완료!</button>
</li>`
} else{
temp_html = `<li>
<h2 class="done">✅ ${bucket}</h2>
</li>`
}
$('#bucket-list').append(temp_html)
}
}
});
}클라이언트에서는 buckets을 잘 받아서 반복문을 돌리고 temp_html에 붙여주기만 하면 됐다.
@app.route("/bucket/done", methods=["POST"])
def bucket_done():
num_receive = request.form['num_give']
db.bucket.update_one({'num': int(num_receive)}, {'$set': {'done': 1}})
return jsonify({'msg': '버킷 완료!'})
이제 서버에선 num을 받고 done의 숫자를 1로 업데이트 해주었다.
db.bucket.update_one({'num': int(num_receive)}, {'$set': {'done': 1}})
num_receive는 문자열로 들어오기에 int(num_receive)를 달아주는 것이 중요했다.
function done_bucket(num) {
$.ajax({
type: "POST",
url: "/bucket/done",
data: {num_give: num},
success: function (response) {
alert(response["msg"])
window.location.reload()
}
});
}클라이언트는 num을 서버에 주고 업데이트 된 done 1을 받아와서 보여주면 됨.
그리고 새로고침!
5-7 내 프로젝트 서버에 올리기에서부터 5-14 5주차 끝 & 숙제 설명까지
ec2 서버를 사고 접속하는 방법을 배워보았다.
Git bash를 사용해봤다.
| ls: 내 위치의 모든 파일을 보여준다. pwd: 내 위치(폴더의 경로)를 알려준다. mkdir: 내 위치 아래에 폴더를 하나 만든다. cd [갈 곳]: 나를 [갈 곳] 폴더로 이동시킨다. cd .. : 나를 상위 폴더로 이동시킨다. cp -r [복사할 것] [붙여넣기 할 것]: 복사 붙여넣기 rm -rf [지울 것]: 지우기 sudo [실행 할 명령어]: 명령어를 관리자 권한으로 실행한다. sudo su: 관리가 권한으로 들어간다. (나올때는 exit으로 나옴) |
| #ip 넣어주기 $ ssh -i /c/Users/고승유/Desktop/sparta_mykey.pem ubuntu@13.125.64.163 # python3 -> python sudo update-alternatives --install /usr/bin/python python /usr/bin/python3 10 # pip3 -> pip sudo apt-get update sudo apt-get install -y python3-pip sudo update-alternatives --install /usr/bin/pip pip /usr/bin/pip3 1 # port forwarding sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000 # pip로 패키지 설치하기 pip install (패키지 명) # ssh 접속을 끊어도 서버가 계속 돌게 하기 nohup python app.py & # 강제 종료하기 ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill |
filezilla로 ec2에 업로드 해보았다.
AWS에서 80, 5000포트를 열어주고 미리 구입해둔 도메인을 연결시켜줬다.
아이유(IU) 팬명록
응원 한마디 남기고 가세요!
sparta-systudy.shop
og태그 까지 넣어줬다.
<meta property="og:title" content="아이유(IU) 팬명록" />
<meta property="og:description" content="응원 한마디 남기고 가세요!" />
<meta property="og:image" content="https://pds.joins.com/news/component/htmlphoto_mmdata/201901/09/htm_2019010981529397722.jpg" />
이로써 웹개발 종합반 강의가 종료되었다.
잘 이해가 되지 않는 부분들이 여러개 있었는데 계속 반복 학습해서 완벽히 이해할 수 있도록 해야겠다.
항해99 7기가 시작되기 전 사전 준비 스터디를 신청해서
부트캠프 입소 전 보완해야할 사항을 체크해봐야겠다.