[🧭️Jungle] Web Scraper, Flask, Own project - TIL

Flask

- Flask란,

파이썬 웹프레임워크로 간편하게 server를 호스팅할 수 있게 해준다.

- Flask 서버 실행

서버 실행 시 프레임워크 간 충동을 피하기 위해서 '가상 환경'에서 작업을 진행했다.

'가상 환경(Virtual Environment)'이란, 작업 폴더 내에서 하위 폴더를 만들어 이 안에서 프레임워크를 관리할 수 있게 한다. 이를통해 전체 환경 하에서 작동하던 프레임워크와의 충돌 및 간섭을 막고 버전관리를 돕는다.

(* 가상환경을 나누는 이유 ① 배포 시 불필요한 프레임워크 설치 방지 및 동일 버전으로 설치하기 위해 ② 서버의 python 버전에 무관하게 사용 가능하기에 python 버전에 따라서 지원하지 않는 프레임워크(ex. Django)가 있는 경우 유용)

- Flask 기본 폴더 구조

'v env', 'static', 'template' 폴더와 'app.py'  파일이 기본이 된다.

static에는 img, css 파일 등을 저장해두고, template의 index.html과 같은 파일이 static 폴더에서 source를 불러와서 사용된다. app.py 파일에는 Flask 서버 실행 기본 문법 및 서버 요청 API에 대해 정리되어 있다.

- API 만들기

  HTTP request method(요청 메소드)를 통해 어떤 요청 종류(GET, POST 등)인지 응답하는 서버 쪽에 정보를 알려준다.

1. GET

데이터를 조회(Read)할 때 사용!

→ 데이터 전달: URL 뒤에 물음표를 붙여 key=value로 전달(google.com?q=아이폰)

 

2. POST

데이터를 생성(Create), 수정(Update), 삭제(Delete)할 때 사용 ! 

→ 데이터 전달: HTML Body 안에서 key:value 형태로 전달

---

⛏️Own Project

URL, Memo를 저장할 수 있으며, card columns 형식으로 저장했던 내용을 기본적으로 표시하는 사이트.

---

기능 단위

• DB의 저장된 Memo를 card Columns display
• DB로 신규 작성 Memo Upload

구조

Body

• Card 형식으로 DB에 있는 직접 남긴 Memo와 URL의 Meta 데이터 중 사진, Headline 등을 가져와서 표시(Bootstrap, MongoDB)
• 메모 작성열기 버튼 > URL, Memo 입력란 .show() > 입력 하기 버튼 > 입력 완료 Pop-up > 메모 작성 닫기 버튼 > URL, Memo 입력란.hide() (CSS, jQuery)

---

💡 A-Ha

• 한 <Div> Tag에 class를 두 개 이상 지정 하고 싶을 경우 ▶ class = "클래스명1 클래스명2" 
• 헷갈리는 HTML, CSS, JS, jQuery, Ajax, Flask
  • HTML: Head, Body 구조, Head 내 <script>...</script> 에서 함수를 정의할 수 있음
  • JS: HTML에서 작동하는 언어로 script Tag에서 함수를 정의한다거나 연산을 한다거나 할 때 사용됨
  • CSS: 함수를 통해서 Style을 변경시킬 때 CSS에 변화가 있음
  • jQuery: CSS를 변화시키거나 상태를 가져오거나 할 때 사용되며, JS 함수 안에서도 활용될 수 있음
  • Ajax: 서버에 Data를 전송하거나 서버에서 response를 받거나 할 때 사용됨
  • Flask: 서버를 돌려주는 역할을 하며, static 폴더에 있는 정보를 HTML에 뿌려줄 수도 있음