wisePocket

v0.1 프로젝트 개요 작성 및 폴더 구조 생성 v0.2 기초 View페이지완성, 기초 GET,POST 통신 테스트 완료, 웹 크롤링 기능 테스트 모듈 완료 v0.2.1 POST 응원 댓글 기록하기 기능 구현 완료 v0.2.2 GET 응원 댓글 리스트 보기 기능 구현 완료 v0.2.3 GET 노래 및 순위, 순위 변동 보기 기능 구현 완료 v0.2.4 GET 날씨 보기 기능 구현 완료 v0.2.4.1 og태그 추가 v1.0 최종 테스트용 프로젝트 병합 v1.0 최종 테스트 프로토타입 배포 완료(http://myweb.eba-6icts6dp.ap-northeast-2.elasticbeanstalk.com/) 해당 프로젝트는 아래 깃을 통해 업데이트되고 있습니다. https://github.com/yzpoc..

서울의 실시간 날씨 정보 OpenAPI 데이터를 받아와서 HTML 헤더 부분에 표시해주려 한다. 1. 데이터 명세 URL : http://spartacodingclub.shop/sparta_api/weather/seoul Contents : 현재 온도 : 'temp': temp / from URL list 현재 기후 : 'icon': icon / from URL list 2. 기능 구현을 위한 script.js 부분 수정 및 작성 OpenAPI 기본 골격 // [Temp Read] function set_temp() { fetch("").then((res) => res.json()).then((data) => { console.log(data) }); } OpenAPI URL = http://sparta..

이전 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..

개발하고자 하는 프로젝트의 서버를 실행하고 웹브라우저로 URL에 접근 했을 때, View 페이지 로드"(document).ready()" 및 이벤트"onclick()"에서 JavaScript 요청에 대한 테스트용 메시지 알림창 생성을 확인해야 한다. Frontend와 병합하여 1차 테스트를 진행 해당 백엔드 요청 응답 흐름은 이전 프로젝트인 project mars와 유사하다. https://ohnyong.tistory.com/56 [Flask] Flask framework 미니프로젝트(project mars) 04 (Backend 기초 테스트 GET 요청 및 응답) 개발하고자 하는 프로젝트의 서버를 실행하고 웹브라우저로 URL에 접근 했을 때, View 페이지 로드"(document).ready()" 및..

새로운 앨범 너무 멋져요!개발하고자 하는 프로젝트의 View 페이지(HTML,CSS)와 JavaScript 연결 테스트용 작성 CSS, JavaScript 모듈화(Static) 및 참조 링크 설정 1. HTML 경로 : (project_root)fan/templates/index.html Body는 Container(Wrap)내 Header / Content / Footer 로 구분 Header : 웹 페이지 타이틀 현재 기온을 나타내주는 부분 #temp 현재 날짜 #date 가수의 노래 오늘 순위 #rank 해당 노래의 순위 변동 #rankdiff Content : (Input form) 응원 댓글을 기록하는 양식은 다음과 같다. 닉네임 (#name)을 input 태그를 통해 value 획득 응원 댓글..

개발하고자하는 프로젝트는 웹 크롤링을 이용한다는 점이다. 해당 부분의 기능을 테스트용으로 먼저 구현하고, 본 프로젝트에 삽입 할 예정이다. 실습 내용엔 없지만 스스로 복습겸 구현해보고 싶어서 추가한 기능이다. #### 웹 크롤링 - URL로부터 Super Shy의 데일리 랭킹 크롤링(soup.select_one) 1. 테스트용 URL URL : https://kworb.net/spotify/country/us_daily.html Spotify Daily Chart - United States 146 -5 44 5 347,383 -20,188 2,554,957 -32,059 27,023,386 kworb.net 공식 차트에서는 크롤링이 되지 않아서 타 웹 페이지에서 Spotify의 차트를 제공하고 있어 해..

(venv) 가상환경이 설정된 프로젝트 폴더의 터미널에서 해당 프로젝트에 필요한 프레임워크와 *라이브러리를 설치 한다. 1개씩 각각 설치 할 수도 있지만 두번째 프로젝트기 때문에 필요한 프레임워크와 라이브러리를 한번에 설치한다. 이미 설치된 것들까지 한번 더 확인해준다. pip3 install flask pymongo dnspython requests bs4 certifi 각 설치 패키지는 다음과 같다. 1. Flask framework 설치 pip3 install flask 2. Python으로 MongoDB 사용하는 PyMongo package 설치(DB 연결에 사용) pip3 install pymongo 3. Python용 DNS패키지 Dnspython library 설치(DB 연결에 사용) pip..