순서 

1. 데이터 명세

2. 클라이언트와 서버 확인하기

3. 서버부터 만들기

4. 클라이언트 만들기

5. 완성 확인하기

 

여기서 서버 먼저 만드는 게 중요

 

이제 뭔가 이해가 된다

 

html 

function posting() {
            let url = $('#url').val()
            let comment = $('#comment').val()
            let star = $('#star').val()

            let formData = new FormData()
            formData.append('url_give', url)
            formData.append('comment_give', comment)
            formData.append('star_give', star)

            fetch('/movie', { method: "POST", body: formData }).then(res => res.json()).then(data => {
                alert(data['msg'])
                window.location.reload()
            })
        }

프론트엔드에서 자료를 차곡차곡 모아서 백엔드(서버)로 보내줌.

어떻게??

위에 있는 함수를 가지고 설명하면 

변수들을 val로 문자열로 바꿔줌.

그 상태에서 데이터를 모아서 py로 보내줌.

 

py

@app.route("/movie", methods=["POST"])
def movie_post():
    url_receive = request.form['url_give']
    comment_receive = request.form['comment_give']
    star_receive = request.form['star_give']

    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(url_receive, headers=headers)

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

    ogimage = soup.select_one('meta[property="og:image"]')['content']
    ogtitle = soup.select_one('meta[property="og:title"]')['content']
    ogdesc = soup.select_one('meta[property="og:description"]')['content']


    doc = {
        'image':ogimage,
        'title':ogtitle,
        'desc':ogdesc,
        'comment':comment_receive,
        'star':star_receive
    }

    db.movies.insert_one(doc)

    return jsonify({'msg':'포스팅 완료!'})

보내주면 ..._receive 들이 받아주고 그 받은 데이터들을

내가 입맛에 맞게 조절하는 거

크롤링도 들어갔는데 BeautifulSoup 이걸로 된거임.

그래서 soup.select_one 으로 내가 설정한 변수들에다가 넣어주고

그 변수들을 document로 해놓고

mongodb에 넣어줌.

