플라스크를 배웠다. 항상 시작 전에 패키지를 다운 받아야 한다.

1. pymongo
2. bs4
3. dnspython
4. certifi
5. flask
6. requests

그리고 임포트 해준다.

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

from pymongo import MongoClient
import certifi

ca = certifi.where()

client = MongoClient('mongodb+srv://test:sparta@cluster0.ojxgz.mongodb.net/내DB명?retryWrites=true&w=majority', tlsCAFile=ca)
db = client.dbsparta

API를 POST 하는 방법

서버 방향

@app.route("/homework", methods=["POST"])
def homework_post():

A_receive = request.form['A_give'] B_receive = request.form['B_give'] 클라이언트의 A와 B라는 값을 받아오기

doc ={ a = A_receive , b = B_receive } db.서버폴더명.insert_one(doc) A와 B의 값을 서버폴더에 doc이라는 자료로 입력하기

return jsonify({'D':'d'}) D라는 이름으로 d의 내용 돌려주기

클라이언트 방향

$.ajax({
       type: 'POST',
      url: '/homework',
      data: { 
        'A_give':A인풋박스 아이디, 
        'B_give':B인풋박스 아이디
      }})

A인풋박스에 들어온 값을 A_give로 주고 B인풋박스에 들어온 값을 B_give로 준다.

success: function (response) {alert(response["D"])} function 성공 시 D의 값(msg)를 가져와 알림으로 띄운다.

window.location.reload() 브라우저를 새로고침한다.

API를 GET 하는 방법

서버 방향

@app.route("/homework", methods=["GET"])
def homework_get():
    return jsonify({'msg':'GET 연결 완료!'})

C_list = list(db.서버폴더명.find({}, {'_id': False})) DB의 서버폴더에서 값을 전부 가져와서 C_list로 넣기 return jsonify({'X':C_list}) C_list를 X라는 이름으로 돌려주기

클라이언트 방향

$('#비울아이디').empty() 비울아이디의 내용을 지운다.

