웹개발 종합반 5주차 개발일지

카테고리 없음

웹개발 종합반 5주차 개발일지

에푸 2021. 8. 26. 19:21

마지막 5주차는 실제 서버를 구매하고 여태까지 만들어온 것을 실제로 접속할 수 있게 만드는 과정이었다.

그리고 지난주차의 복습도 있었는데, 추가적으로 배운 것이 있다.

좋아요 순서에 따라 내림차순으로 정렬하는 것이다

.sort('like', -1)) < 리스트를 보여줄 때 내림차순으로 정렬하게 해주는 코드다

검색할 때, pymongo 정렬이라고 검색했을 때 나왔다

그다음 pymongo sort w3school이라고 검색하면 잘 나온다

sort("name", 1) #ascending 오름차순
sort("name", -1) #descending 내림차순

mydoc = mycol.find().sort("name", -1)

값을 -1에서 1로 바꾸면 오름차순이 된다

따라서 서버 로직은 다음 단계로 구성되어야 합니다.

1. mystar 목록 전체를 검색합니다. ID는 제외하고 like 가 많은 순으로 정렬

2. 성공하면 success 메시지와 함께 stars_list 목록을 클라이언트에 전달

@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. #star_box의 내부 html 태그를 모두 삭제

2. 서버에 1) GET 방식으로, 2) /api/list 라는 주소로 stars_list를 요청

3. 서버가 돌려준 stars_list를 stars라는 변수에 저장

4. for 문을 활용하여 stars 배열의 요소를 차례대로 조회

5. stars[i] 요소의 name, url, img_url, recent, like 키 값을 활용하여 값 조회

6. 영화인 카드 코드 만들어 #star-box에 붙이기

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>

<p class="subtitle is-6">${recent}</p>

</div>

<a href="#" onclick="deleteStar('${name}')" class="card-footer-item has-text-danger"> 삭제

</a>

</footer>

</div>`

$('#star-box').append(temp_html)

}

});

}

따라서 서버 로직은 다음 단계로 구성되어야 합니다.

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로 변경합니다.

@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': '좋아요 완료!'})

좋아요 수를 증가시키기 위해 클라이언트가 전달할 정보는 다음과 같습니다. - 영화인의 이름 (name_give)

따라서 클라이언트 로직은 다음 단계로 구성되어야 합니다.

1. 서버에 1) POST 방식으로,

2) /api/like 라는 url에,

3) name_give라는 이름으로 name을 전달합니다. (참고) POST 방식이므로 data: {'name_give': name} 사용

2. '좋아요 완료!' alert 창을 띄웁니다.

3. 변경된 정보를 반영하기 위해 새로고침합니다.

function likeStar(name) {

$.ajax({

type: 'POST',

url: '/api/like',

data: {name_give:name},

success: function (response) {

alert(response['msg']);

window.location.reload()

}

});

}

그다음은 이제 서버를 구매해서 서버를 열어두는 것에 대해 배웠다

AWS서버를 구매 > Filezilla로 서버에 데이터를 올림 >리눅스커널(git bash)로 조작해서 서버를 켬

간단한 리눅스 명령어

ls: 내 위치의 모든 파일을 보여준다.

pwd: 내 위치(폴더의 경로)를 알려준다.

mkdir: 내 위치 아래에 폴더를 하나 만든다.

cd [갈 곳]: 나를 [갈 곳] 폴더로 이동시킨다.

cd .. : 나를 상위 폴더로 이동시킨다.

cp -r [복사할 것] [붙여넣기 할 것]: 복사 붙여넣기

rm -rf [지울 것]: 지우기

sudo [실행 할 명령어]: 명령어를 관리자 권한으로 실행한다.

sudo su: 관리가 권한으로 들어간다. (나올때는 exit으로 나옴)

그리고 ec2콘솔창에서 한방에 세팅할 수 있는 패키지파일이 필요하다

그걸 설치하고 난 후,

pip install flask로 python에서 썼던 패키지파일들을 설치해준다

pip install pymongo도 설치해준다

그리고

aws에서 5000포트,80포트, 27017포트를 열어주고

mongodb(robo3t)에서도 내 ip와 포트로 열어준다

그리고 이렇게 다 하고나서 서버를 켜주면 된다

내 컴퓨터가 꺼지고서도 서버를 켜려면

nohup python app.py &

로 쳐주면 잘 돌아간다

끌 때는

ps -ef | grep 'app.py'

이걸 치고 프로세스 맨 앞의 번호를 보고

kill -9 [첫줄 pid값]

kill -9 [둘째줄 pid값]

지금도 내 브라우저 elfu.shop은 돌아가고 있다.

모든 강의를 다 마쳤으니 복습 좀더 하고 다음 강의를 찾아봐야겠다