[내일배움단 ai트랙 3기]웹개발 종합반(복습)

22.09.12

 미루고 미루다가 연휴 마지막에 어떻게든 마무리해야할 과제를 끝냈다. 대충 웹페이지를 만드는 흐름을 이해하는데 큰 도움이 된 것 같다. 첫번째 배울때는 서버와 연결이 잘 안됐는데 원인으로는 몽고디비 import해주는 부분에 주소가 잘 못됐나 그랬던 것 같음. 어쨌거나 이제 시작이다. 얼른 마무리하고 앞으로 나가야지.!

---

4-15 4주차 숙제 및 설명

팬명록 완성하기

기능 : 닉네임/응원댓글받아서 저장하기 , 로딩 완료되면 자동으로 붙이기

1)파일 만들기

2)경로설정, 페키지 설치

3)기존에 했던 homework 열어서 이미지, 제목 바꿔주기

4)app.py에서 실행

-숙제

1)서버 만들기(app.py_post)

받을거 찾기(post)

-sample_give가 아니라 name_give / comment_give + print 지우기

-dbprac 가져오기(위에 3줄 복사 붙여넣기)

-post에 넣을거 적기(doc)

doc = {‘name’: name_receive, ‘commment’: comment_receive}

db.homework.insert_one(doc)

return jsonify({‘msg:응원완료!’})

2)클라이언트(index.html)

show_comment를 건들여 줌.

function show_comment에서 success : function 밑에

let rows = response[‘comments’]

for (let i = 0; i < rows.length; i++) {

let name = rows[i][‘name’]

let comment = rows[i][‘comment’]

 

console.log(name, comment)

 

하고 app.py 실행.

 

-붙이는 것 하기

console.log(name, comment) 대신에 let temp_html = `카드 붙일거 다 복사` 하고 안에 ${comment} ,${name} 해주고 맨 밑에 `뒤에 $(‘#comment-list’).append(temp_html)

하고 원래있던애들 삭제.

 

5-1 5주차 배울 것 설치

클라우드 이용 전세계 배포

1)파일질라

2)가비아

 

5-2 [버킷리스트]-프로젝트 세팅

1)새프로젝트 – bucket

2)경로, 파일, 패키지(flask, pymongo, dnspython)

3)뼈대 잡기

 

5-3 [버킷리스트] - 뼈대 만들기

복붙

 

5-4 [버킷리스트] - post 연습(기록하기)

1)이루고 싶은 것 기록해서 서버 넘기기

2)이룬 것에 밑줄 긋기(번호를 먹여서 긋는다)

 

1)sample_give를 bucket_give로 바꾸기

2)db에 저장하기 (번호num, 버킷bucket, 진행중인지done)

doc = {

‘num’:0,

‘bucket’: bucket_receive,

‘done’: 0

}

db.bucket.insert_one(doc)

쌓여있는 버킷에 1을 더해서 나타냄. 리스트의 개수를 세는 방법ㅂ count = len(bucket_list) + 1 하면 됨. 그러면 num:count, bucket:bucket_receive 해주면되고, 위에는

bucket_list_list = list(db.bucket.find({}, {‘_id’: False}))

count = len(bucket_list) + 1

해주면됨.

 

2)클라이언트

save_bucket에 id값 확인하고 let bucket = $(‘#bucket’).val() 하고 data는 {bucket_give:bucket} 해주고 밑에는 window.location.reload()

 

5-5 [버킷리스트] - get 연습(보여주기)

1)get 서버 작업

dbprac에서 all_users 가져오는데 이름 바꾸기( all_users>bucket_list) 그리고 db는 bucket에서 가져오는 것으로 변경

return jsonify(‘buckets’: bucket_list)

2)클라이언트 작업

showbucket 시작하자마자 불림.

우선 콘솔로 찍어봄. console.log(response[‘buckets’])

웹페이지에 하나 추가(모르는사람 도와주기)

console 지우고 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’]

해주고 붙일 곳 찾기

완료를 안하면 button이 있고, 완료를 하면 버튼이 없음.

하고 let done 밑에 let temp_html = `` 하고

if (done == 0 ) {안한거 li 넣기} 여기서 li 안에 스카이다이빙 하기 대신에 ${bucket}, done_bucket(5 대신에 $(num))넣어주고.

else{temp_html = `` li 체크 안된거 } 동일하게 해주고 맨 밑에

$(‘#bucket_list’).append(temp_html)

하고 원래 있던 애들 지워주기

 

5-5 [버킷리스트] - post 연습(완료하기)

클라에서 num받아와야 어떤 것을 done할지 결정 가능

num_receive로 받아오고 업데이트 하기

db.bucket.update_one({‘num’:num_receive}, {‘$set’:{‘done’:1}})

클라에서 넘어오면 숫자를 다 문자로 받기 때문에 num_recieve를 숫자로 바꿔줘야함. 그래서 num_recieve를 int()로 묶어줌

메시지는 버킷완료로 변경

2)클라이언트

done/bucket 함수 찾기

done_bucket에 아예 순서를 박아버림. 그러면 아예 function done_bucket()의 괄호안에 num을 박아버리고 data는 {num_give : num} 그리고 alert밑에 window.location.reload()하면 끝

 

5-7 내프로젝트를 서버에 올리기

localhost 5000은 어디서나 접근할 수 있는 진짜 서버다.

언제나 요청에 응하려면, 컴터가 항상 켜져있어야하고 ,모두가 접근할 수 있도록 해야함.

 

5-8 aws 서버 구매하기

aws할거다하고

git bash

ssh –i 키페어 ubunto@ 주소 하고 엔터 > yes하고 엔터

mkdir 스파르타

ls 스파르타

cd 스파르타 하면 들어가는 것

폴더 밖으로는 cd..

 

5-9 서버 세팅하기

코드스니펫 : 메모장에 입력

깃배시에서 차례대로 복붙

파일질라 켜서 대기

홈워크 폴더 파이참에서 열기

test.py 만들고 print(‘hello sparta’)

파일질라 켜서 옮기기

 

5-10 falsk 서버 실행하기

test.py 삭제

app.py, static, templates 올리기

깃배시에서 flask 깔기 pip install flask 하고 python app.py 해주고 다른 패키지도 다 설치해주기. 퍼블릭 ip주소 복사해서 뒤에 5000하면 안됨.

aws에서 보안 누르고 링크 눌름. edit 인바운드 하고 포트를 5000 추가해줌. 80도 열어주기. 규릭저장하고 인스턴스하면 홈페이지가 나옴.

+)포트포워딩 80을 5000으로 옮겨주는 것.

깃배시끄면 같이 서버 꺼짐. 그래서 우린 이것을 유지시켜줘야함.

nohub

깃배시켜서 화살표 윗키하고 엔터하고 파이선 실행시킴.

nohub python app.py & 하면 서버계속 돌아감.서버 끄고 싶으면 코드스니펫

 

5-12 도메인 연결하기

가비아 들어가서 산거 클릭하고 dns설정 호스트 이름은 @ , ip주소는 그대로 넣기 (숫자만) > 확인하고 저장.

 

5-13 og 태그

파이참 > homework

index.html 하고 적당한 곳에 코드스니펫

title은 창모 팬명록

내용은 응원하고 가세요

이미지 이미지 넣기

깃배시에서 강종하기 > 파일질라 파일 다지우기> 파일 변경하고 다시키기.

 

5-14 5주차 끝 & 숙제 설명

웹서비스 서버와 보이는 것 배움

파이선 언어배우기, 디비배우기

서버만들기, 인터넷 환경에 배포