success: function (response) {
    let rows = response['X']
    for (let i = 0; i < rows.length; i++) {
    let name = rows[i]['a']
    let comment = rows[i]['b']

X라는 서버폴더 안에서 a=name b=comment으로 가져오기

    let temp_html = 
    `<div class="card">
        <div class="card-body">
            <blockquote class="blockquote mb-0">
             <p>${b}</p>
             <footer class="blockquote-footer">${a}
                </footer>
            </blockquote>
       </div>
     </div>

위에서 가져온 a와 b를 해당 html 안에 넣어 temp_html로 만든다.

$('#붙여넣어야하는부분의아이디').append(temp_html)}} 붙여 넣어야 하는 곳에 temp_html을 붙여 넣는다.

window.location.reload() 창 새로고침하기

0706

드디어 오류가 해결되어 db도 수정, 입력, 삭제 해보았다!

import requests
from bs4 import BeautifulSoup

from pymongo import MongoClient
import certifi
ca = certifi.where()

client = MongoClient('mongodb+srv://test:sparta@cluster0.ojxgz.mongodb.net/cluster0?retryWrites=true&w=majority', tlsCAFile=ca)
db = client.dbsparta

크롤링 해오는 개념이 아직 좀 헷갈린다. 자주 보고 자주 사용해봐야 할 것 같다.

링크에 가서 데이터를 받아오기 data = requests.get()

가져온 데이터를 텍스트화하고 A라는 이름으로 부르기 A = BeautifulSoup(data.text, 'html.parser')

A에서 가져온 데이터 중 아래와 같은 html코드만 선택하기 우클릭-검사-해당 코드 copy selector 한 뒤 B = A.select('#body-content > div.newest-list > div > table > tbody > tr ')

위에서 찾아낸 html 코드 중 아래와 같은 것이 있을때 a,b,c라고 부르기 for X in B a=X.select_one(html태그).text[0:2].strip() b=X.select_one(html태그).text.strip() c=X.select_one(html태그).text.strip()

저장 - 예시

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'})

$.ajax({
    type: "GET",
    url: "url",
    data: {},
    success: function (response) {
          (내용 작성)      
    }

위의 내용은 Ajax를 불러오는 방법이다. url칸에는 api 주소를 붙여넣었다. 그 후에는 명명해주는 과정들이 있었다.

A데이터 row 값에 ROWS라고 이름짓기

let ROWS = response['A']['row'] 

api에 있던 A값을 X라고 하고 B값을 Y라고 한다

let X = response['A'] let Y = response['B']

간단한 Jquery 키워드

$('#A').attr('c',X) id A에 있는 c라는 태그를 api이름 X로 변경한다

$('#B').text(Y) id B에 Y라는 텍스트를 입력한다

$('#C').empty() id C를 비운다.

let X = response['A'] $('#D').append(X) D에 X 내용을 붙여넣는다

console.log(H, X) 콘솔에 H, X를 표시하게 한다

temp_html를 html로 정의한 후

G라는 ID에 temp_html을 추가하기

let temp_html = 'html'

$('G').append(temp_html)

로딩이 완료 되면 alert 띄우기

$(document).ready(function(){
    alert('다 로딩됐다!')
});

벌써 2주차 완료라니 :) 열심히 달려서 한달되기 전에 끝내고 새로운 거 만들고 싶다!

알게 되어 제일 반가웠던 내용은

max-width: 400px width: 95%

이 부분이었는데, 이전에도 웹페이지는 만들어본 적이 있지만 만들었던 페이지를 모바일로 볼 때 깨지는 것은 어떻게 해야할지 몰랐기 때문이다. 요즘은 모바일을 더 많이 사용하는 시대이니 앞으로 자주 쓰게 될 것 같다.

그 외에도 태그 속 태그를

.class > tag { }

이렇게 나타낼 수 있다는 것도 처음 알게 되었다. 수박겉핥기로 알고 있을 때에는 매번 태그에 대한 스타일시트를 작성하여 충돌하며 적용이 안되거나 잘못될 때가 많았다. 정확하게 태그를 지칭하여 설정해줄 수 있는 부분이 좋았다.

javascript 문법은 처음으로 조금 배웠는데 엑셀 같다는 느낌이 들었다. 어떤 데이터의 행에서 A를 찾아 그 B값을 출력하라. 와 같은 함수를 사용하는 것 같았다.

let ____ = []
____을 []이라고 하자.

let a_list = ['ㄱ','ㄴ','ㄷ','ㄹ']
데이터 ㄱ, ㄴ, ㄷ, ㄹ을 입력하기

let a_dict ={A:B,C:D}
'A=B', 'C=D' 라는 내용 입력하기

a_dict는 아직 확실하게 이해된 것 같지 않다. 복습해야 할 것 같다.

let a_list =[자료 입력하기]
for(let i=0, i< a_list.length; i++) {
                                    }
(변수를 i라고 할 때 a_list에 입력한 자료들을 모두 {  } 하기)

ex) let scores = [{'name': '철수', 'score': 90}]

for (let i =0; i <scores.length; i++) {
(자료에 있는 내용을 하나씩 확인 후)

 if (scores[i]['score'] > 70 {
(확인하다가 score 가 70보다 크다면)

console.log(scores[i]['name']}}
(콘솔창에 name을 띄워라.)

자세한 내용은 다음주 수업을 더 들어봐야 알겠지만 불과 4일동안 배웠다고 하기엔 벌써 실무에 사용할 수 있는 방법들이 많았다.

그리고 나는 파이참을 처음 써보는데(메모장에 일일히 적어 *.html로 저장하던 시절) ctrl+ alt+ L키로 라인 정리를 한번에 할 수 있는 점이 너무 좋았다. 메모장을 사용하던 때에는 늘 "태그열고, 닫고, 열고, 닫고..."를 중얼거리며 html을 들여다 봐야 했기 때문이다.

일주일 수업을 정리할 수 있는 블로그가 생겨 기분이 좋다. 틈틈이 공부한 내용과 새로운 지식을 정리해볼 수 있겠다.

이번 주 차 숙제였다. 공부를 하면서 덕질도 할 수 있다니 일석이조(?) 즐겁게 해결해나갈 수 있었다. 개성있는 편을 좋아해서 이것저것 많이 만져보았다. 재미있었다. 이것들이 이제 진짜 움직이는 것을 본다면 더 즐거울 것 같다.