Project [Toy]

NEW RELEASE

◦

2023.08.08 - v1.1 완료 상태 업데이트 기능 추가 및 AWS EB 배포

▪

저장된 버킷리스트의 '완료' or '미완료' 상태를 구분 할 수 있는 DB내 done컬럼 추가

▪

앞으로 DB내 신규 생성되는 버킷 리스트글은 글 번호, done 상태 컬럼이 추가되어 입력 됨

▪

상태 기능 추가에 따른 뷰 페이지 버킷리스트 목록에 상태 변경 버튼 추가

▪

버튼을 통해 '완료' 상태로 전환 또는 잘못 누른 경우를 위한 '복구' 기능 추가

▪

기본적인 유효성 체크(상태 변경 버튼에 대한 확인 or 취소) 알림창 팝업 추가

▪

AWS EB를 통한 배포 추가

부분 코드는 아래 노트에 기록했지만 전체 코드는 다음과 같다.

app.py

index.html

[Flask] Flask framework 미니프로젝트(project bucket) 09 (v1.1 업데이트 기능 추가 및 배포)

5주 차에서는 4주 차와 비슷한 Flask Framework 프로젝트를 진행했다.

bucket의 경우 기록하기, 목록 보기 기본 기능을 구현하여 사실상 mars 프로젝트와 비슷한 프로젝트를 빠르게 복습하는 느낌이었다. fan 같은 경우에도 동일한 기능으로 솔직히 주제만 조금 변경되고 bucket과 동일하게 진행되는 강의를 보고 나는 추가적으로 DB 연결과 create, read 기능 외에도 현재까지 배운 다른 기능도 복습 삼아 넣어보고 싶었다. 특히 웹 크롤링에서 내가 원하는 키워드로 파싱 받은 HTML 소스 내의 키워드의 부모 태그들을 찾아가는 것을 구현했지만

keyword.parent.parent.parent와 같이 조금 지저분한 코드로 찾아가는 게 맞나 아직도 의심스럽긴 하다. 검색으로도 원하는 결과를 찾지 못하고 있어 스택오버플로우나 한국 커뮤니티에 질문을 올려봐야 할 것 같다.

과제에서 안내된 기본 기능 외에도 전 프로젝트들에서 부분적으로 구현한 기능이었던 웹 크롤링을 Spotify 차트 웹 사이트로부터 데이터를 가져오는 것을 구현했다. 또한 Date 객체를 생성해서 현재 날짜를 얻어 표기해주는 기능을 추가했다. 4개 미니 프로젝트는 전체적으로 HTML에 CSS, JS를 기록하도록 안내되었지만, Java의 Spring framework에 익숙해서 그런지 Flask도 아무리 미니 프로젝트라도 CSS, JS는 모듈화 시켜줘야겠다는 생각에 찾아보고 static이란 폴더로 구분하는 것도 모두 적용하게 되었다.

5주차에서 가장 중요한 부분은 "배포"였다. 이전 국비교육을 통해서도 Spring 프로젝트를 완료했었어도 마지막에 프로젝트 패키징으로 jar 파일로 압축하는 것 외에 실질적으로 웹상에 배포하는 과정을 배우지 못해서 아쉬웠었고, 이번 웹개발 종합반을 통해서 마지막에 해당 부분이 있어 아주 큰 가이드가 되었다. 하지만 AWS의 Elastic Beanstalk로 배포하는 것은 생각보다 너무 간단하게 종료되었다. 무언가 내가 생각하던 서버의 활동스러운 지식이 들어왔다기보다는 AWS의 자동화 시스템에 그저 폴더 구조를 맞추고 프로젝트 덩어리를 단순히 맡겨버린 느낌이었다.

무언가 부족했다. 나는 아마존이 해주는 서비스가 돌아가는 방식 자체가 궁금해졌다. 그래서 내가 결정한 것은 내가 소장하고 있는 Synology사의 NAS 서버 장비를 통해서 AWS의 웹 호스팅, 지정 도메인으로 포트 포워딩 해주고, 프로젝트 패키지는 어떤 폴더 구조로하고. 어디에 저장되고. 이러한 자동으로 해주는 부분들을 뜯어보기 시작했고 내가 웹 호스팅을 내 서버로 직접 해보자 하고 NAS의 이해부터 포트, DDNS, DNS, HTTP, 프로토콜 등 웹 관련 기본 지식들을 과정에 맞추어 추가적으로 지식을 주섬주섬 주워갔다.