그러고 난 다음 브라우저에 포스팅 완료라는 메시지가 뜰거임.

 

  fetch('/movie', { method: "POST", body: formData }).then(res => res.json()).then(data => {
                alert(data['msg'])
                window.location.reload()

 

 그런데 마지막으로 여기 fetch로 서버에서 html로 연결해서

data의 msg가 여기로 뜨는거임.

 

 

그 다음 클라이언트

 

html

function listing() {
            fetch('/movie').then((res) => res.json()).then((data) => {
                let rows = data ['result']
                $('#cards-box').empty()
                rows.forEach((a)=>{
                    let comment = a['comment']
                    let title = a['title']
                    let desc = a['desc']
                    let image = a['image']
                    let star = a['star']

                    let star_repeat = '⭐'.repeat(star)

                    let temp_html = `<div class="col">
                                        <div class="card h-100">
                                            <img src="${image}"
                                                class="card-img-top">
                                            <div class="card-body">
                                                <h5 class="card-title">${title}</h5>
                                                <p class="card-text">${desc}</p>
                                                <p>${star_repeat}</p>
                                                <p class="mycomment">${comment}</p>
                                            </div>
                                        </div>
                                    </div>`
                    $('#cards-box').append(temp_html)
                })
            })
        }
이 저장한 걸 보여주는 건 이해하는 데 어려움이 없음.
밑에 서버에서 result 값을 all_movies 라고 정해주면 
console 로 확인
그러고 확인했을 때 리스트로 뜨면 아 이거 반복문으로 돌려주고싶다.
생각하면 굿
그전에 기존에 있던 cards-box들 다 없애주고
그리고 변수들 잡아줌.
그러고 
사용자가 원하는 이미지, 제목, 설명 이런 거 넣을 수 있도록 함.
 
 
py
@app.route("/movie", methods=["GET"])
def movie_get():
    all_movies = list(db.movies.find({},{'_id':False}))
    return jsonify({'result':all_movies})

 

결론

 

이제는 뭔가 알 거 같은데

내가 뭔가를 만들라고 하면 힘들 거 같다.

그래도 알아 가는 거 같아서 

뭐 괜춘

'웹 > 웹개발 종합반' 카테고리의 다른 글

웹개발 1주차 복습 (CSS)  (1) 2023.03.05
웹개발 1주차 복습 (웹 브라우저, HTML)  (0) 2023.02.27
웹개발 4주차 (1)  (0) 2023.02.12
웹개발 이거 다 끝나면  (1) 2023.02.10
웹개발 3주차  (0) 2023.02.10
PYTHON
 
from flask import Flask, render_template, request, jsonify
app = Flask(__name__) 
# flask 서버

from pymongo import MongoClient
import certifi

ca = certifi.where()

client = MongoClient('mongodb+srv://sparta:test@cluster0.v7fcneo.mongodb.net/?retryWrites=true&w=majority', tlsCAFile=ca)
db = client.dbsparta
#MongoDB에서 데이터 사용하기 위한 준비

@app.route('/')
def home():
   return render_template('index.html')
#Html 파일 불러오기

@app.route("/mars", methods=["POST"])
def mars_post():
    name_receive = request.form['name_give']
    address_receive = request.form['address_give']
    size_receive = request.form['size_give']

    doc = {
        'name': name_receive,
        'address': address_receive,
        'size': size_receive
    }
    db.mars.insert_one(doc)
    return jsonify({'msg': '주문 완료!'})
#POST 요청 방식 : 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청

@app.route("/mars", methods=["GET"])
def mars_get():
    mars_data = list(db.mars.find({},{'_id':False}))
    return jsonify({'result':mars_data})
#GET 요청 방식 : 통상적으로 데이터 조회(Read)를 요청

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

 

HTML

$(document).ready(function () {
            show_order();
        });
        function show_order() {
            $("#order-box").empty();
            fetch('/mars').then((res) => res.json()).then((data) => {
                let rows = data['result']
                rows.forEach((a) => {
                    let name = a["name"];
                    let address = a["address"];
                    let size = a["size"];

                    let temp_html = `<tr>
                        <td>${name}</td>
                        <td>${address}</td>
                        <td>${size}</td>
                      </tr>`;
                    $("#order-box").append(temp_html);
                });
            });
        }
        function save_order() {
            let name = $("#name").val();
            let address = $("#address").val();
            let size = $("#size").val();

            let formData = new FormData();
            formData.append("name_give", name);
            formData.append("address_give", address);
            formData.append("size_give", size);

            fetch('/mars', { method: "POST", body: formData, }).then((res) => res.json()).then((data) => {
                console.log(data);
                alert(data["msg"]);
                window.location.reload();
            });
        }
 
이거 부분만 해석(show_order, save_order)
프론트엔드가 Html 이고 백엔드가 py임.
지금 프론트엔드랑 백엔드가 어떻게 연결되는지는 
@app.route('/')
def home():
   return render_template('index.html')
이걸로 설명 가능
 
근데 show_order부터 차근차근히 보면 
#order-box 
에 있는 자료들 다 없애라. empty
그 다음에 fetch로 연결 어디에? /mars에
거기서 rows를 data의 result값으로 잡을 건데 이게 어디있던거냐 하면 
@app.route("/mars", methods=["GET"])
def mars_get():
    mars_data = list(db.mars.find({},{'_id':False}))
    return jsonify({'result':mars_data})
여기 있음.
여기서는 result 값이 mars라는 데이터베이스의 모든 값임.
 
다시 Html로 돌아가서 
rows 반복문으로 돌림. 
변수잡고
#order-box 
여기에 있는 값들은 없어진 상태에서 append를 통해서 추가됨. 
 
그 다음 save_order
이건 fetch부터 보는게 더 쉬운 거 같음. 
Html 에서 mars 불러라 
해서 서버의 post 형식의 mars 부르면 
 let formData = new FormData();
            formData.append("name_give", name);
            formData.append("address_give", address);
            formData.append("size_give", size);

여기 html에 있는 "....._give" 이런 친구들이

서버에 있는지 확인 

@app.route("/mars", methods=["POST"])
def mars_post():
    name_receive = request.form['name_give']
    address_receive = request.form['address_give']
    size_receive = request.form['size_give']

여기 있네요

    doc = {
        'name': name_receive,
        'address': address_receive,
        'size': size_receive
    }
    db.mars.insert_one(doc)
    return jsonify({'msg': '주문 완료!'})

그래서 저 '..._receive' 친구들 딕셔너리 행태로 저장하고

mars의 데이터 베이스에다가 추가

그러고 사용자가 볼 수 있는 주문완료라는 메시지 전달

 

 

이 게시물은 오로지 작성자가 잘 알아볼 수 있게 만들어진 거라서 

다음 번에 복습할 때 다른 사람들도 보기 좋게 만들어 보겠습니다... ㅎㅎ

'웹 > 웹개발 종합반' 카테고리의 다른 글

웹개발 1주차 복습 (웹 브라우저, HTML)  (0) 2023.02.27
웹개발 4주차 (2)  (0) 2023.02.13
웹개발 이거 다 끝나면  (1) 2023.02.10
웹개발 3주차  (0) 2023.02.10
웹개발 2주차 (2)  (0) 2023.02.04

블로그부터 꾸미고 싶다.

아까 블로그 관리 들어가니깐 

Html이랑 CSS 내가 하고 싶은 대로 바꿀 수 있는 거 같던데

 

흠.. 그 정도가 될려면 더 해야겠지

파이팅

'웹 > 웹개발 종합반' 카테고리의 다른 글

웹개발 4주차 (2)  (0) 2023.02.13
웹개발 4주차 (1)  (0) 2023.02.12
웹개발 3주차  (0) 2023.02.10
웹개발 2주차 (2)  (0) 2023.02.04
웹개발 2주차 (1)  (0) 2023.02.03

requests는 요청하는 것

beautifulsoup은 솎아내는 것

 

파이썬은 백엔드 (오늘 처음 알았음.)

 

파이썬 기본 문법은 워낙 많이해서 그냥 술술 지나갔다.

 

가상환경(virtual environment)은 같은 시스템에서 실행되는 다른 파이썬 응용 프로그램들의 동작에 영향을 주지 않기 위해, 파이썬 배포 패키지들을 설치하거나 업그레이드하는 것을 가능하게 하는 격리된 실행 환경

 

웹스크래핑(크롤링)

밑에 이거 터미널에 입력해서 설치해줘야 함. 
pip install bs4
 
이번 주차는 생각보다 쉬워서
어려웠던 게 없던 거 같음.
 
나중에 복습을 좀 더 꼼꼼하게 해야할 듯?

'웹 > 웹개발 종합반' 카테고리의 다른 글

웹개발 4주차 (1)  (0) 2023.02.12
웹개발 이거 다 끝나면  (1) 2023.02.10
웹개발 2주차 (2)  (0) 2023.02.04
웹개발 2주차 (1)  (0) 2023.02.03
웹개발 종합반 1주차  (0) 2023.01.30

어렵네

 

오늘 배운 거

1. 

fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
            let rows = data['RealtimeCityAir']['row']
            rows.forEach((a) => {
                console.log(a['MSRSTE_NM'],a['IDEX_MVL'])
            })
        })

