wisePocket

해당 백엔드 요청 응답 흐름은 이전 프로젝트인 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..

개발하고자 하는 프로젝트의 서버를 실행하고 웹브라우저로 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)pedia/templates/index.html Body는 Header / Content 로 구분 Header : 타이틀(title), 영화 기록하기(button onclick 이벤트) Content : button을 누르면 content부분에 리뷰를 기록하는 양식(form) 이 나타남 onclick open_box() 함수 호출 리뷰를 기록하는 양식은 다음과 같다. 영화 URL(#url) input 태그를 통해 value 획득 별점(#star) select>1~5option 태그를 통해..

개발하고자하는 프로젝트는 이전 project mars와 크게 다른 부분이 웹 크롤링을 이용한다는 점이다. 크롤링 할 때 *메타태그를 활용 할 것이라서 해당 부분의 기능을 테스트용으로 먼저 구현하고, 본 프로젝트에 삽입 할 예정이다. #### 웹 크롤링 - URL로부터 영화 이미지, 영화 제목, 영화 설명 항목 메타태그 크롤링(soup.select_one) 1. 테스트용 URL URL : https://movie.daum.net/moviedb/main?movieId=161806 스즈메의 문단속 Daum영화에서 자세한 내용을 확인하세요! movie.daum.net "스즈메의 문단속" 이라는 영화의 URL을 대상으로 테스트를 진행하려한다. 2. URL로 들어가서 메타 태그 확인하기 URL로 들어가서 해당 웹 ..

(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..

1. 프로젝트 sparta_project/(root)pedia/ 폴더 생성, app.py 메인 파일 생성 2. View페이지용 (root)/templates/ 폴더 생성, 메인 뷰페이지 index.html 생성 3. CSS 모듈화 (root)/static/css/ 폴더 생성, CSS용 style.css 생성 4. JS 모듈화 (root)/static/js/ 폴더 생성, JS용 script.js 생성 5. venv 가상 환경 설정 python3 -m venv venv 6. 인터프리터 python 3.8.2 버전 선택 후 (venv)가상환경 적용 터미널 열기 7. git 로컬 리포 등록, github 원격 리포 연동 8. .gitignore생성 및 가상환경 추적 제외 venv/ 9. readme.md 프로젝..

# Flask_project_pedia [Flask] Flask framework 미니프로젝트(project pedia) ## 🖥️ 프로젝트 소개 웹 크롤링을 활용한 간단 리뷰 게시판 형태의 "영화" 리뷰를 등록하는 웹 페이지 서비스 ## 🕰️ 개발 기간 * 23.07.12일 - 23.07.13일 ### 🧑‍🤝‍🧑 맴버구성 - 김인용 - 싱글 프로젝트 ### ⚙️ 개발 환경 - **MainLanguage** : `PYTHON` - **IDE** : VisualStudio Code 1.79.2 (Universal) - **Framework** : Flask Framework - **Database** : MongoDB(5.0.11) - **SERVER** : Flask ## 📌 주요 기능 #### View..

v0.1 프로젝트 생성 Frontend 기초 HTML 작성 v0.2 Flask Framework GET,POST 뼈대 생성 및 서버 생성 / Frontend 브렌치 생성 작업 View 페이지 완료 후 병합 v0.3 HTML, CSS, JS 모듈화로 프로젝트 폴더 구조 변경에 따른 병합 및 Backend 신규 브렌치 생성 작업 v1.0 Backend 기능 구현 완료 및 브렌치 병합 해당 프로젝트는 아래 깃을 통해 업데이트 되고 있습니다. https://github.com/yzpocket/Flask_project_mars

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'..

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