[TIL] 220830 내일배움캠프 2일차

 미니프로젝트 

페이지를 만들면서 grid에 대해 알게되었고 조금 더 익숙해졌지만, 레이아웃을 이리저리 바꾸면서 종종 오류가 발생했다. 시간내에 급하게 작업하다보니 기획을 더욱 꼼꼼히 다듬기보다 손을 먼저 움직이면서 작업해 생긴 실수 같다. 앞으로는 구현하기 전에 기획을 더 꼼꼼히 마친 뒤에 작업해서 실수와 작업 시간을 줄여 나가야겠다. 또 화면이 작아질 수록 그에 대응하는 반응형 레이아웃을 시도해봤지만 성공 반 실패 반인 것 같다. 어떤 기준에서 오류가 나는지 아직 가늠하기 어렵다. 또 같은 화면을 구현하는데에도 다양한 방식이 존재한다는 것을 알게되었다. 다양한 방식이 중에서도 어떤 방식이 효율적인지 차차 연습하면서 찾아봐야겠다.

---

 웹개발 종합반 복습 

오늘은 3주차 7강 부터 이어서 복습하면서 여기저기 머릿속에 흩어졌던 개념들을 모아 정리해봤다.


1. 크롤링

1) 크롤링 전제조건 2가지
- 서버에 요청해서 html 가져오기 (requests 사용 : Ajax와 같은 역할 수행)
- 원하는 값 찾기 (beautifulsoup(bs4) 사용 : 원하는 값을 더욱 쉽게 찾을 수 있도록 도와주는 패키지)

파이참에서 패키지 설치하는 방법
파일 > 설정 > 프로젝트 > Python 인터프리터 > 원하는 패키지 검색 후 설치

2) 크롤링 기본 세팅

import requests
from bs4 import BeautifulSoup

headers = {'User-Agent' : 'Mozilla/5.0 (Windows NT 10.0; Win64; x64)AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36'}
data = requests.get('https://movie.naver.com/movie/sdb/rank/rmovie.naver?sel=pnt&date=20210829',headers=headers)

soup = BeautifulSoup(data.text, 'html.parser')

# 코딩 시작

* 필요 시 data의 url 값만 바꿔서 사용
** rint(soup)으로 url 값 잘 나오는지 확인 후 작업 진행

3) beautifulsoup 사용법
a. 데이터 url로 이동 > 원하는 데이터 우클릭 '검사' > 우클릭 Copy > Copy selector
b. x = soup.select('Copy selector 붙여넣기') # 해당 결과값은 리스트 형태로 출력

*가져올 값이 1개일 때는 select_one 사용

c. x의 내용 중 원하는 값을 불러올 때는 다음과 같이 입력 x['원하는 값 항목명']



2. Database

1) 개요
- 사용목적 : 나중에 원하는 데이터를 잘 찾기 위해서
- Index라는 순서로 데이터가 정렬
- 종류는 크게 2가지 : SQL (정형화), NoSQL (유동적) : ex) mongoDB

2) Python 인터프리터에서 필요한 패키지 설치
pymongo, dnspython

3) DB 연결하기
mongodb > DEPLOYMENT > Database > Connect > Connect your apllication >
DEIVER : Python
VERSION : 3.6 or later

연결을 위한 pymongo 기본 코드 입력

from pymongo import MongoClient
client = MongoClient('여기에 URL 입력')
db = client.dbsparta

a. Add your connection string into your application code 아래의 URL 복사 후 기본 코드에 입력
b. <password> 대신 비밀번호 입력
c. 클러스터 이름 추가

DB 확인
mongodb > DEPLOYMENT > Database > 해당 클러스터 선택 > Collections

4) DB 제어

users : Collections 명칭

# 저장 - 예시
doc = {'name':'bobby','age':21}
db.users.insert_one(doc)

# 한 개 찾기 - 예시
user = db.users.find_one({'name':'bobby'})

# 여러개 찾기 - 예시 ( _id 값은 제외하고 출력)
all_users = list(db.users.find({},{'_id':False}))

# 바꾸기 - 예시
db.users.update_one({'name':'bobby'},{'$set':{'age':19}})

# 지우기 - 예시
db.users.delete_one({'name':'bobby'})

3. 서버 만들기

파이참 > 파일 > 새 프로젝트 > Location: 파일경로 확인 > venv 파일 위치 확인 > 기본 인터프리터: python 3.8 확인 > 생성

* 웰컴 스크립트 생성 체크 해제

Flask : 서버를 만들 수 있는 프레임워크

Flask 설치 방법
파일 > 설정 > 프로젝트 > Python 인터프리터 > Flask 검색 후 패키지 설치

*DB에 접근하려면 pymongo, dnspython도 함께 설치

1) 프로젝트 폴더에 파일 생성 (app.py)
2) 하단 기본 코드 입력 후 우클릭 '실행'
3) localhost:5000 접속

4) html 파일 연결
5) 프론트엔드와 백엔드의 상호작용을 위한 API(창구) 생성 : request, jsonify 추가

from flask import Flask, render_template, request, jsonify
app = Flask(__name__)

@app.route('/')
def home():
   return render_template('index.html')

if __name__ == '__main__':  
   app.run('0.0.0.0',port=5000,debug=True)

Flask 기본 폴더 구조
- static 폴더 (이미지, css파일)
- templates 폴더 (html파일)
- app.py 파일

 

4. 프론트엔드와 백엔드의 상호작용

Jquery를 html에서 head 안에 임포트 해야 Ajax로 서버에 요청(GET, POST 등)할 수 있음

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

클라이언트(ajax) → 서버(flask)
1) 동작의 시작점에 함수를 호출
2) 함수 안에서 Ajax를 통해 서버 요청 (Type : GET, POST 등)
3) 데이터를 가져올 API(창구 : url)을 적고
4) 서버로 가져갈 데이터와 그 항목명(give)을 적고

서버(flask) → 클라이언트(ajax)
5) 앞서 정해진 서버 요청 Type에 따라 해당 항목명(give)에 데이터를 받는다.

6) print로 해당 내용 확인 (receive)
7) 요청 작업 완료 후 프론트엔드로 지정한 데이터를 돌려줌 (return)

클라이언트(ajax)
8) return 값을 받는다. (response)

상단내용 예시
1) onclick="save_order()"

2) type: 'POST',
3) url: '/___',
4) data: { sample_give: '___' },

5) sample_receive = request.from['sample_give']
6) print(sample_receive)
7) return jsonify({'msg' : '___'})

8) success: function (response) {
alert(response['msg']) }



서버에 저장된 값 불러오기
let sample = $('#sample').val()

*sample : id값

- 새로고침 : window.location.reload()