wisePocket

이전 03 웹 크롤링 기능 부분 구현 및 테스트, 시행착오와 해결에서 기능 테스트 부분을 구현했다. https://ohnyong.tistory.com/95 해당 기능 모듈을 본 프로젝트에 활용하고자 한다. 전반적으로 GET방식 요청, 응답과 같은 흐름이다. 전체적인 클라이언트와 서버 간의 흐름을 요약하면 다음과 같다. 우선 프론트에서 웹 페이지 로드가 되면 (document).ready()에 따라 백엔드 요청은 JavaScript의 /ranking이라는 URL로 해당 데이터를 요청하게 설계했다. 이후 응답은 app.py에서는 /ranking 요청에 대한 응답을 준비하는데 웹 크롤링을 시작(테스트 코드로 사전 진행함) 지정한 URL에서 진행 requests로 HTML소스 받음 beautifulsoup으로 ..

POST 연결 기록하기 기능을 구현했으니 DB에 데이터가 누적되어 저장된다. 이제 해당 웹 페이지가 로드될 때 DB에 저장된 기록된 응원 댓글 목록을 GET 방식으로 불러와서 content 하단 리스트 부분에 보여주고자 한다. DB에 등록된 닉네임, 응원 댓글 내용을 받아서 View 페이지에 넣어주는 기능을 작성해야 한다. #### 응원 댓글 목록 확인 - DB에 저장된 기록된 응원 댓글 데이터 받기(find(==read)) - 받은 데이터를 content 부분에 한줄씩 출력 1. 데이터 명세 DB : MongoDB Collection : fan Document : 닉네임 : 'name':'name_receive' / from Frontend #name-> formData 'name_give':'valu..

GET 및 POST 연결 테스트 메서드의 작동여부가 확인되었으니 클라이언트에서 입력값을 받아 DB에 저장하는 것부터 POST 방식으로 연결하고자 한다. 클라이언트에서는 닉네임, 응원 댓글 내용을 받고 이 데이터들을 DB에 넣어주는 기능을 작성해야 한다. #### 응원 댓글 기록 진행 - input,textarea에 값 입력 - '댓글남기기' 버튼으로 입력값 DB로 전송 및 저장 (insert) 1. 데이터 명세 DB : MongoDB Collection : fan Document : 닉네임 : 'name':'name_receive' / from Frontend #name-> formData 'name_give':'value' 응원 댓글 내용 : 'comment':'comment_receive' / fro..

해당 백엔드 요청 응답 흐름은 이전 프로젝트인 project mars와 유사하다. https://ohnyong.tistory.com/57 1. 클라이언트와 서버 연결 확인하기(테스트용) GET 방식과 비슷하지만 요청 할 때 body를 추가하여 요청하는 부분이 다르다. body를 request.form으로 받게되는 부분이 추가된다. 어떤 이벤트에 함수를 연결 할 지 확인 "댓글 남기기" button의 onclick 이벤트로 JavaScript의 save_comment() 함수 호출 JavaScript의 save_comment()라는 함수 실행 formData라는 객체를 생성 {'sample_give':'샘플데이터'}라는 Dictionary 형식 데이터를 .append()를 통해 formData에 담기 sa..

GET 및 POST 연결 테스트 메서드의 작동여부가 확인되었다. 클라이언트에서 입력값을 받아 DB에 저장하는 것부터 *POST 방식으로 연결하고자 한다. 클라이언트에서는 "버킷리스트 메모" 내용을 받고 이 데이터들을 DB에 넣어주는 기능을 작성해야 한다. #### 버킷리스트 기록 진행 - input박스에 텍스트 입력 - '기록하기' 버튼으로 입력값 DB로 전송 및 저장 (insert) 1. 데이터 명세 DB : MongoDB Collection : bucket Document : 버킷리스트 메모 내용 : 'bucket':'bucket_receive' / from Frontend #bucket-> formData 'bucket_give':'value' 2. DB 커넥션 우선 DB에 넣어주어야 하기 때문에 ..

