PROJECT (무비스타)
프로젝트 준비과정
💡 DB 만들기 (데이터 쌓기)
💡 뼈대 준비
✔ app.py 넣고 run한 다음에 localhost:5000가서 확인하기
보여주기 (GET 연습)
⭐️ 순서확인!
✔ 클라이언트와 서버 확인
✔ 서버부터 만들기
✔ 클라이언트 만들기
✔ 완성 확인하기
▶️ 서버 만들기
1. DB에 저장된 영화인 정보 가져옴(ID는 제외, like가 많은 순 정렬)
2. 성공하면 success 메세지와 함께 stars_list목록을 클라이언트에 전달
❕ 이때
✔ 클라이언트로 부터 받을 데이터? 없음
✔ DB에 저장된 데이터를 모두 가져오기만 하면 됨
💡 pymongo에서 내림차순 정렬하는 방법
mydoc = mycol.find().sort("name", -1)
-> 이름을 기준으로 내림차순 하겠다~~
@app.route('/api/list', methods=['GET'])
def show_stars():
movie_star = list(db.mystar.find({}, {'_id': False}).sort('like', -1))
return jsonify({'movie_stars': movie_star})▶️ 클라이언트 만들기
1. 서버가 돌려준 movie_stars를 mystars라는 변수에 저장
2. for 문을 활용하여 mystars배열의 요소를 차례대로 조회
3. mystars[i] 요소의 name, url, img_url, recent, like 키 값을 활용하여 값 조회
4. 영화인 카드 코드 만들어 #star-box에 붙이기
❕ 이때
✔ 먼저 response에 movie_stars가 잘 들어오는지 확인과정 거치기!!
function showStar() {
$.ajax({
type: 'GET',
url: '/api/list?sample_give=샘플데이터',
data: {},
success: function (response) {
let mystars = response['movie_stars']
console.log(mystars)
}
});
}function showStar() {
$.ajax({
type: 'GET',
url: '/api/list?sample_give=샘플데이터',
data: {},
success: function (response) {
let mystars = response['movie_stars']
for (let i = 0; i < mystars.length; i++) {
let name = mystars[i]['name']
let img_url = mystars[i]['img_url']
let recent = mystars[i]['recent']
let url = mystars[i]['url']
let like = mystars[i]['like']
let temp_html =`<div class="card">
<div class="card-content">
<div class="media">
<div class="media-left">
<figure class="image is-48x48">
<img
src="${img_url}"
alt="Placeholder image"
/>
</figure>
</div>
<div class="media-content">
<a href="${url}" target="_blank" class="star-name title is-4">${name} (좋아요: ${like})</a>
<p class="subtitle is-6">${recent}</p>
</div>
</div>
</div>
<footer class="card-footer">
<a href="#"token interpolation">${name}')" class="card-footer-item has-text-info">
위로!
<span class="icon">
<i class="fas fa-thumbs-up"></i>
</span>
</a>
<a href="#"token interpolation">${name}')" class="card-footer-item has-text-danger">
삭제
<span class="icon">
<i class="fas fa-ban"></i>
</span>
</a>
</footer>
</div>`
$('#star-box').append(temp_html)
}
}
});
}▶️ 완성 확인하기
✔ 화면을 새로고침 했을 때 영화인 정보가 조회됨
✔ 좋아요 수 대로 내림차순 확인
좋아요 만들기 (POST 연습)
✔ 클라이언트에서 받은 이름으로 좋아요를 증가!
▶️ 서버 만들기
1. 클라이언트가 전달한 name_give를 name_receive 변수에 넣습니다.
2. mystar 목록에서 find_one으로 name이 name_receive와 일치하는 star를 찾습니다.
3. star의 like 에 1을 더해준 new_like 변수를 만듭니다.
4. mystar 목록에서 name이 name_receive인 문서의 like 를 new_like로 변경합니다.
❕ 이때
✔ 서버가 클라이언트에게 전달받아야하는 정보 : 영화인 이름 (name_give)
@app.route('/api/like', methods=['POST'])
def like_star():
name_receive = request.form['name_give']
target_star = db.mystar.find_one({'name': name_receive})
current_like = target_star['like']
new_like = current_like + 1
db.mystar.update_one({'name': name_receive}, {'$set': {'like': new_like}})
return jsonify({'msg': '좋아요 완료!'})▶️ 클라이언트 만들기
1. 서버에 name_give라는 이름으로 name을 전달
-> POST 방식이므로 data: {'name_give': name} 사용
2. '좋아요 완료!' alert 창을 띄웁니다.
3. 변경된 정보를 반영하기 위해 새로고침합니다.
💡 새로고침 해주는 코드
window.location.reload()
function likeStar(name) {
$.ajax({
type: 'POST',
url: '/api/like',
data: {name_give: name},
success: function (response) {
alert(response['msg']);
window.location.reload()
}
});
}▶️ 완성 확인하기
삭제 만들기 (POST 연습)
▶️ 서버 만들기
1. 클라이언트가 전달한 name_give를 name_receive 변수에 넣기
2. mystar 에서 delete_one으로 name이 name_receive와 일치하는 star를 삭제
3. 성공하면 success 메시지를 반환
@app.route('/api/delete', methods=['POST'])
def delete_star():
name_receive = request.form['name_give']
db.mystar.delete_one({'name': name_receive})
return jsonify({'msg': '삭제 완료!'})▶️ 클라이언트 만들기
1. name_give라는 이름으로 name을 전달
2. 삭제 완료! alert창 띄우기
3. 변경된 정보를 반영하기 위해 새로고침
function deleteStar(name) {
$.ajax({
type: 'POST',
url: '/api/delete',
data: {name_give:name},
success: function (response) {
alert(response['msg']);
window.location.reload()
}
});
}▶️ 완성 확인하기
내 프로젝트를 서버에 올리기
💬 서버/ 클라이언트/ 브라우저 개념 한번 잡고 가야겠다.... 아직은 뭐가 뭔지 헷갈리는 중...
⭐️ 기억하기
✔ 서버는 어떤 컴퓨터든지 역할을 수행할 수 있다!
✔ 모든 사람이 모든 직업을 할 수 있듯이, 모든 컴퓨터도 모든 역할을 할 수 있다~~!
💡 언제나 요청에 응답하려면!
✔ 컴퓨터가 항상 켜져았어야 함
✔ 모드가 접근할 수 있는 공개 IP주소로 나의 웹 서비스에 접근 할 수 있도록 해야함
-> 이는 보약에 매우 취약할 수 있으므로 개인 컴퓨터로 진행하지 않고 인터넷 환경이 있는 컴퓨터를 사서 그 쪽에 올려둔다!
AWS (Amazon Web Sercives)
EC2 서버 구매하기
aws EC2에 접속하기
✔ git base 프로그램 이용
✔ 마지막에 ubuntu@ip~ 로 나오면 접속 성공! (우리가 산 컴퓨터에 원격 접속 성공했다고 생각)
❕ 이때
✔ 리눅스는 클릭이 없기 때문에 모두 명령어로 조작
✔ 리눅스 명령어
ls: 내 위치의 모든 파일을 보여준다.
pwd: 내 위치(폴더의 경로)를 알려준다.
mkdir: 내 위치 아래에 폴더를 하나 만든다.
cd [갈 곳]: 나를 [갈 곳] 폴더로 이동시킨다.
cd .. : 나를 상위 폴더로 이동시킨다.
cp -r [복사할 것] [붙여넣기 할 것]: 복사 붙여넣기
rm -rf [지울 것]: 지우기
sudo [실행 할 명령어]: 명령어를 관리자 권한으로 실행한다.
sudo su: 관리가 권한으로 들어간다. (나올때는 exit으로 나옴)서버 세팅하기
filesilla의 역할 : 내 컴퓨터에 있는 파일들을 업로드 해주는 프로그램
💡 서버환경 통일하기
✔ 새로운 컴퓨터를 구매한 상태기 때문에, 여러 세팅들이 필요! (DB설치, 명령어 통일 등)
⭐️⭐️ 한방에 세팅하는 방법!
- initial_ec2.sh 설치
- filezilla로 업로드 하고, git bash에 아래 코드치면 세팅 완료
sudo chmod 755 initial_ec2.sh #엔터치고
./initial_ec2.shflask 서버 실행해보기
💡 pip로 패키지 설치하기
pip
✔ python 의 package를 쉽게 깔아주는 라이브러리
✔ ex) pip install flask > flask 설치
-> file - setting - +버튼으로 설치했던 작업을 명령어로 실행하는 것
AWS에서 포트 열어주기
✔ 우리가 localhost:5000으로 들어가는 것 처럼 5000포트 이외의 다른 포트를 열어줘야 접속 가능하다
✔ AWS EC2 관리 콘솔로 들어가 [보안]-[보안그룹]-[인바운드 규칙 편집]-각 포트 추가해주기!
- 80포트 : HTTP 접속을 위한 기본포트
- 5000포트 : flask 기본포트
- 27017포트 : 외부에서 mongoDB 접속을 하기위한 포트
원페이지 쇼핑몰 업로드해보기
✔ Robo3T를 이용해 내가 산 서버에 있는 mongodb에 접속
❕ 이때 address는 내가 산 컴퓨터의 주소 넣어주기!
filezilla로 EC2에 업로드 하기
✔ AWS의 mongodb에 아이디/패스워드를 추가했기 때문에 우리의 pymongo에도 입력해줘야 함 (그래야 올바르게 db에 접근할 수 있음)
✔ pymongo 계정 접속
client = MongoClient('mongodb://아이디:비밀번호@localhost', 27017)✔ filezilla에서 파일 업로드 해주기
✔ git base에서 app.py를 켜주면 나의 원페이지 쇼핑몰 업로드 완성!
❔ 어떻게 키고 끌까?
✔ 켜기 -> python app.py
✔ 끄기 -> ctrl + c
포트포워딩 (포트 번호 없애기)
포트포워딩
✔ 80포트로 오는 요청을 5000포트로 전달함.
✔ 리눅스 자체의 기능이다.
sudo iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 5000-> 5000포트에서 웹 서비스가 실행 -> :5000을 뒤에 붙여주며 접속해야한다. 이럴때 뒤에 붙는 포트 번호를 없애려면?
http요청에서 기본이 되는 80포트는 굳이 :80을 붙이지 않아도 자동으로 연결된다. 따라서 포트 번호를 입력하지 않아도 접속되기 위해, 80포트로 오는 요청을 5000포트로 전달하게 하는 포트포워딩을 사용한다
nohup 설정 (접속을 끊어도 서버가 계속 돌게하기)
✔ git bash를 종료하면(접속을 끊으면) 서버가 돌아가지 않는데, 이때 nohop 설정을 통해 접속을 끊어도 서버는 계속 돌아가게 할 수 있다!
✔ git bash에 명령
- 서버가 계속 돌아가게 하기
# 아래의 명령어로 실행하면 된다
nohup python app.py &- 서버 종료하기
# 아래 명령어로 미리 pid 값(프로세스 번호)을 본다
ps -ef | grep 'app.py'
# 아래 명령어로 특정 프로세스를 죽인다
kill -9 [pid값]도메인
✔ 가비아https://my.gabia.com/service#/
✔ DNS관리툴 - 설정 - 레코드 설정
✔ 도메인 접속 완료
og 태그
✔ 내 프로젝트를 공유했을 때 예쁘게 나오도록 꾸며보자!
✔ static 폴더에 400*800 이미지 파일을 넣고 og태그를 head사이에 넣어주기
og tag
<meta property="og:title" content="내 사이트의 제목" /> <meta property="og:description" content="보고 있는 페이지의 내용 요약" /> <meta property="og:image" content="{{ url_for('static', filename='ogimage.png') }}" />
❕ 순서 주의
✔ 서버 종료하기 -> git bash에서 ps -ef | grep 'app.py'
✔ filezilla에서 파일 삭제
✔ html 수정
✔ filezilla에 파일 재업로드
✔ 서버 켜기 --> git bash에서 nohup python app.py &
✔️ 5주차 후기
드디어 마지막 주차인 5주차를 끝냈다! 5주차때는 API 만드는 연습을 계속 하면서 만든 프로젝트를 서버에 올리는 것까지 완성했다. AWS를 통해 서버도 구매해보고 filezilla로 업로드도 시켜보며 다른사람들도 볼 수 있는 결과물을 만들어 내는 과정이 신기했다. 5주차에서는 무언가... 이론적인 내용이 많았는데 확실히 관련 지식이 부족하다는 느낌이 들었다. 관련 용어들이나 기초개념을 다잡는 시간이 필요할 것 같다...!
조금 더 많은 공부를 해서 더 멋!있!는! 것을 만들어보고 싶다는 욕심이 생긴다!