해석

fetch로 URL에 있는 데이터 가져오고 그 다음에 res라는 이름 붙여주고 이 res를 json화 시킬거다.

그리고 rows는 URL에 있는 데이터의 RealtimeCityAir의 row로 들어갈거고 그걸 반복문 할거다.

 

2. 

 

fetch("http://spartacodingclub.shop/sparta_api/seoulair").then(res => res.json()).then(data => {
                let rows = data['RealtimeCityAir']['row']
                $('#names-q1').empty()
                rows.forEach((a) => {
                    let gu_name = a['MSRSTE_NM']
                    let gu_mise = a['IDEX_MVL']
                   
                    let temp_html = ``
                    if (gu_mise > 40) {
                        temp_html = `<li class = "bad">${gu_name} : ${gu_mise}</li>`
                    } else {
                        temp_html = `<li>${gu_name} : ${gu_mise}</li>`
                    }
                    $('#names-q1').append(temp_html)
                })
            })

해석

fetch로 URL에 있는 데이터 가져오고 그 다음에 res라는 이름 붙여주고 이 res를 json화 시킬거다.

그리고 rows는 URL에 있는 데이터의 RealtimeCityAir의 row로 들어갈거고 그걸 반복문 할거다.

근데 그 전에 이미 있었던 names-q1 의 정보들은 반복문 돌리기 전에 삭제