공부하면서 웬만하면 오류가 발생하면 스스로해결하고, 같은 실수를 반복하지 않으려 하고 싶어 하는데 기초 java, python, html, css 등 비교적 오류가 어디서 나타날지, 오타가 어디서 자주 발생하는지 이제 익숙해지고 있는 시점인데 서버, 호스팅 이쪽은 거의 대~충 그런가 보다 하고 사전지식이 부족했어서 상당히 많은 오류, 어려움을 경험했다. 윈도우의 cmd, 맥의 unix까지는 익숙해졌는데 NAS는 기본 Linux로 명령어부터 익숙하지 않았다. 또한 내가 마지막에 만든 fan 프로젝트를 AWS EB 배포와 마찬가지로 NAS에서 배포하는 것을 구현하고 싶었는데 계속 이것저것 모르는 것에 대해서 이해하려고 찾아보고 영상 보고 하면서 점점 현재 레벨에서 이해하지 못할 수준까지 딥하게 내용이 나타나기 시작하고 배포라는 목적을 잃어가기도 했다.

이런 우여곡절 끝에 정확하게 배포라는 목적을 위해서 우선 로컬 PC에서 되는 것은 NAS PC에서도 된다라는 전제를 강하게 두고. 우선적으로 로컬 PC에서는 docker-compose를 통해 로컬 PC의 포트에서 웹페이지가 나타나게 구현, 이는 곧 NAS에도 동일하게 docker, docker-compose를 설치하고 동일하게 NAS PC에서도 특정 포트로 웹페이지가 나타나게 구현했으며, 이 시점 과정까지 오면서 NAS를 통해 도메인~ DDNS로 외부접속~ 포트포워딩~ 이러한 주변 지식들을 버리지 않고, 각각 적재적소에 설정을 하면서 결과적으로 NAS를 통해 동일한 웹 페이지를 외부접속www(http://xx.xx:80))으로 배포하는 것을 성공했다.

내 프로젝트가 ohnyong.synology.me라는 도메인 메인 홈페이지에 나타남

이때 너무 뿌듯했다. 지금 와서야 너무 당연하게 로컬하고 동일한 환경을 구성하면 된다라고 요약할 수 있지만 로컬 PC는 생각보다 많은 기본 세팅들이 편리하고 화려하게 되어 있지만 NAS는 정보도 조금 부족하기도 했으며 내가 원하는 키워드로 딱 들어맞지 않았다. 예로 배포는 대부분 Web Station 패키지를 활용해서 wordpress 정도만 연결하고 정해진 폴더에 넣는 식의 배포 영상, 가이드가 대부분이라 내 궁금증 해소에는 반정도밖에 도움이 되지 않았다. nas docker-compose라는 키워드로 검색하기 시작하면서 나의 의문들이 풀리기 시작했고, NAS의 터미널을 들어가기 위하여 ssh 포트를 열고 ubuntu를 docker로 가상환경에 설치하여 해당 포트에 입력하면서, NAS의 제한적인 GUI환경에서 본격적으로 원하는 것을 CLI 명령어로 설치하면서 대부분의 기능을 이용할 수 있겠다는 자신감이 생겼다. 자동적으로 Web Station이 어떤 포트를 쓰고 있는지, 내부 패키지(앱)와 연결되어 있는 경우도 많아서 혼란스러웠다. 하지만 중간중간 내가 해야 할 것을 명확하게 정리하고 웹 서버 설정, 내 라우터로부터의 설정과 NAS 로컬 설정을 맞추면서 차근차근 진행했다. 수많은 블로그를 참고했고 youtube에서도 50대 NAS와 웹 설정 부분을 알려주는 강의하시는 분의 강의도 자세히 봤다.(사실 내가 원하는 설정 방향보다는 간편한 쪽과 본인의 세팅의 기준이 명확하셔서 조금 내용을 거르면서 봤다. 또한 너무 영상이 길다.. 힘들었다.) 가장 나에게 도움 되었던 영상은 서울리안님의 신나다 Ep.02이다. 가장 먼저 찾아봤으면 먼 길을 안 돌았을 정도로 간략하고 내가 원하는 방향과 90% 일치했다. 10%는 이 강의도 그렇지만 대부분 NAS를 웹하드처럼 DSM에 접근하는 것을 80 포트로 포워딩하는 경우가 많지만 나는 내가 제작한 홈페이지를 Docker에 돌리고, 도커에 설정한 81번 포트를 또 80번 포트로 띄워야 한다는 점이 핵심인데 지금은 당연하게 느껴지지만 사전 지식이 없는 상태에서는 외부포트? 내부포트?? 내부 IP? 외부 IP???? 이러한 궁금증이 많았었다.. 무식한 과거의 나를 이긴 점에서 행복하다. 아직도 Spring 프로젝트를 어떻게 배포하는지는 시도해보지 않았기 때문에 의문점들이 많다. 어떤 세팅들을 어디서 하게될까? jar? 이걸 넘기는것인가? 서버세팅은 어디서하는가? 이 의문점들은 Spring 프로젝트 기간이 되면 시도해보려고 한다. 또한 NAS로도 똑같이 해보고자 한다. 일단 기초적인 틀을 살펴본 것 같아서 좋았다.

[Flask] 미니프로젝트 5주차 bucket, fan 스터디 회고(WIL)

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':'value'

◦

응원 댓글 내용 : 'comment':'comment_receive' / from Frontend #comment-> formData 'comment_give':'value'

2. 서버 만들기 및 MongoDB 연결

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

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

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

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

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

1.

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

2.

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

3.

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

4.

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

a.

지정한 URL에서 진행

b.

requests로 HTML소스 받음

c.

beautifulsoup으로 정리하기 쉽도록 분석, 정렬

d.

soup의 find, select를 통해 원하는 데이터 추출

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

•

Contents :

◦

가수 이름 : 'artist': artist / from URL #spotifydaily>tbody>tr>td.text mp

◦

노래 제목 : 'title': title / from URL #spotifydaily>tbody>tr>td.text mp

◦

오늘 순위 : 'rank' : rank / from URL #spotifydaily>tbody>tr>td.np

◦

순위 변동 : 'rankdiffer' : rankdiffer / from URL#spotifydaily>tbody>tr>td.np

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

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' / from Frontend #comment-> formData 'comment_give':'value'

2. 서버 만들기 및 MongoDB 연결

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

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

서울의 실시간 날씨 정보 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 기본 골격

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

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

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

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

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

개발하고자 하는 프로젝트의 서버를 실행하고 웹브라우저로 URL에 접근 했을 때,

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

해당 백엔드 요청 응답 흐름은 이전 프로젝트인 project mars와 유사하다.

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

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

•

Flask Framework 라이브러리

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

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

GET 방식과 비슷하지만

요청 할 때 body를 추가하여 요청하는 부분이 다르다.

body를 request.form으로 받게되는 부분이 추가된다.

•

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

•

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

•

JavaScript의 save_comment()라는 함수 실행

•

formData라는 객체를 생성

•

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

•

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

(+ 위 formData 객체를 body로 추가하여 요청함)

•

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

•

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

•

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

•

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

•

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

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

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

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

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

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

#### 웹 크롤링

•

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의 차트를 제공하고 있어 해당 URL을 대상으로 테스트를 진행하려한다.

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

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

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

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

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

새로운 앨범 너무 멋져요!개발하고자 하는 프로젝트의 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 획득

▪

응원 댓글 (#comment)를 textarea 태그를 통해 value 획득

▪

댓글 남기기 버튼은 onclick save_comment() 함수를 호출

◦

(Output List)

▪

div(#comment-list)에 1열로 구성

▪

각 행마다 div(#card>div(#card-body)>blockquote로 1개의 카드 형태가 1행씩 붙음

▪

blockquote 클래스 부트스트랩 테마가 적용됨

▪

blockquote 카드의 내용은 아래처럼 2개의 div로 구성

•

상단 p : 응원 댓글 내용(ex: 새로운 앨범 너무 멋져요!)

•

하단 footer(.blockquote footer) : 닉네임(ex: - 호빵맨)

•

Footer : None

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

2. CSS

•

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

•

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

•

Image 배경 어둡게 적용

•

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

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

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)가상환경 적용 터미널 열기

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

•

**SERVER** : Flask

## 주요 기능

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

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

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

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

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

•

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

•

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

1. 데이터 명세

•

DB : MongoDB

•

Collection : bucket

•

Document :

◦

버킷리스트 메모 내용 : 'bucket':'bucket_receive' / from Frontend #bucket-> formData 'bucket_give':'value'

2. 서버 만들기 및 MongoDB 연결

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

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

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에 넣어주어야 하기 때문에 DB를 사용할 수 있도록

pymongo를 임포트

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

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

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

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

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

•

배운점:

◦

project mars와 비슷한 프로젝트(복습)

◦

하지만 비슷하고 오히려 더 적은 분량이기 때문에 집중해서 진행함

◦

마치 HTML 표준 레이아웃처럼 프로젝트 표준 레이아웃으로 사용해도 될 것 같음

◦

여기에 + 기능들을 project pedia처럼 모듈화 시켜서 테스트하고 붙여나가면 되지 않을까라는 생각

◦

기능 구현을 위한 app.py 부분을 작성할 때 실제로 자문자답하는 방식으로 코드를 작성해 봄

▪

이 부분을 좀 더 상세히 흐름 전체를 외우고

▪

각 부분에 어떤 코드가 사용되는지 반복숙달하면서 암기해야 할 것 같음.

▪

분량이 적기 때문에 해당 프로젝트를 암기하는 것이 좋아 보임

•

어려운 점:

◦

GET과 POST를 계속 쓰는데 정녕 route()에 대한 개념을 찾아보지 않았었음

◦

Route()

▪

HTTP(웹 어플리케이션에서 사용하는 프로토콜)는 URL 접근에 대해 몇 가지 다른 방식을 제공한다. 기본적으로 GET 방식으로 제공되지만, route() 데코레이터에 methods 인자를 제공하면 다른 방식으로 변경할 수 있다.

▪

GET : 브라우저가 어떤 페이지에 저장된 정보를 단지 얻기 위해 서버에 요청하고 서버는 그 정보를 보낸다. 가장 일반적인 메소드다.

▪

POST : 브라우저는 서버에게 새로운 정보를 전송*하도록 특정 URL에 요청하고 그 정보가 오직 한번 저장되는 것을 보장하도록 한다. 이것이 보통 HTML폼을 통해서 서버에 데이터 전송하는 방식이다.

▪

공식문서에 보니 HEAD, PUT, DELETE, OPTIONS 같은 것도 있다.

빠르게 시작하기 — Flask 0.11-dev documentation

Flask를 시작하기 원합니까? 이 장은 Flask에 대해 알맞은 소개를 한다. 이 장은 여러분이 이미 Flask를 설치했다고 가정할것이고, 설치가 안됐다면 설치하기 섹션으로 넘어가기 바란다.

https://flask-docs-kr.readthedocs.io/ko/latest/quickstart.html#http

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

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

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

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

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

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

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

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

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

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

해당 백엔드 요청 응답 흐름은 이전 프로젝트인 project mars와 유사하다.

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

GET 방식과 비슷하지만

요청 할 때 body를 추가하여 요청하는 부분이 다르다.

body를 request.form으로 받게되는 부분이 추가된다.

•

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

•

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

•

JavaScript의 save_bucket()라는 함수 실행

•

formData라는 객체를 생성

•

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

•

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

(+ 위 formData 객체를 body로 추가하여 요청함)

•

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

•

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

•

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

•

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

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

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)가상환경 적용 터미널 열기

[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 연결 테스트용 작성

CSS, JavaScript 모듈화(Static) 및 참조 링크 설정

1. HTML

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

Body는 Header / Content 로 구분

•

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

•

Content :

◦

input(#bucket) 텍스트 입력 박스 / 기록하기 버튼 onclick "save_bucket()" 함수 호출

◦

div(#bucket-list)>li*n 형태로 에 추후 save_bucket() 함수의 결과가 1행씩 추가될 예정(이전 프로젝트까지 Footer로 표현했지만 사실상 Footer의 역할은 하지 않기 때문에 content로 포함시킴)

•

Footer : None

2. CSS

•

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

•

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

•

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

•

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

•

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

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

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 (개요)

개발하고자 하는 프로젝트의 서버를 실행하고 웹브라우저로 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()" 및 이벤트"onclick()"에서 JavaScript 요청에 대한 테스트용 메시지 알림창 생성 1. 서 ohnyong.tistory.com

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

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

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

•

배운점:

◦

프로젝트 처럼 진행하기 위해 프로젝트 개요 작성

◦

구현할 기능을 기획

◦

프로젝트 진행 단계 구성

▪

초기환경구축

▪

프레임워크, 라이브러리 설치

▪

기초 프로젝트 구조 생성 및 협업분배

▪

GET 기능구현

▪

POST 기능구현

▪

최종 테스트

◦

CSS, JavaScript 모듈화(Static) 및 참조 링크 설정

•

어려운 점:

◦

라이브러리란? 개념 이해

▪

함수들이 뭉쳐진 하나의 .py 파일 안에 이루어진 것을 모듈이라고 합니다.

▪

여러 개의 모듈을 그룹화 하면 패키지가 됩니다.

▪

툴킷 또는 패키지는 종종 라이브러리라고도 불리웁니다.

◦

프로젝트를 분리하는 과정과 가상환경을 다시 설정하는 환경구축 단계에서 에러가 발생 및 해결

▪

Import "flask" could not be resolved from source Pylance (reportMissingModuleSource)

▪

상위 폴더가 있는 경우.. VSCode에서 "폴더 선택"을 상위 폴더를 선택한 상태에서 (venv)가상환경을 설정하면 상위 폴더에서 venv폴더와 설정 파일들이 생겨난다. 아마 선택된 폴더를 root처럼 인식해서 root/venv/를 생성하는 것 같다.

◦

클라이언트 요청-백엔드 응답과 송신 등 통신의 흐름, 데이터의 흐름이 어렵다.

▪

위 View 페이지 클라이언트에서 Frontend로부터 Backend 간의 요청 및 응답, 데이터 변환과 이동 흐름을 스스로 "한줄씩" script.js파일과 app.py 파일을 왔다갔다하며 읽어내고 모르는 부분, 이해가 안되는 부분들을 찾아보았다.

◦

fetch()와 연속된 .then()절

▪

서버 통신(fetch())에 대한 응답(response)객체를 반환

▪

fetch().then( respose => {콜백 함수1} ).then( respose => {콜백 함수2} )

▪

fetch의 대한 결과를 response인자에 보낸다.

▪

콜백함수를 통해 결과를 다시 return 한다.

▪

then()를 여러번 사용할 수 있으며, 인자 값은 전 함수의 결과를 의미한다.

◦

jsonify()

▪

사용자가 json data를 내보내도록 제공하는 flask의 함수. jsonify()는 json response를 보내기 위해 이미 content-type header가 'application/json'로 되어 있는 flask.Response() 객체를 리턴한다.

◦

res.json()

▪

Response: json() method== Response stream을 가지고와서(take) 끝날때 까지 읽는다(read it to completion). body text를 JSON형태로 파싱(parsing)한 resolve값인 Promise 를 리턴한다.)

▪

(*The json() method of the Body mixin takes a Response stream and reads it to completion. It returns a promise that resolves with the result of parsing the body text as JSON.

◦

Promise

▪

Promise는 프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자로, 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있습니다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공하겠다는 '약속'(프로미스)을 반환합니다.

◦

fetch()의 body

▪

fetch('/mars', { method: "POST", body: formData })

▪

body는 요청에 추가하고자 하는 본문입니다. Blob, ArrayBuffer, TypedArray, DataView, FormData, URLSearchParams, 문자열 객체 또는 리터럴, ReadableStream 객체를 사용할 수 있습니다. 제일 마지막은 아직 실험적 기능이므로 호환성 정보를 먼저 확인해서 사용할 수 있을지 검증하세요. GET과 HEAD 메서드는 본문을 가질 수 없습니다.

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

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

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

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

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

•

배운점:

◦

project mars와 비슷한 프로젝트(복습)

◦

웹 크롤링 기능 추가

◦

클라이언트에서는 URL, 별점, 리뷰 내용을 받고 위 URL을 통해서 영화의 제목, 설명, 이미지 URL을 받게 된다. 이 데이터들을 DB에 넣어주는 기능을 작성해야 한다.

◦

기능 구현을 위한 app.py 부분을 작성 할 때 실제로 자문자답하는 방식으로 코드를 작성해봄

◦

메타태그의 데이터(값) 가져오기

▪

soup의 select_one()으로 'meta'라는 태그의 [property가og:title, og:image, og:description] 부분을 찾아서 원하는 값이 담긴 ['content']부분의 값을 각 ogtitle, ogimage, ogdesc변수에 담는다

•

어려운 점:

◦

메타태그

▪

메타 태그(meta tag)는 웹페이지가 담고 있는 컨텐츠가 아닌 웹페이지 자체의 정보를 명시하기 위한 목적으로 사용되는 HTML 태그를 의미

▪

SNS등에서 (본 tstory도 마찬가지) URL링크를 공유하면 하단에 이미지/타이틀/내용 등이 나타나는 아래와 같은 것들이 meta 태그를 통해 나타난 것으로 이해하면 된다.

[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

•

Document :

◦

영화 URL : 'url':'url_receive' / from Frontend #url-> formData 'url_give':'value'

◦

별점 : 'star':'star_receive' / from Frontend #star-> formData 'star_give':'value'

◦

리뷰 내용 : 'comment':'comment_receive' / from Frontend formData #comment-> 'comment_give':'value'

◦

영화 제목 : 'title':ogtitle / from URL <meta [property="og:title"]['content']> 'value'

◦

영화 설명 : 'desc':ogdesc / from URL <meta[property="og:description"]['content']> 'value'

◦

영화 이미지 URL : 'image':ogimage / from URL <meta[property="og:image"]['content']> 'value'

2. 서버 만들기 및 MongoDB 연결

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

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

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':'value'

◦

별점 : 'star':'star_receive' / from Frontend #star-> formData 'star_give':'value'

◦

리뷰 내용 : 'comment':'comment_receive' / from Frontend formData #comment-> 'comment_give':'value'

◦

영화 제목 : 'title':ogtitle / from URL <meta [property="og:title"]['content']> 'value'

◦

영화 설명 : 'desc':ogdesc / from URL <meta[property="og:description"]['content']> 'value'

◦

영화 이미지 URL : 'image':ogimage / from URL <meta[property="og:image"]['content']> 'value'

2. 서버 만들기 및 MongoDB 연결

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

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

해당 백엔드 요청 응답 흐름은 이전 프로젝트인 project mars와 유사하다.

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

GET 방식과 비슷하지만

요청 할 때 body를 추가하여 요청하는 부분이 다르다.

body를 request.form으로 받게되는 부분이 추가된다.

•

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

•

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

•

JavaScript의 posting()라는 함수 실행

•

formData라는 객체를 생성

•

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

•

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

(+ 위 formData 객체를 body로 추가하여 요청함)

•

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

•

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

•

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

•

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

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

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

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

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

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

1. Flask framework 설치

[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 (웹 크롤링 기능 부분 구현 및 테스트)

개발하고자 하는 프로젝트의 서버를 실행하고 웹브라우저로 URL에 접근 했을 때,

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

해당 백엔드 요청 응답 흐름은 이전 프로젝트인 project mars와 유사하다.

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

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

•

Flask Framework 라이브러리

•

request 모듈

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

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)가상환경 적용 터미널 열기

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

개발하고자 하는 프로젝트의 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 태그를 통해 value 획득

◦

영화 리뷰 코멘트(#comment) textarea 태그를 통해 value 획득

◦

기록하기 버튼은 onclick posting() 함수를 호출

◦

닫기 버튼은 onclick close_box() 함수를 호출

•

Content 하단

◦

div(#cards-box)에 4열으로 구성

◦

각 행마다 div(#cards-box)>div(#col) 으로 1개의 카드 형태가 4열로 붙음

◦

div(#col) 카드의 내용은 아래처럼 2개의 div로 구성

▪

상단 div(.card-img-top) : 영화 이미지

▪

하단 div(.card-body) : 제목, 설명, 별점, 리뷰

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

2. CSS

•

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

•

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

•

Image 배경 어둡게 적용

•

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

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

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로 추가하여 요청함)

•

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

•

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

•

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

•

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

•

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

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

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 Frontend #address-> formData 'address_give':'value'

◦

주문 땅 수량 : 'size':'size_receive' / from Frontend formData #size-> 'size_give':'value'

2. DB 커넥션

우선 DB에 넣어주어야 하기 때문에 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

•

Documents

◦

주문자 이름 : 'name':'name_receive' / from Frontend #name-> formData 'name_give':'value'

◦

주문자 주소 : 'address':'address_receive' / from Frontend #address-> formData 'address_give':'value'

◦

주문 땅 수량 : 'size':'size_receive' / from Frontend formData #size-> 'size_give':'value'

2. 서버 만들기 및 MongoDB 연결

주문하기 POST 요청 부분을 작성하면서 서버 및 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 신규 브렌치 생성 작업

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

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

CSS, JavaScript 모듈화(Static) 및 참조 링크 설정

1. HTML

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

Body는 Header / Content 로 구분

•

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

•

Content :

◦

이름(#name), 주소(#address)는 input 태그를 통해 value 획득

◦

평수(#size)는 select박스에 5개 option을 선택하여 value 획득

◦

table>thead 에 이름, 주소, 평수 컬럼명 3행 지정

◦

table>tbody(#order-box) 에 추후 save_order() 함수의 결과가 1열씩 추가 될 예정

•

Footer : None

2. CSS

•

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

•

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

•

Image 배경 어둡게 적용

•

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

•

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

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

개발하고자 하는 프로젝트의 서버를 실행하고 웹브라우저로 URL에 접근 했을 때,

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

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

•

Flask Framework 라이브러리

•

request 모듈

•

jsonify 라이브러리

•

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

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

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

1. Flask framework 설치

Flask 2.3.2 설치 완료

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

pymongo 4.4.0 설치 완료

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

1. 프로젝트 폴더 생성

2. app.py 메인 파일 생성

3. venv 가상 환경 설정

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

5. view페이지용 templates 폴더 생성

6. 메인 뷰페이지 index.html 생성

7. .gitignore로 가상환경 추적 제외

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

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

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

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

# Flask_project_mars

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

## 프로젝트 소개

"화성땅"을 주문하는 주제로 만드는 일종의 "Memo" 기능 웹 페이지

## 개발 기간

•

23.07.09일 - 23.07.10일

### 맴버구성

- 김인용 - 싱글 프로젝트

### 개발 환경

•

**MainLanguage** : `PYTHON`

•

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

•

**Framework** : Flask Framework

•

**Database** : MongoDB(5.0.11)

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

Project [Toy]

1. 데이터 명세

2. 서버 만들기 및 MongoDB 연결

1. 데이터 명세

1. 데이터 명세

2. 서버 만들기 및 MongoDB 연결

1. 데이터 명세

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

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

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

1. 테스트용 URL

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

1. HTML

2. CSS

1. Flask framework 설치

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

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

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

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

1. 데이터 명세

2. 서버 만들기 및 MongoDB 연결

1. 데이터 명세

2. DB 커넥션

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

1. Flask framework 설치

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

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

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

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

1. HTML

2. CSS

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

1. 데이터 명세

2. 서버 만들기 및 MongoDB 연결

1. 데이터 명세

2. 서버 만들기 및 MongoDB 연결

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

1. Flask framework 설치

1. 테스트용 URL

2. URL로 들어가서 메타 태그 확인하기

3. 웹 크롤링을 위한 requests, Beautifulsoup 임포트 및 URL의 HTML 파싱

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

1. HTML

2. CSS

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

1. 데이터 명세

2. DB 커넥션

1. 데이터 명세

2. 서버 만들기 및 MongoDB 연결

1. HTML

2. CSS

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

1. Flask framework 설치

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