해당 백엔드 요청 응답 흐름은 이전 프로젝트인 project mars와 유사하다. https://ohnyong.tistory.com/57 1. 클라이언트와 서버 연결 확인하기(테스트용) GET 방식과 비슷하지만 요청 할 때 body를 추가하여 요청하는 부분이 다르다. body를 request.form으로 받게되는 부분이 추가된다. 어떤 이벤트에 함수를 연결 할 지 확인 "기록하기" button의 onclick 이벤트로 JavaScript의 save_bucket() 함수 호출 JavaScript의 save_bucket()라는 함수 실행 formData라는 객체를 생성 {'sample_give':'샘플데이터'}라는 Dictionary 형식 데이터를 .append()를 통해 formData에 담기 postin..

GET 및 POST 연결 테스트 메서드의 작동여부가 확인되었으니 클라이언트에서 입력값을 받아 DB에 저장하는 것부터 POST 방식으로 연결하고자 한다. 클라이언트에서는 URL, 별점, 리뷰 내용을 받고 위 URL을 통해서 영화의 제목, 설명, 이미지 URL을 받게 된다. 이 데이터들을 DB에 넣어주는 기능을 작성해야 한다. #### 영화 리뷰 기록 진행 - 대상 영화 URL, 별점, 리뷰 코멘트 입력 - '기록하기' 버튼으로 입력값+크롤링 데이터 DB로 전송 및 저장 (insert) 1. 데이터 명세 DB : MongoDB Collection : movie Document : 영화 URL : 'url':'url_receive' / from Frontend #url-> formData 'url_give':..

해당 백엔드 요청 응답 흐름은 이전 프로젝트인 project mars와 유사하다. https://ohnyong.tistory.com/57 1. 클라이언트와 서버 연결 확인하기(테스트용) GET 방식과 비슷하지만 요청 할 때 body를 추가하여 요청하는 부분이 다르다. body를 request.form으로 받게되는 부분이 추가된다. 어떤 이벤트에 함수를 연결 할 지 확인 "기록하기" button의 onclick 이벤트로 JavaScript의 posting() 함수 호출 JavaScript의 posting()라는 함수 실행 formData라는 객체를 생성 {'sample_give':'샘플데이터'}라는 Dictionary 형식 데이터를 .append()를 통해 formData에 담기 posting()내부 fe..

GET 및 POST 연결 테스트 메서드의 작동여부가 확인되었으니 클라이언트에서 입력값을 받아 DB에 저장하는 것부터 POST 방식으로 연결하고자 한다. 주문자의 이름, 주소, 땅 수량를 받아서 DB에 넣어주는 기능을 작성해야 한다. #### 주문진행 - 주문자 이름, 주문자 주소, 주문하고자하는 땅 수량 입력 - '주문하기' 버튼으로 입력값 DB로 전송 및 저장 (insert) 1. 데이터 명세 DB : MongoDB Collection : mars Document : 주문자 이름 : 'name':'name_receive' / from Frontend #name-> formData 'name_give':'value' 주문자 주소 : 'address':'address_receive' / from Front..

1. 클라이언트와 서버 연결 확인하기(테스트용) GET 방식과 비슷하지만 요청 할 때 body를 추가하여 요청하는 부분이 다르다. body를 request.form으로 받게되는 부분이 추가된다. 어떤 이벤트에 함수를 연결 할 지 확인 "주문하기" button의 onclick 이벤트로 JavaScript의 save_order() 함수 호출 JavaScript의 save_order()라는 함수 실행 formData라는 객체를 생성 {'sample_give':'샘플데이터'}라는 Dictionary 형식 데이터를 .append()를 통해 formData에 담기 save_order()내부 fetch()를 통해 '/mars' URL에 대한 POST 방식 요청 (+ 위 formData 객체를 body로 추가하여 요청..