그리고 반복문 돌리는데 

변수 각각 설정해주고

temp_html에는 빈 곳으로 만들어준다.

그리고 gu_mise가 40보다 넘으면 

출력되는 값들이 빨간색이 되도록 하고 아니면 말고

근데 이것들은 names-q1 의 정보 뒤에 추가되어 온다.

 

3. 

fetch("http://spartacodingclub.shop/sparta_api/seoulbike").then(res => res.json()).then(data => {
                let rows = data['getStationList']['row']
                $('#names-q1').empty()
                rows.forEach((a) => {
                    let name = a['stationName']
                    let rack = a['rackTotCnt']
                    let bike = a['parkingBikeTotCnt']

                    let temp_html = ``

                    if (bike < 5) {
                        temp_html = `<tr class = "red">
                                        <td>${name}</td>
                                        <td>${rack}</td>
                                        <td>${bike}</td>
                                    </tr>`
                    } else {
                        temp_html = `<tr>
                                        <td>${name}</td>
                                        <td>${rack}</td>
                                        <td>${bike}</td>
                                    </tr>`
                    }
                    $('#names-q1').append(temp_html)              
                })
            })

해석

fetch로 URL에 있는 데이터 가져오고 그 다음에 res라는 이름 붙여주고 이 res를 json화 시킬거다.

그리고 rows는 URL에 있는 데이터의 RealtimeCityAir의 row로 들어갈거고 그걸 반복문 할거다.

근데 그 전에 이미 있었던 names-q1 의 정보들은 반복문 돌리기 전에 삭제

그리고 반복문 돌리는데 

변수 각각 설정해주고

temp_html에는 빈 곳으로 만들어준다.

그리고 2번이랑 똑같이 해석해주면 된다.

 

JQuery는 반복문 돌면서 URL에 있는 데이터들을 다 해주는거임.

 

어려웠던 거

 

1주차 퀴즈는 바로바로 풀었는데 2주차 퀴즈는 바로 못 푼 거 보면 잘 못하는 거 같습니다.

fetch도 한 5번 정도 보니깐 알겠던데..

해석도 저게 다 맞는지도 모르겠고 이거 참..

 

결론

 

열심히 하면 된다!

'웹 > 웹개발 종합반' 카테고리의 다른 글

웹개발 이거 다 끝나면  (1) 2023.02.10
웹개발 3주차  (0) 2023.02.10
웹개발 2주차 (1)  (0) 2023.02.03
웹개발 종합반 1주차  (0) 2023.01.30
2023 버킷리스트  (0) 2023.01.30

이제부터 자바 스크립트를 배우는데 

 

일단 자바 스크립트는 뭐냐

 

프로그래밍 언어 중 하나로, 브라우저가 알아들을 수 있는 언어

 

그래서 뭘 배웠냐

 

<script></script>    -> <head></head> 안에 써야함.

fuction hey()

console.log()

let a = 2         -> 파이썬과 다르게 앞에 let을 붙임. 아 참고로 파이썬은 브라우저가 못 알아듣는 언어

[ ] 리스트 ex) let a_list=[ ] , let a = ['사과', '배', '귤']

{ } 딕셔너리 ex) let a_dict={ } , let a = {'name':'영수', 'age':27}

컴퓨터는 0부터 센다. 

JQuery $

 

반복문 

let fruits = ['사과','배','감','귤']

fruits.forEach((a) => { console.log(a) })

 

