wisePocket

서울의 실시간 날씨 정보 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으로 ..

개발하고자 하는 프로젝트의 서버를 실행하고 웹브라우저로 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()" 및..

배운점: project mars와 비슷한 프로젝트(복습) 하지만 비슷하고 오히려 더 적은 분량이기 때문에 집중해서 진행함 마치 HTML 표준 레이아웃처럼 프로젝트 표준 레이아웃으로 사용해도 될 것 같음 여기에 + 기능들을 project pedia처럼 모듈화 시켜서 테스트하고 붙여나가면 되지 않을까라는 생각 기능 구현을 위한 app.py 부분을 작성할 때 실제로 자문자답하는 방식으로 코드를 작성해 봄 이 부분을 좀 더 상세히 흐름 전체를 외우고 각 부분에 어떤 코드가 사용되는지 반복숙달하면서 암기해야 할 것 같음. 분량이 적기 때문에 해당 프로젝트를 암기하는 것이 좋아 보임 어려운 점: GET과 POST를 계속 쓰는데 정녕 route()에 대한 개념을 찾아보지 않았었음 Route() HTTP(웹 어플리케이..

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

개발하고자 하는 프로젝트의 서버를 실행하고 웹브라우저로 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()" 및..

07번 글에서 POST 연결 기록하기 기능을 구현했으니 DB에 데이터가 누적되어 저장된다. 이제 해당 웹 페이지가 로드될 때 DB에 저장된 기록된 리뷰 목록을 GET 방식으로 불러와서 content 부분에 보여주고자 한다. DB에 등록된 리뷰 영화의 사진(url을 통해 이미지로), 영화 제목, 영화 설명, 별점, 리뷰 내용을 받아서 View 페이지에 넣어주는 기능을 작성해야 한다. #### 리뷰목록확인 - DB에 저장된 기록된 리뷰 데이터 받기(find(==read)) - 받은 데이터를 content 하단 부분에 4열 카드 형태로 출력 1. 데이터 명세 DB : MongoDB Collection : movie Document : 영화 URL : 'url':'url_receive' / from Fronte..

개발하고자 하는 프로젝트의 서버를 실행하고 웹브라우저로 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()" 및..

06번 글에서 POST 연결 주문 기능을 구현했으니 DB에 데이터가 누적되어 저장 된다. 이제 해당 웹 페이지가 로드 될 때 DB에 저장된 주문 목록을 GET 방식으로 불러와서 content 하단 부분에 보여주고자 한다. DB에 등록된 주문자의 이름, 주소, 땅 수량를 받아서 View 페이지에 넣어주는 기능을 작성해야 한다. #### 주문목록확인 - DB에 저장된 주문된 데이터 받기(find(==read)) - 받은 데이터를 content 하단 부분에 표 형태로 출력 1. 데이터 명세 DB : MongoDB Collection : mars Documents 주문자 이름 : 'name':'name_receive' / from Frontend #name-> formData 'name_give':'value'..

개발하고자 하는 프로젝트의 서버를 실행하고 웹브라우저로 URL에 접근 했을 때, View 페이지 로드"(document).ready()" 및 이벤트"onclick()"에서 JavaScript 요청에 대한 테스트용 메시지 알림창 생성을 확인해야 한다. Frontend와 병합하여 1차 테스트를 진행 0. 서버 실행을 위한 라이브러리 임포트와 서버 실행 포트 설정 Flask Framework 라이브러리 request 모듈 jsonify 라이브러리 port=5001(Mac이라 포트충돌 방지) # 라이브러리 임포트 # Flask Framework # view페이지 렌더링을 위한 render_template 메서드 # 요청 데이터에 접근 할 수 있는 flask.request 모듈 # dictionary를 json형..