스파르타코딩 15일 메이킹 챌린지 프로젝트 개발일지_8일차

이해가 잘 안 되는 부분을 찬찬히 다시 한 번 공부해봅시다.

 

Today I learned

1 클라이언트와 서버 연결 확인하기

2 서버부터 만들기

3 클라이언트 만들기

4 완성 확인하기

 

api 창구, '샘플데이터'를 받아서, 메세지를 내려주고 있네요, 이걸 어디서 요청하느냐, showStar라는 함수에요, 잘 됐다면 메세지 받은 것을 alert으로 띄워주고 있습니다.

서버 쪽에서 해야 할 일은 뭘까요? 로보3t에서 받은 정보를 쭉 내려주면 됩니다, like의 역순으로 내려줘야 합니다, 클라이언트로부터 데이터 받을 게 있나요? 없죠, 그러면 없애줍시다(sample_receive=request.args.get('sample_give)) 삭제, DB 명령어 대신 삽입, 그리고 메세지를 내려줄 게 아니라 movie_stars 변수에 넣어줍시다, pymongo 정렬을 해봅시다,

 

 

showStar 함수를 봅시다, response에서 movie_stars로 들어온 것을 한 번 찍어봐야 합니다, let mystars = response(movie_stars), console.log(mystars), 새로고침 후 검사, 콘솔창에 잘 찍힌 걸 확인해볼 수 있죠,

 

 

이후 for문을 삽입합시다. 

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']
    
    	console.log(name, img_url, recent, url, like)
}

 

새로고침 후 검사, 콘솔창에서 결과가 제대로 나왔는지 확인합니다, 
이제 카드를 작업합시다, html에서 카드에 해당하는 코드 블럭을 찾아 복사합시다, 그리고 console.log 코드 대신 let tmep_html = ``을 입력하고 `` 사이에 복사한 카드 코드 블럭을 붙여넣기합시다, 그리고 바꿔치기해야 할 대상에 ${name}, ${img_url} 등을 입력합니다.
이렇게 temp_html 작업을 마친 다음에 카드의 id를 확인하고 해당 temp_html을 append로 덧붙입니다. for문의 { } 안에 들어있다는 게 중요합니다. 

 

 

 

이후 원래의 카드 코드 블럭은 삭제하고 localhost:5000 창을 확인해보면 다음과 같습니다.

정말 멋지죠?

 

 

---

좋아요 POST

 

만들 API

1) 조회 : 영화배우 pymongoDB 전체를 조회

2) 좋아요 : 클라이언트에서 받은 이름(name_give)으로 찾아서 좋아요(like)를 증가

3) 삭제 : 클라이언트에서 받은 이름(name_give)으로 영화배우를 찾고 해당 영화배우를 삭제?(another function)

 

정리하면, 만들 API 정보는 아래와 같습니다.

요청정보

요청 URL = /api/like, 요청 방식 = post

요청 데이터 : 영화배우 이름(name_give)

서버가 제공할 기능

영화배우 이름(요청데이터)과 일치하는 영화배우 정보의 좋아요 수를 한 개 증가시켜 데이터베이스에 업데이트하고(Update), 성공했다고 응답 메세지를 보냄

 

서버와 클라이언트의 연결확인

 

index.html

 

서버에서 클라이언트로부터 name_give를 받는다.

 

각 코드를 해석하면 다음과 같다

'name_give'를 받아 name_receive란 변수에 넣는다.

name_receive에서 받은 내용을 mystar라는 DB에서 'name'으로 찾고 target_start 변수에 넣는다.

target_star의 'like'는 current_like 변수로 이름붙인다.

new_like는 current_like에서 1이 추가된 값이다.

new_like의 값을 'like'가 되는 조건으로 name_receive의 값이 name인 것을 DB mystar에서 업데이트한다. 

 

 

서버를 위와 같이 작업하고나서 클라이언트에서 sample_give를 name_give로 수정한다.

name을 name_give라는 변수에 담아 데이터를 서버에게 요청한다는 것이다.

마지막 코드는 새로고침 코드이다.

 

---

 

 

추가로 확인해 볼 것

GET과 POST의 차이는?