Project [Toy]

DB에 저장된 기록된 응원 댓글 데이터 받기(find(==read))

받은 데이터를 content 부분에 한줄씩 출력

1. 데이터 명세

DB : MongoDB

Collection : fan

서버 실행을 위한 라이브러리 임포트와 서버 실행 포트 설정은 GET,POST 기초 테스트에서 이미 작성되었다.

Document :

2. 서버 만들기 및 MongoDB 연결

[Flask] Flask framework 미니프로젝트(project fan) 08 (Backend 응원 댓글 목록 보기 기능 구현

해당 기능 모듈을 본 프로젝트에 활용하고자 한다.

전반적으로 GET방식 요청, 응답과 같은 흐름이다.

전체적인 클라이언트와 서버 간의 흐름을 요약하면 다음과 같다.

1.

우선 프론트에서 웹 페이지 로드가 되면 (document).ready()에 따라

2.

백엔드 요청은 JavaScript의 /ranking이라는 URL로 해당 데이터를 요청하게 설계했다.

3.

이후 응답은 app.py에서는 /ranking 요청에 대한 응답을 준비하는데

4.

웹 크롤링을 시작(테스트 코드로 사전 진행함)

5.

데이터를 추출한 이후->정리(리스트화)해주고->json형태로 다시 JavaScript로 반환시켜줌-> Promise 데이터로 변환 -> 자리표시자${variable}로 쉽게 원하는 곳에 입력

따라서 이미 08 GET방식으로 View 페이지에 응원 댓글 목록 보기 기능 구현을 했기 때문에 비슷한 흐름 중에 응답 부분에 웹 크롤링 데이터로 가수이름, 노래제목, 오늘 순위, 순위 변동을 받아서 View 페이지에 넣어주는 기능을 작성해야 한다.

#### 웹 크롤링

URL로부터 Super Shy의 데일리 랭킹 크롤링(soup .find, .select_one)

1. 데이터 명세

URL : https://kworb.net/spotify/country/us_daily.html

[Flask] Flask framework 미니프로젝트(project fan) 09 (Backend Super Shy 랭킹 웹 크롤링 및 보기 기능 구현)

Contents :

GET 및 POST 연결 테스트 메서드의 작동여부가 확인되었으니

클라이언트에서 입력값을 받아 DB에 저장하는 것부터 POST 방식으로 연결하고자 한다.

클라이언트에서는 닉네임, 응원 댓글 내용을 받고

이 데이터들을 DB에 넣어주는 기능을 작성해야 한다.

#### 응원 댓글 기록 진행

input,textarea에 값 입력

'댓글남기기' 버튼으로 입력값 DB로 전송 및 저장 (insert)

1. 데이터 명세

DB : MongoDB

Collection : fan

서버 실행을 위한 라이브러리 임포트와 서버 실행 포트 설정은 GET,POST 기초 테스트에서 이미 작성되었다.

Document :

2. 서버 만들기 및 MongoDB 연결

[Flask] Flask framework 미니프로젝트(project fan) 07 (Backend 응원 댓글 달기 기능 구현

서울의 실시간 날씨 정보 OpenAPI 데이터를 받아와서 HTML 헤더 부분에 표시해주려 한다.

1. 데이터 명세

URL : http://spartacodingclub.shop/sparta_api/weather/seoul

Contents :

2. 기능 구현을 위한 script.js 부분 수정 및 작성

OpenAPI 기본 골격

v0.1 프로젝트 개요 작성 및 폴더 구조 생성

OpenAPI URL = http://spartacodingclub.shop/sparta_api/weather/seoul

•

URL에 위 OpenAPI URL을 입력(요청)하면 해당 URL 서버에서 jsonify()를 통해서 Json 형식으로 변환된 서울시 현재 날씨 데이터를 반환받게 된다.(응답 전송 단계는 해당 URL 서버가 한다.)

•

해당 데이터는 첫 번째 then() 절의 res 인자값으로 들어감

•

JavaScript로 다시 돌아와서 첫 번째 then()으로 들어간 res는 *response.json()에 의해 Promise 객체로 변환

•

해당 객체 데이터는 data라는 변수에 담겨있다.

•

이미 list 형태로 들어와서 data로부터 바로 key값을 조회하면 value를 얻을 수 있다.

•

'temp', 'icon' key의 value들을 원하는 데이터인 temp, icon(url형태) 변수에 할당하고

[Flask] Flask framework 미니프로젝트(project fan) 10 (Backend 서울시 현재 날씨 OpenAPI 보기 기능 구현)

v0.2 기초 View페이지완성, 기초 GET,POST 통신 테스트 완료, 웹 크롤링 기능 테스트 모듈 완료

v0.2.1 POST 응원 댓글 기록하기 기능 구현 완료

v0.2.2 GET 응원 댓글 리스트 보기 기능 구현 완료

v0.2.3 GET 노래 및 순위, 순위 변동 보기 기능 구현 완료

v0.2.4 GET 날씨 보기 기능 구현 완료

[Flask] Flask framework 미니프로젝트(project fan) 11 (프로젝트 완료 및 형상, 버전관리)

View 페이지 로드"(document).ready()" 및 이벤트"onclick()"에서 JavaScript 요청에 대한 테스트용 메시지 알림창 생성을 확인해야 한다. Frontend와 병합하여 1차 테스트를 진행

fetch()와 연속된 .then()절, jsonify(), res.json(), Promise에 대한 이해는 위 project mars에서 정리되었다.

0. 서버 실행을 위한 라이브러리 임포트와 서버 실행 포트 설정

Flask Framework 라이브러리

request 모듈

jsonify 라이브러리

port=5001(Mac이라 포트충돌 방지)

1. 서버 시작 및 브라우저로 URL 입력하여 메인 View 페이지 요청

서버 실행 후 브라우저를 통해 "localhost:5001/" URL을 요청하면

[Flask] Flask framework 미니프로젝트(project fan) 05 (Backend 기초 테스트 GET 요청 및 응답)

백엔드 app.py에서 '/'에 대한 요청으로 연결되며

1. 클라이언트와 서버 연결 확인하기(테스트용)

어떤 이벤트에 함수를 연결 할 지 확인

"댓글 남기기" button의 onclick 이벤트로 JavaScript의 save_comment() 함수 호출

JavaScript의 save_comment()라는 함수 실행

formData라는 객체를 생성

{'sample_give':'샘플데이터'}라는 Dictionary 형식 데이터를 .append()를 통해 formData에 담기

save_comment()내부 fetch()를 통해 '/guestbook' URL에 대한 POST 방식 요청

app.py에서 '/guestbook' URL의 POST 방식 요청에 대한 메서드로 접근

이는 guestbook_post()라 선언된 함수를 실행하는데

request.form을 통해 ['key']에 해당되는 value를 가져오고 "sample_receive"라는 변수에 담는다.

print로 "sample_receive"에 담긴 값 (= value)를 출력하면 python console에 '샘플데이터'를 출력

[Flask] Flask framework 미니프로젝트(project fan) 06 (Backend 기초 테스트 POST 요청 및 응답)

이후, 연결 테스트용으로 {'msg' : 'POST 연결 완료!'} 라 하드코딩된 key, value가

개발하고자하는 프로젝트는 웹 크롤링을 이용한다는 점이다.

해당 부분의 기능을 테스트용으로 먼저 구현하고,

본 프로젝트에 삽입 할 예정이다.

실습 내용엔 없지만 스스로 복습겸 구현해보고 싶어서 추가한 기능이다.

#### 웹 크롤링

URL : https://kworb.net/spotify/country/us_daily.html

URL로부터 Super Shy의 데일리 랭킹 크롤링(soup.select_one)

1. 테스트용 URL

Spotify Daily Chart - United States 146 -5 44 5 347,383 -20,188 2,554,957 -32,059 27,023,386 kworb.net

공식 차트에서는 크롤링이 되지 않아서 타 웹 페이지에서 Spotify의 차트를 제공하고 있어 해당 URL을 대상으로 테스트를 진행하려한다.

2. URL로 들어가서 Super Shy 랭킹 소스 확인하기

Spotify 공식 홈페이지의 차트에서는 크롤링이 불가능하다

Spotify의 일일 랭킹이 기록되는 kworb.net에서 크롤링을 진행하기로 결정했다.

URL로 들어가서 해당 웹 페이지의 소스를 확인해보면

[Flask] Flask framework 미니프로젝트(project fan) 03 (웹 크롤링 기능 부분 구현 및 테스트, 시행착오와 해결 soup.find(string), .parent 의문)

새로운 앨범 너무 멋져요!개발하고자 하는 프로젝트의 View 페이지(HTML,CSS)와 JavaScript 연결 테스트용 작성

경로 : (project_root)fan/templates/index.html

1. HTML

Body는 Container(Wrap)내 Header / Content / Footer 로 구분

Header :

Content :

div(#comment-list)>div(.card) 에 추후 guestbook_post() 함수의 결과가 1행씩 추가 될 예정

Footer : None

2. CSS

(project_root)fan/static/css/style.css로 분리 모듈화

Google Fonts "Orbit" 글씨체 전체 적용

Image 배경 어둡게 적용

[Flask] Flask framework 미니프로젝트(project fan) 04 (Frontend 기초 테스트 View 페이지 작성 및 모듈화 + 현재날짜 HTML에 표기 구현)

(Input form) 입력 양식 박스인 div(.mypost) 그림자 효과 box-shadow 적용, 너비 500px 고정

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 가상 환경 설정

6. 인터프리터 python 3.8.2 버전 선택 후 (venv)가상환경 적용 터미널 열기

7. git 로컬 리포 등록, github 원격 리포 연동

8. .gitignore생성 및 가상환경 추적 제외

9. readme.md 프로젝트 개요 작성 및 생성

[Flask] Flask framework 미니프로젝트(project fan) 01 (초기 환경 구축)

(venv) 가상환경이 설정된 프로젝트 폴더의 터미널에서 해당 프로젝트에 필요한 프레임워크와 *라이브러리를 설치 한다.

1개씩 각각 설치 할 수도 있지만 두번째 프로젝트기 때문에 필요한 프레임워크와 라이브러리를 한번에 설치한다.

이미 설치된 것들까지 한번 더 확인해준다.

각 설치 패키지는 다음과 같다.

1. Flask framework 설치

2. Python으로 MongoDB 사용하는 PyMongo package 설치(DB 연결에 사용)

3. Python용 DNS패키지 Dnspython library 설치(DB 연결에 사용)

4. HTTP 요청을 보낼 수 있는 패키지 requests(웹 크롤링에서 사용)

5. html, xml 등 데이터를 풀링, 파싱 해주는 라이브러리 beautifulsoup(웹 크롤링에서 사용)

[Flask] Flask framework 미니프로젝트(project fan) 02 (프레임워크 및 라이브러리 설치)

# Flask_project_fan

[Flask] Flask framework 미니프로젝트(project fan)

## 프로젝트 소개

뉴진스 아이돌 그룹의 응원댓글을 기록하는 팬사이트 컨셉의 간단한 메모 게시판 형태의 웹 페이지 서비스

## 개발 기간

23.07.16일 - 23.07.18일

**MainLanguage** : `PYTHON`

**IDE** : VisualStudio Code 1.79.2 (Universal)

**Framework** : Flask Framework

**Database** : MongoDB(5.0.11)

[Flask] Flask framework 미니프로젝트(project fan) 00 (개요)

**SERVER** : Flask

## 주요 기능

06번 글에서 POST 연결 기록하기 기능을 구현했으니 DB에 데이터가 누적되어 저장된다.

이제 해당 웹 페이지가 로드될 때 DB에 저장된 기록된 버킷 리스트 목록을 GET 방식으로 불러와서 content 하단 부분에 보여주고자 한다.

DB에 등록된 버킷 리스트 내용을 받아서 View 페이지에 넣어주는 기능을 작성해야 한다.

#### 버킷리스트 목록 확인

DB에 저장된 기록된 버킷리스트 데이터 받기(find(==read))

받은 데이터를 content 하단 부분에 한줄씩 출력

1. 데이터 명세

DB : MongoDB

Collection : bucket

기록하기 POST 요청 부분을 작성하면서 서버 및 MongoDB 연결은 이미 작성되어 있다.

Document :

2. 서버 만들기 및 MongoDB 연결

[Flask] Flask framework 미니프로젝트(project bucket) 07 (Backend 버킷리스트 목록 보기 기능 구현

GET 및 POST 연결 테스트 메서드의 작동여부가 확인되었다.

클라이언트에서 입력값을 받아 DB에 저장하는 것부터 *POST 방식으로 연결하고자 한다.

클라이언트에서는 "버킷리스트 메모" 내용을 받고

이 데이터들을 DB에 넣어주는 기능을 작성해야 한다.

#### 버킷리스트 기록 진행

input박스에 텍스트 입력

'기록하기' 버튼으로 입력값 DB로 전송 및 저장 (insert)

1. 데이터 명세

DB : MongoDB

Collection : bucket

우선 DB에 넣어주어야 하기 때문에 DB를 사용할 수 있도록

Document :

2. DB 커넥션

pymongo를 임포트

[Flask] Flask framework 미니프로젝트(project bucket) 06 (Backend 버킷리스트 기록하기 기능 구현 / DB설계, DB연결, POST 요청 및 응답, insert)

v0.1 프로젝트 개요 작성 및 폴더 구조 생성

v0.2 Frontend 기초뷰페이지완료

v0.3 Backend 서버 생성 및 기초 GET,POST 통신 테스트 병합

v0.4 Backend POST 기록하기 기능 구현 완료

v0.5 Backend GET 리스트불러오기 기능 구현 완료

v1.0 최종 테스트용 프로젝트 병합

[Flask] Flask framework 미니프로젝트(project bucket) 08 (프로젝트 완료 및 형상, 버전관리)

배운점:

[Flask] Flask framework 미니프로젝트(project bucket) 10 프로젝트 회고 배운점, 어려웠던점

어려운 점:

3주간 배웠던 python과 mongodb, 웹 크롤링 기능 등을 합치고, 응용하면서 주제가있는 작은 게시판 방식의 웹 페이지를 만들게 된다.

완성된 프로젝트를 겉으로 보면 솔직히 “부족"하다고 느낄 수 있는데, 오히려 나는 반대로 너무 중요하다고 생각했다. 그리고 중요한 시간이 되었다. Java로 볼 땐 아주 복잡해보였는데 한번 봐서그런건지, Python으로 구현하는게 금방 되는 것인지 모르겠다. 확실히 간단한 미니 페이지 정도는 Python으로도 금방 만들 수 있었다.

특히 대충 알고 있던 코드의 흐름을 한줄 한줄씩 이동하면서 가장 중요한 요청, 응답, 데이터 흐름을 파악하는데 아주 큰 도움이 되었다. 또한 실제 코드를 작성 할 때의 순서, 어떤 데이터를 가져와야 하는지 자문해야 하는 타이밍, 어떤 샘플 코드를 사용해야하는지 등등 복잡하고 화려한 코드들보다 직관적으로 중요한 흐름을 배울 수 있었다.

우선적으로 스스로 코드 리뷰를 통해 데이터 흐름에 따른 코드 작성을 시도해보기 했으며 작업 흐름에 따른 작성법을 시도해보기도 했다.

이러면 실무에서 어떤 기능, 웹 전체를 구현해야 할 때 내가 현재 어느 시점에 있고 어떤 부분을 작업해야 될 지 감이 잡힐 것 같았다.

또한 그냥 그런가보다 하고 지나갔던 코드들에서 숨겨진 아주 기초적인 용어들에 대한 개념을 정리하는 버릇을 들여봤다. 컴퓨터공학의 이론을 단기간에 배울수 없을 정도로 광범위하지만 최소한 내가 쓰는 코드와 기능들에 대해서 "공식 문서"를 찾아서 신뢰도 높은 해설을 참고하고자 했다. 모르는 함수가 하나 나오면 공식문서로 들어가면 또 모르는 용어가 나온다. 그 용어를 또 타고 들어가서 찾아보고.. 이런 상황이 반복되서 생각보다 자습 시간이 엄청 길어졌다. 아무리 이래도 이해도가 아주 단편적이지만, 잘못된 용어 사용은 개발자간에 오해를 살 수 있기 때문에 꼼꼼히 모르는 것들을 찾아보려 노력했다. 또한 너무 심각하게 깊게 파지는 않으려했다. 내가 이해할 수 있는 선에서 궁금증을 해소하고 적당히 빠져나와야 하는 것을 느꼈다. 잘못하면 시간을 허비 할 수도 있고 너무 관련없는 것까지 배우게 될 수 있다.

이번주는 특별히 스스로 진지하게 마치 팀 프로젝트를 진행하는 것 처럼 팀장, 프론트엔드 팀원1, 백엔드 팀원2 처럼 3명의 역할을 혼자 나누어서 진행해보았다. 프로젝트 개요와 DB설계, 초기 github을 통한 원격저장소 설정과 파트별 브랜치 생성, 분업, 파트가 완료되면 검토, 테스트가 필요하면 구현 부분까지만 병합하여 테스트용 버전을 생성하는 등 활동을 진행했다.

이 자습 활동을 통해서 Flask Framework에 대해 기본적인 것들을 파악해 나가는데 큰 도움이 되었다. 다음 주에 진행되는 프로젝트도 어떤 주제일지, 어떤 새로운 기능이 있을지 기대된다.

[Flask] 미니프로젝트 4주차 mars, pedia 스터디 회고(WIL)

1. 클라이언트와 서버 연결 확인하기(테스트용)

어떤 이벤트에 함수를 연결 할 지 확인

"기록하기" button의 onclick 이벤트로 JavaScript의 save_bucket() 함수 호출

JavaScript의 save_bucket()라는 함수 실행

formData라는 객체를 생성

{'sample_give':'샘플데이터'}라는 Dictionary 형식 데이터를 .append()를 통해 formData에 담기

posting()내부 fetch()를 통해 '/bucket' URL에 대한 POST 방식 요청

app.py에서 '/bucket' URL의 POST 방식 요청에 대한 메서드로 접근

이는 bucket_post()라 선언된 함수를 실행하는데

request.form을 통해 ['key']에 해당되는 value를 가져오고 "sample_receive"라는 변수에 담는다.

[Flask] Flask framework 미니프로젝트(project bucket) 05 (Backend 기초 테스트 POST 요청 및 응답)

print로 "sample_receive"에 담긴 값 (= value)를 출력하면 python console에 '샘플데이터'를 출력

1. 프로젝트 sparta_project/(root)bucket/ 폴더 생성, 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 가상 환경 설정

6. 인터프리터 python 3.8.2 버전 선택 후 (venv)가상환경 적용 터미널 열기

7. git 로컬 리포 등록, github 원격 리포 연동

8. .gitignore생성 및 가상환경 추적 제외

[Flask] Flask framework 미니프로젝트(project bucket) 01 (초기 환경 구축)

(venv) 가상환경이 설정된 프로젝트 폴더의 터미널에서 해당 프로젝트에 필요한 프레임워크와 *라이브러리를 설치 한다.

1개씩 각각 설치 할 수도 있지만 두번째 프로젝트기 때문에 필요한 프레임워크와 라이브러리를 한번에 설치한다.

이미 설치된 것들까지 한번 더 확인해준다.

각 설치 패키지는 다음과 같다.

1. Flask framework 설치

2. Python으로 MongoDB 사용하는 PyMongo package 설치(DB 연결에 사용)

3. Python용 DNS패키지 Dnspython library 설치(DB 연결에 사용)

4. HTTP 요청을 보낼 수 있는 패키지 requests(웹 크롤링에서 사용)

5. html, xml 등 데이터를 풀링, 파싱 해주는 라이브러리 beautifulsoup(웹 크롤링에서 사용)

[Flask] Flask framework 미니프로젝트(project bucket) 02 (프레임워크 및 라이브러리 설치)

개발하고자 하는 프로젝트의 View 페이지(HTML,CSS)와 JavaScript 연결 테스트용 작성

경로 : (project_root)bucket/templates/index.html

1. HTML

Body는 Header / Content 로 구분

Header : 타이틀(title), 백그라운드 이미지

Content :

Footer : None

2. CSS

(project_root)mars/static/css/style.css로 분리 모듈화

Google Fonts "Gowun Dodum" 글씨체 전체 적용

Image 배경 어둡게 적용, 높이 200px고정

Content부분인 .mybox에 하늘색 테두리 그림자 효과 적용

[Flask] Flask framework 미니프로젝트(project bucket) 03 (Frontend 기초 테스트 View 페이지 작성 및 모듈화)

버킷리스트 목록으로 나타날 li>h2태그에 줄로 구분될 수 있도록 line-through 적용

Tistory로 부터 옮겨졌습니다. 해당 프로젝트 진행 TIL는 아래 링크를 통해 확인 가능합니다.

'Python&Flask Tutorials, AWS EB/Flask_project_bucket' 카테고리의 글 목록

https://ohnyong.tistory.com/category/Python%26Flask%20Tutorials%2C%20AWS%20EB/Flask_project_bucket

# Flask_project_bucket

[Flask] Flask framework 미니프로젝트(project bucket)

## 프로젝트 소개

버킷리스트를 기록하는 컨셉의 간단한 메모 게시판 형태의 게시글을 등록하는 웹 페이지 서비스

## 개발 기간

•

23.07.14일 - 23.07.16일

### 맴버구성

- 김인용 - 싱글 프로젝트

### 개발 환경

•

**MainLanguage** : `PYTHON`

•

**IDE** : VisualStudio Code 1.79.2 (Universal)

•

**Framework** : Flask Framework

•

**Database** : MongoDB(5.0.11)

[Flask] Flask framework 미니프로젝트(project bucket) 00 (개요)

View 페이지 로드"(document).ready()" 및 이벤트"onclick()"에서 JavaScript 요청에 대한 테스트용 메시지 알림창 생성을 확인해야 한다. Frontend와 병합하여 1차 테스트를 진행

https://ohnyong.tistory.com/56

[Flask] Flask framework 미니프로젝트(project mars) 04 (Backend 기초 테스트 GET 요청 및 응답) 개발하고자 하는 프로젝트의 서버를 실행하고 웹브라우저로 URL에 접근 했을 때, View 페이지 로드"(document).ready()" 및 이벤트"onclick()"에서 JavaScript 요청에 대한 테스트용 메시지 알림창 생성 1. 서 ohnyong.tistory.com

fetch()와 연속된 .then()절, jsonify(), res.json(), Promise에 대한 이해는 위 project mars에서 정리되었다.

0. 서버 실행을 위한 라이브러리 임포트와 서버 실행 포트 설정

•

Flask Framework 라이브러리

•

request 모듈

•

jsonify 라이브러리

•

port=5001(Mac이라 포트충돌 방지)

1. 서버 시작 및 브라우저로 URL 입력하여 메인 View 페이지 요청

•

서버 실행 후 브라우저를 통해 "localhost:5001/" URL을 요청하면

[Flask] Flask framework 미니프로젝트(project bucket) 04 (Backend 기초 테스트 GET 요청 및 응답)

배운점:

[Flask] Flask framework 미니프로젝트(project mars) 09 프로젝트 회고 배운점, 어려웠던점

어려운 점:

v0.1 프로젝트 개요 작성 및 폴더 구조 생성

v0.2 웹크롤링 기능 구현용 테스트 모듈 생성 및 테스트

v0.3.1 기초 프론트엔드 클라이언트 프로토타입 View 페이지작성

v0.3.2 기초 백엔드 서버 생성 및 프로토타입 GET 메서드 작성

v0.3.3 프로토타입 POST 메서드 작성

v0.4 기록하기(POST/insert) 기능 구현으로 인한 병합 및 기능 테스트

v0.5 목록보기(GET/find) 기능 구현 완료

v1.0 최종 테스트용 프로젝트 병합

[Flask] Flask framework 미니프로젝트(project pedia) 09 (프로젝트 완료 및 형상, 버전관리)

배운점:

[Flask] Flask framework 미니프로젝트(project pedia) 10 프로젝트 회고 배운점, 어려웠던점

어려운 점:

07번 글에서 POST 연결 기록하기 기능을 구현했으니 DB에 데이터가 누적되어 저장된다.

이제 해당 웹 페이지가 로드될 때 DB에 저장된 기록된 리뷰 목록을 GET 방식으로 불러와서 content 부분에 보여주고자 한다.

DB에 등록된 리뷰 영화의 사진(url을 통해 이미지로), 영화 제목, 영화 설명, 별점, 리뷰 내용을 받아서 View 페이지에 넣어주는 기능을 작성해야 한다.

#### 리뷰목록확인

DB에 저장된 기록된 리뷰 데이터 받기(find(==read))

받은 데이터를 content 하단 부분에 4열 카드 형태로 출력

1. 데이터 명세

DB : MongoDB

Collection : movie

기록하기 POST 요청 부분을 작성하면서 서버 및 MongoDB 연결은 이미 작성되어 있다.

Document :

2. 서버 만들기 및 MongoDB 연결

[Flask] Flask framework 미니프로젝트(project pedia) 08 (Backend 리뷰 목록 보기 기능 구현

GET 및 POST 연결 테스트 메서드의 작동여부가 확인되었으니

클라이언트에서 입력값을 받아 DB에 저장하는 것부터 POST 방식으로 연결하고자 한다.

클라이언트에서는 URL, 별점, 리뷰 내용을 받고

위 URL을 통해서 영화의 제목, 설명, 이미지 URL을 받게 된다.

이 데이터들을 DB에 넣어주는 기능을 작성해야 한다.

#### 영화 리뷰 기록 진행

대상 영화 URL, 별점, 리뷰 코멘트 입력

'기록하기' 버튼으로 입력값+크롤링 데이터 DB로 전송 및 저장 (insert)

1. 데이터 명세

DB : MongoDB

Collection : movie

서버 실행을 위한 라이브러리 임포트와 서버 실행 포트 설정은 GET,POST 기초 테스트에서 이미 작성되었다.

Document :

2. 서버 만들기 및 MongoDB 연결

[Flask] Flask framework 미니프로젝트(project pedia) 07 (Backend 리뷰 기록하기 기능 구현

1. 클라이언트와 서버 연결 확인하기(테스트용)

어떤 이벤트에 함수를 연결 할 지 확인

"기록하기" button의 onclick 이벤트로 JavaScript의 posting() 함수 호출

JavaScript의 posting()라는 함수 실행

formData라는 객체를 생성

{'sample_give':'샘플데이터'}라는 Dictionary 형식 데이터를 .append()를 통해 formData에 담기

posting()내부 fetch()를 통해 '/movie' URL에 대한 POST 방식 요청

app.py에서 '/movie' URL의 POST 방식 요청에 대한 메서드로 접근

이는 movie_post()라 선언된 함수를 실행하는데

request.form을 통해 ['key']에 해당되는 value를 가져오고 "sample_receive"라는 변수에 담는다.

[Flask] Flask framework 미니프로젝트(project pedia) 06 (Backend 기초 테스트 POST 요청 및 응답)

print로 "sample_receive"에 담긴 값 (= value)를 출력하면 python console에 '샘플데이터'를 출력

(venv) 가상환경이 설정된 프로젝트 폴더의 터미널에서 해당 프로젝트에 필요한 프레임워크와 *라이브러리를 설치 한다.

1개씩 각각 설치 할 수도 있지만 두번째 프로젝트기 때문에 필요한 프레임워크와 라이브러리를 한번에 설치한다.

이미 설치된 것들까지 한번 더 확인해준다.

각 설치 패키지는 다음과 같다.

1. Flask framework 설치

2. Python으로 MongoDB 사용하는 PyMongo package 설치(DB 연결에 사용)

3. Python용 DNS패키지 Dnspython library 설치(DB 연결에 사용)

4. HTTP 요청을 보낼 수 있는 패키지 requests(웹 크롤링에서 사용)

[Flask] Flask framework 미니프로젝트(project pedia) 02 (프레임워크 및 라이브러리 설치)

Tistory로 부터 옮겨졌습니다. 해당 프로젝트 진행 TIL는 아래 링크를 통해 확인 가능합니다.

'Python&Flask Tutorials, AWS EB/Flask_project_pedia' 카테고리의 글 목록

https://ohnyong.tistory.com/category/Python%26Flask%20Tutorials%2C%20AWS%20EB/Flask_project_pedia

# 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)

[Flask] Flask framework 미니프로젝트(project pedia) 00 (개요)

개발하고자하는 프로젝트는 이전 project mars와 크게 다른 부분이

웹 크롤링을 이용한다는 점이다. 크롤링 할 때 *메타태그를 활용 할 것이라서

해당 부분의 기능을 테스트용으로 먼저 구현하고,

본 프로젝트에 삽입 할 예정이다.

#### 웹 크롤링- URL로부터 영화 이미지, 영화 제목, 영화 설명 항목 메타태그 크롤링(soup.select_one)

웹 크롤링 테스트를 위한 meta_prac.py를 생성

[Flask] Flask framework 미니프로젝트(project pedia) 03 (웹 크롤링 기능 부분 구현 및 테스트)

View 페이지 로드"(document).ready()" 및 이벤트"onclick()"에서 JavaScript 요청에 대한 테스트용 메시지 알림창 생성을 확인해야 한다. Frontend와 병합하여 1차 테스트를 진행

fetch()와 연속된 .then()절, jsonify(), res.json(), Promise에 대한 이해는 위 project mars에서 정리되었다.

0. 서버 실행을 위한 라이브러리 임포트와 서버 실행 포트 설정

Flask Framework 라이브러리

request 모듈

jsonify 라이브러리

port=5001(Mac이라 포트충돌 방지)

1. 서버 시작 및 브라우저로 URL 입력하여 메인 View 페이지 요청

서버 실행 후 브라우저를 통해 "localhost:5001/" URL을 요청하면

백엔드 app.py에서 '/'에 대한 요청으로 연결되며

[Flask] Flask framework 미니프로젝트(project pedia) 05 (Backend 기초 테스트 GET 요청 및 응답)

home()이 실행되고

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 가상 환경 설정

6. 인터프리터 python 3.8.2 버전 선택 후 (venv)가상환경 적용 터미널 열기

7. git 로컬 리포 등록, github 원격 리포 연동

8. .gitignore생성 및 가상환경 추적 제외

9. readme.md 프로젝트 개요 작성 및 생성

[Flask] Flask framework 미니프로젝트(project pedia) 01 (초기 환경 구축)

개발하고자 하는 프로젝트의 View 페이지(HTML,CSS)와 JavaScript 연결 테스트용 작성

경로 : (project_root)pedia/templates/index.html

1. HTML

Body는 Header / Content 로 구분

Header : 타이틀(title), 영화 기록하기(button onclick 이벤트)

Content : button을 누르면 content부분에 리뷰를 기록하는 양식(form) 이 나타남 onclick open_box() 함수 호출

div(#cards-box)>div(.col) 에 추후 posting() 함수의 결과가 1열씩 추가(4열 초과 시 다음 행으로 이동) 될 예정

Content 하단

2. CSS

(project_root)pedia/static/css/style.css로 분리 모듈화

Google Fonts "Gowun Dodum" 글씨체 전체 적용

Image 배경 어둡게 적용

[Flask] Flask framework 미니프로젝트(project pedia) 04 (Frontend 기초 테스트 View 페이지 작성 및 모듈화)

button 크기 지정, 투명화 transparent 적용

1. 클라이언트와 서버 연결 확인하기(테스트용)

어떤 이벤트에 함수를 연결 할 지 확인

"주문하기" button의 onclick 이벤트로 JavaScript의 save_order() 함수 호출

JavaScript의 save_order()라는 함수 실행

formData라는 객체를 생성

{'sample_give':'샘플데이터'}라는 Dictionary 형식 데이터를 .append()를 통해 formData에 담기

save_order()내부 fetch()를 통해 '/mars' URL에 대한 POST 방식 요청

app.py에서 '/mars' URL의 POST 방식 요청에 대한 메서드로 접근

이는 mars_post()라 선언된 함수를 실행하는데

request.form을 통해 ['key']에 해당되는 value를 가져오고 "sample_receive"라는 변수에 담는다.

print로 "sample_receive"에 담긴 값 (= value)를 출력하면 python console에 '샘플데이터'를 출력

[Flask] Flask framework 미니프로젝트(project mars) 05 (Backend 기초 테스트 POST 요청 및 응답)

이후, 연결 테스트용으로 {'msg' : 'POST 연결 완료!'} 라 하드코딩된 key, value가

GET 및 POST 연결 테스트 메서드의 작동여부가 확인되었으니

클라이언트에서 입력값을 받아 DB에 저장하는 것부터 POST 방식으로 연결하고자 한다.

주문자의 이름, 주소, 땅 수량를 받아서 DB에 넣어주는 기능을 작성해야 한다.

#### 주문진행- 주문자 이름, 주문자 주소, 주문하고자하는 땅 수량 입력- '주문하기' 버튼으로 입력값 DB로 전송 및 저장 (insert)

1. 데이터 명세

DB : MongoDB

Collection : mars

우선 DB에 넣어주어야 하기 때문에 DB를 사용 할 수 있도록

Document :

2. DB 커넥션

pymongo를 임포트

관련 내용은 https://ohnyong.tistory.com/35)

[Flask] Flask framework 미니프로젝트(project mars) 06 (Backend 주문하기 기능 구현 / DB설계, DB연결, POST 요청 및 응답, insert)

06번 글에서 POST 연결 주문 기능을 구현했으니 DB에 데이터가 누적되어 저장 된다.

이제 해당 웹 페이지가 로드 될 때 DB에 저장된 주문 목록을 GET 방식으로 불러와서 content 하단 부분에 보여주고자 한다.

DB에 등록된 주문자의 이름, 주소, 땅 수량를 받아서 View 페이지에 넣어주는 기능을 작성해야 한다.

#### 주문목록확인

DB에 저장된 주문된 데이터 받기(find(==read))

받은 데이터를 content 하단 부분에 표 형태로 출력

1. 데이터 명세

DB : MongoDB

Collection : mars

주문하기 POST 요청 부분을 작성하면서 서버 및 MongoDB 연결은 이미 작성되어 있다.

Documents

2. 서버 만들기 및 MongoDB 연결

[Flask] Flask framework 미니프로젝트(project mars) 07 (Backend 주문 목록 보기 기능 구현)

v0.1 프로젝트 생성 Frontend 기초 HTML 작성

v0.2 Flask Framework GET,POST 뼈대 생성 및 서버 생성 / Frontend 브렌치 생성 작업 View 페이지 완료 후 병합

v0.3 HTML, CSS, JS 모듈화로 프로젝트 폴더 구조 변경에 따른 병합 및 Backend 신규 브렌치 생성 작업

v1.0 Backend 기능 구현 완료 및 브렌치 병합

[Flask] Flask framework 미니프로젝트(project mars) 08 (프로젝트 완료 및 형상, 버전관리)

개발하고자 하는 프로젝트의 View 페이지(HTML,CSS)와 JavaScript 연결 테스트용 작성

경로 : (project_root)mars/templates/index.html

1. HTML

Body는 Header / Content 로 구분

Header : 간단한 타이틀과 주문 관련 설명 기록

Content :

Footer : None

2. CSS

(project_root)mars/static/css/style.css로 분리 모듈화

Google Fonts "Gowun Batang" 글씨체 전체 적용

Image 배경 어둡게 적용

Header, Content, Footer 담고 있는 body 태그 전체 가운데 정렬 적용

[Flask] Flask framework 미니프로젝트(project mars) 03 (Frontend 기초 테스트 View 페이지 작성 및 모듈화)

기타 요소별 디자인은 index.html에 참조된 Bootstrap 테마 사용

View 페이지 로드"(document).ready()" 및 이벤트"onclick()"에서 JavaScript 요청에 대한 테스트용 메시지 알림창 생성을 확인해야 한다. Frontend와 병합하여 1차 테스트를 진행

0. 서버 실행을 위한 라이브러리 임포트와 서버 실행 포트 설정

Flask Framework 라이브러리

request 모듈

jsonify 라이브러리

port=5001(Mac이라 포트충돌 방지)

1. 서버 시작 및 브라우저로 URL 입력하여 메인 View 페이지 요청

서버 실행 후 브라우저를 통해 "localhost:5001/" URL을 요청하면

백엔드 app.py에서 '/'에 대한 요청으로 연결되며

home()이 실행되고

[Flask] Flask framework 미니프로젝트(project mars) 04 (Backend 기초 테스트 GET 요청 및 응답)

내부의 render_template()를 통해 "mars/template/index.htm"에 위치한 View 페이지를 반환

(venv) 가상환경이 설정된 프로젝트 폴더의 터미널에서 해당 프로젝트에 필요한 프레임워크와 *라이브러리를 설치 한다.

1. Flask framework 설치

Flask 2.3.2 설치 완료

2. Python으로 MongoDB 사용하는 PyMongo package 설치

pymongo 4.4.0 설치 완료

3. Python용 DNS패키지 Dnspython library 설치

dnspython 2.3.0 설치 완료