조건문

let age = 24

if (age > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}

 

반복문 + 조건문

let ages = [12,15,20,25,17,37,24]

ages.forEach((a)=> {
if (a > 20) {
console.log('성인입니다')
} else {
console.log('청소년입니다')
}
})

 

append 사용

function checkResult() {
 let fruits = ['사과','배','감','귤','수박']
 fruits.forEach((a)=>{
    let temp_html = `<p>${a}</p>`         ->${a} 이거 JQuery 사용한거
    $('#q1').append(temp_html)
  })
}

 

함수해석

checkResult 불러라

fruits 리스트로 설정하고

반복문 돌리자

돌릴건데 여기서 q1에다가 temp_html을 뒤에 더 붙일거다

근데 ${a} 이거 JQuery 해서 a에 들어가는거 쓸거다

쓰면 알아서 결과나옴

 

ㅋㅋㅋㅋㅋ 이해한 거 말로 설명하는 것도 어렵구만

 

어려웠던 거는

append 부분 잘 이해가 안 되서 5번 정도 돌려본 듯

 

 

대충 쓰더라도 이렇게 쓰는게 좋은 거 같네 

복습도 되고 :-)

'웹 > 웹개발 종합반' 카테고리의 다른 글

웹개발 이거 다 끝나면  (1) 2023.02.10
웹개발 3주차  (0) 2023.02.10
웹개발 2주차 (2)  (0) 2023.02.04
웹개발 종합반 1주차  (0) 2023.01.30
2023 버킷리스트  (0) 2023.01.30

https://daesungsim.github.io/ssdmoviepage/

 

중요한 거

 

HTML은 뼈대다.

뭔가 여는 태그와 닫는 태그로 이루어져있고

태그의 종류는 굉장히 많다.

 

CSS는 꾸미기다.

꾸밀려면 명찰이 있어야 하고 명찰은 class로 붙인다.

 

그리고 이제 나는 온라인 청첩장(정적 웹페이지) 정도는 할 수 있는 실력이 된거다.

 

내 생각

 

이번 주는 프론트 엔드를 배운거다.

다음 주는 자바 스크립트를 배운다는데 

그때도 잘해봅시다.

 

 

 

근데 하면 할수록 백엔드를 하고 싶다는 생각이 드는건 뭐지

 

'웹 > 웹개발 종합반' 카테고리의 다른 글

웹개발 이거 다 끝나면  (1) 2023.02.10
웹개발 3주차  (0) 2023.02.10
웹개발 2주차 (2)  (0) 2023.02.04
웹개발 2주차 (1)  (0) 2023.02.03
2023 버킷리스트  (0) 2023.01.30

https://daesungsim.github.io/musungpage/

 

궁금하지는 않겠지만 나의 2023 버킷리스트다.

 

스파르타 코딩클럽에서 1월에만 무료로 수업한다고 해서 재미로 들었는데 생각보다 재미있었다.

여기서는 CSS라는 언어를 기반으로 하는데 이게 처음 배우는 사람 입장에서 굉장히 쉽다고 한다.

난 쉬운지는 모르겠는뎁

 

아 그리고 github라고 내가 코딩하고 만든 웹페이지를 인터넷 상으로 퍼져 나가게 하는 사이트도 알게 되었는데

이제 이걸 안 게 아쉽고 지금이라도 알아서 다행이라는 생각이다..

 

코딩은 매일매일 해야한다고 하는데 난 조금 게으르고 끈기가 부족한 면이 있다.

그래서 이제는 그러지 않을려고 다짐한다.

 

2023년은 알차게 보내고 게임(특히 롤) 줄이자...!!

'웹 > 웹개발 종합반' 카테고리의 다른 글

웹개발 이거 다 끝나면  (1) 2023.02.10
웹개발 3주차  (0) 2023.02.10
웹개발 2주차 (2)  (0) 2023.02.04
웹개발 2주차 (1)  (0) 2023.02.03
웹개발 종합반 1주차  (0) 2023.01.30

+ Recent posts

티스토리툴바