드디어 대망의 5주차에 접어들었다.
이번 주차에서는 지난 주차에 배운 내용을 복습하고,
4주간에 걸쳐 만든 팬명록 서비스를 직접 배포해보는 작업을 진행했다.
5회차 강의 내용
실습과제 - 나의 버킷리스트
flask, pymongo, dnspython 패키지를 사용하여 작업을 진행했다.
간단히 기록하고, 화면에 출력되게끔 만드는 과정은 전 주와 동일하게 GET, POST 방식으로 데이터를 처리했다.
추가적으로 완료 버튼을 누르면 해당 줄이 빗금쳐지는 기능을 위해서 2 가지 컬럼을 추가하였다.
num - 버킷리스트의 위치를 찾을 수 있도록 주소 역할을 하는 수 (1번부터 시작)
done - 버킷리스트가 완료된 것인지 아닌지 확인하는 지표가 되는 수 (0 = 미완 / 1 = 완료)
따라서, 완료 버튼을 누르게되면 버킷리스트 항목의 done의 값이 0 > 1로 수정되게 되고,
이를 출력하는 화면 단에서는 done의 값에 따라서 html코드를 다르게 지정하여 append 하게 된다.
버킷리스트 추가(Create)
- 서버단
@app.route("/bucket", methods=["POST"])
def bucket_post():
bucket_receive = request.form['bucket_give']
bucket_llst = list(db.bucket.find({}, {'_id': False}))
count = len(bucket_llst)+1
doc = {
'num':count,
'bucket':bucket_receive,
'done':0
}
db.bucket.insert_one(doc)
return jsonify({'msg': '등록 완료'})num값을 순차적으로 등록하기 위해, 버킷리스트의 현재 길이에 해당하는 값을 가져와 1을 더하였다.
done의 default 값은 0으로 등록하였다.
- 프론트 단
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()
}
});
}프론트 단은 전 주와 동일한 내용이므로 설명은 생략하겠다.
버킷리스트 출력(Read)
- 서버 단
def bucket_get():
bucket_list = list(db.bucket.find({}, {'_id': False}))
return jsonify({'buckets': bucket_list})전 주와 동일한 내용이므로 생략하겠다.
- 프론트 단
function show_bucket() {
$('#bucket-list').empty()
$.ajax({
type: "GET",
url: "/bucket",
data: {},
success: function (response) {
rows = response['buckets']
for(let i=0 ; i<rows.length; i++){
let bucket = rows[i]['bucket']
let done = rows[i]['done']
let num = rows[i]['num']
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)
}
}
});
}전 주와 동일한 내용이지만, temp_html 변수의 값을 지정해줄 때 약간의 차이가 있다.
저번과 달리 num과 done값을 가져와 사용하게 되는데,
현재 실행 중인 버킷리스트의 done 값에 따라 html 코드를 다르게 지정해준다.
done이 0이면 버튼이 포함된 버킷리스트를, 1이면 글에 빗금이 쳐진 상태의 버킷 리스트가 출력되게 되는 것이다.
버튼 클릭시 done_bucket() 함수가 실행되게 되는데, 이 때 현재 실행 중인 버킷리스트의 num값을 넘겨주어 실행한다.
버킷리스트 완료 처리(Update)
- 서버 단
@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 값을 활용하여, num의 위치에 해당하는 버킷리스트 데이터의 done 값을 1로 바꾼다.
ex) num = 1 > 1번째 버킷리스트의 done 값을 1로 바꾼다.
- 프론트 단
function done_bucket(num) {
$.ajax({
type: "POST",
url: "/bucket/done",
data: {num_give: num},
success: function (response) {
alert(response["msg"])
window.location.reload()
}
});
}완료 버튼 클릭 시, 해당 함수가 실행 된다.
사이트 로딩 시 할당된 버킷 리스트 변수(rows) 중 선택된 줄의 num을 서버 단으로 넘겨준다.
서비스 배포하기
다른 사용자가 접근할 수 있고, 언제 어디서든 내 서비스를 사용할 수 있도록 하기 위해서 전제조건이 있다.
1. 서버 컴퓨터가 항상 켜져있고, 프로그램이 가동되고 있어야 한다.
2. 모두가 접근할 수 있는 공개 IP주소로 웹 서비스에 접근 할 수 있어야 한다.
하지만, 테스트를 위해서 항상 내 PC를 켜둘 수도 없고, PC를 한대 더 구입하기엔 돈이 너무 많이 든다.
그러한 고민을 해결해줄 수 있는 방법은 바로 클라우드 서비스를 이용하는 것이다.
AWS는 이러한 클라우드 서비스를 제공하며, 서비스 사용자는 항상 켜놓을 수 있는 컴퓨터인 EC2 사용권을 구매해 사용할 수 있다.
상기 2가지 전제조건을 충족하기 위하여 아래와 같은 작업을 수행하였다.
1. Filezila 설치하기
Filezila는 로컬 환경에 있는 파일들을 내가 원하는 서버에 전달해줄 수 있는 프로그램이다.
내가 원하는 서버에 연결하여 내 서비스 실행에 필요한 파일을 넘겨 줄 수 있다.
2. AWS EC2 서버 구매하기
AWS 사이트에서 EC2 서버를 구매할 수 있다. (Ubuntu Server 18.04)
이 때 생성되는 Key pair 파일이 있는데, 서버 접속 시 사용되므로, 매우 중요하다.
.pem 확장자로 저장되므로 관리에 주의해야한다.
여러 과정을 지나 인스턴스 설치가 완료되면 인스턴스 목록에 추가된 것을 확인할 수 있다.
여러 정보는 인스턴스 메뉴의 세부 정보에서 확인이 가능하며, 서버 IP 주소도 확인이 가능하다.
3. EC2 접속하여 서버 세팅하기
OS에 따라 접속 방법이 다른데, Windows OS의 경우는 Git bash 를 통하여 접속할 수 있다.
기본적으로 AWS는 linux로 이루어져 있어, 직접 코드를 입력하여 컴퓨터에 명령을 내려야한다.
코드 스니펫으로 제공된 코드를 입력하여 파이썬, pip을 설치해주고 포트포워딩(port 80 > 5000)을 진행했다.
기본 명령어들
| 폴더 생성 | mkdir 폴더명 |
| 내 위치 파일 보기 | ls |
| 폴더 들어가기 | cd 폴더명 |
| 폴더 나가기 | cd .. |
여러가지 명령어들이 있지만, 간단한 것만 사용해보았다.
서비스 작동에 필요한 파일과 static, templates 폴더를 Filezila를 통해 옮겨주고,
pip install 명령어를 통해서 pymongo, dnspython, flask 패키지를 설치해주었다.
Git bash 프로그램을 종료한 이후에도 항상 서버에서 프로그램을 실행하게끔 하기 위해서
nohup python 파일명 & 명령어를 사용했다.
종료하기 위한 명령어는 ps -ef | grep 'python app.py' | awk '{print $2}' | xargs kill 인데,
파일을 수정할 때 해당 프로그램을 종료해주고 다시 실행하여야한다.
4. 도메인 연결하기
여기까지 작업을 완료하게 되면, 내가 구매한 EC2 IP주소로 접속하였을 때,
내 서비스가 실행되어 있는 것을 확인할 수 있다.
이것을 IP주소가 아니라 우리가 흔히 접속하는 영문 명으로 연결해 주기 위해서, 도메인을 구입해야한다.
Gabia 라는 업체는 IP주소와 도메인(문자열)을 연결하여 전 세계 이용자들이 해당 도메인으로 연결된 서비스에 접근할 수 있도록 하는 DNS(도메인 이름 시스템) 서비스를 제공한다.
가비아에 가입하여 도메인을 구매하고, DNS를 설정하여 내가 구매한 도메인에 EC2 IP주소를 연결할 수 있다.
4가지 과정을 모두 완료하게 되면, 내 서비스에 내가 등록한 도메인으로 다른 사람도 접속할 수 있는 것을 확인할 수 있다.
OG 태그 만들기
저번 주차에 진행했던 내용으로, og 태그를 만들어서 카톡 등의 SNS 환경에 내 도메인을 공유하였을 때, 간단한 정보가 출력되게끔 만들 수 있다.
<meta property="og:title" content="요즘 아이돌"/>
<meta property="og:description" content="응원 한마디 남기고 가세요"/>
<meta property="og:image" content="https://cdn.sisamagazine.co.kr/news/photo/202207/455966_461658_1448.jpg"/>html Head 태그 내에 입력하면 된다.
title, 내용 설명, 이미지 주소에 해당하는 값을 입력한다.
작업을 완료하고 카톡 등에 내 서비스의 도메인을 입력하면 이런 식으로 간단한 정보가 출력되는 것을 볼 수 있다.
5주차 후기
5주차에는 다른 과제가 따로 없이 지금까지 만든 팬명록 서비스의 도메인을 제출하는 것으로 마무리 되었다.
직접 서비스를 배포해본 경험이 없었는데, 간접적으로나마 체험할 수 있어 유익했다.
물론 실제는 이것보다 간단하지는 않을 것이고, 셋팅해야할 부분이 많을 것이기 때문에 좀 더 공부가 필요할 것 같다.
5주 동안 배운 내용들은 정말 웹개발에 있어 가장 기초적인 부분이기 때문에, 쉽게 과정을 마쳤다고 해서 자만하지 말아야겠다는 생각이 든다.
항해 99 시작 전에 해당 강의를 한번 더 들어보고, 주특기로 선택 예정인 Spring의 베이스가 될 자바를 공부하는데 집중적으로 시간을 쏟을 예정이다.
'항해99 > 웹개발 종합반' 카테고리의 다른 글
| 스파르타 코딩클럽 웹개발 종합반 - 4주차 후기 (0) | 2022.12.01 |
|---|---|
| 스파르타 코딩클럽 웹개발 종합반 - 3주차 후기 (0) | 2022.11.30 |
| 스파르타 코딩클럽 웹개발 종합반 - 2주차 후기 (0) | 2022.11.29 |
| 스파르타 코딩클럽 웹개발 종합반 - 1주차 후기 (1) | 2022.11.28 |
