[스파르타코딩클럽] 웹개발 종합반 4주차 기록

스파르타코딩클럽 웹개발종합반

[스파르타코딩클럽] 웹개발 종합반 4주차 기록

고을마을 2022. 3. 15. 21:41

4주차 강의를 들었다.

Flask 프레임워크를 활용해서 API를 만들어서 연결시켜봤다.

4-2 Flask 시작하기-서버만들기에서부터 4-4 Flask 시작하기-본격 API만들기까지

새로운 프로젝트를 진행하고 Flask 패키지를 깔았으며.

static폴더(이미지, css 파일을 넣는 폴더)

templates 폴더(html 파일을 넣는 폴더)

app.py 파일을 만들어 주었다.

* GET

→ 통상적으로! 데이터 조회(Read)를 요청할 때 예) 영화 목록 조회

→ 데이터 전달 : URL 뒤에 물음표를 붙여 key=value로 전달

→ 예: google.com?q=북극곰

* POST

→ 통상적으로! 데이터 생성, 변경, 삭제 요청 할 때 예) 회원가입, 회원탈퇴, 비밀번호 수정

→ 데이터 전달 : 바로 보이지 않는 HTML body에 key:value 형태로 전달

@app.route('/test', methods=['GET'])
def test_get():
   title_receive = request.args.get('title_give')
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 GET!'})

$.ajax({
    type: "GET",
    url: "/test?title_give=봄날은간다",
    data: {},
    success: function(response){
       console.log(response)
    }
  })

@app.route('/test', methods=['POST'])
def test_post():
   title_receive = request.form['title_give']
   print(title_receive)
   return jsonify({'result':'success', 'msg': '이 요청은 POST!'})

$.ajax({
    type: "POST",
    url: "/test",
    data: { title_give:'봄날은간다' },
    success: function(response){
       console.log(response)
    }
  })

index.html 파일과

app.py의 GET 요청 및 확인 코드, POST 요청 및 확인 코드를 이해하는데 많은 시간이 걸렸다.

주고 받고의 개념이 아직까지는 익숙하지 않달까?

계속 복습해야겠다.

4-5 화성땅 공동구매-프로젝트 세팅하기에서부터 4-8 화성땅 공동구매-GET 연습(주문 보여주기)까지

위와 같은 페이지를 만들어 보았다.

@app.route("/mars", methods=["POST"])
def web_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': '주문 완료!'})

이름과 주소, 평수의 정보를 클라이언트에 받아서 저장해주었다.

db 저장과 같은 경우에서는 저번 시간에 배웠던 mongo db연결법을 활영해보았다!

$(document).ready(function () {
    show_order();
});

function show_order() {
    $.ajax({
        type: 'GET',
        url: '/mars',
        data: {},
        success: function (response) {
            let rows = response['orders']
            for (let i =0; i<rows.length; i++){
                let address= rows[i]['address']
                let name= rows[i]['name']
                let size= rows[i]['size']

                let temp_html = `<tr>
                                    <td>${name}</td>
                                    <td>${address}</td>
                                    <td>${size}</td>
                                </tr>`
                $('#order_list').append(temp_html)
            }
        }
    });
}

function save_order() {
    let name = $('#name').val()
    let address = $('#address').val()
    let size = $('#size').val()

    $.ajax({
        type: 'POST',
        url: '/mars',
        data: {name_give: name, address_give: address, size_give: size},
        success: function (response) {
            alert(response['msg'])
            window.location.reload()
        }
    });
}

이름과 주소, 평수에 대한 정보를 서버로 보내주었다.

또한 다시 받아오면서 msg 즉 주문완료라는 창이 열리면서 새로고침이 되게끔 만들어주었다. window.location.reload()!!

@app.route("/mars", methods=["GET"])
def web_mars_get():
    order_list = list(db.mars.find({}, {'_id': False}))
    return jsonify({'orders':order_list})

클라이언트에서 받을 것 없이 서버에서는 orders에 주문정보를 담아서 보내주기만 하면 됐다.

$(document).ready(function () {
    show_order();
});

function show_order() {
    $.ajax({
        type: 'GET',
        url: '/mars',
        data: {},
        success: function (response) {
            let rows = response['orders']
            for (let i =0; i<rows.length; i++){
                let address= rows[i]['address']
                let name= rows[i]['name']
                let size= rows[i]['size']

                let temp_html = `<tr>
                                    <td>${name}</td>
                                    <td>${address}</td>
                                    <td>${size}</td>
                                </tr>`
                $('#order_list').append(temp_html)
            }
        }
    });
}

서버에서 응답을 받아서 반복문을 돌리고 temp_html에 찍어주면 끝.

4-9 스파르타피디아-프로젝트 세팅에서부터 4-13 스파르타피디아-GET 연습(보여주기)까지

전 강의에서 진행했던 스파르타피디아를 좀 더 발전시켜봤다.

영화URL을 불러오면 자동적으로 불러오는 부분이 있다.

바로 영화 이미지, 제목, 설명 부분이다. 이 부분을 크롤링해서 불러와야했다.

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

soup.select('태그명[속성="값"]') 을 활용하여 크롤링할 수 있었다.

@app.route("/movie", methods=["POST"])
def movie_post():
    url_receive = request.form['url_give']
    star_receive = request.form['star_give']
    comment_receive = request.form['comment_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')

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

    doc = {
        'image': image,
        'title': title,
        'desc': desc,
        'star': star_receive,
        'comment': comment_receive
    }
    db.movie.insert_one(doc)

    return jsonify({'msg':'저장 완료!'})

클라이언트에서 URL, star, comment 정보를 받아 저장!

또 URL을 통해서 영화 이미지, 제목, 설명을 불러올수 있게 했고 db 저장까지 시켜줬다.

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

    $.ajax({
        type: 'POST',
        url: '/movie',
        data: {url_give: url, star_give: star, comment_give: comment},
        success: function (response) {
            alert(response['msg'])
            window.location.reload()
        }
    });
}

URL과 star, comment에 대한 정보를 서버로 보내주었다.

또한 다시 받아오면서 msg 즉 저장 완료 창이 열리면서 새로고침이 되게끔 만들어주었다. window.location.reload()!!

@app.route("/movie", methods=["GET"])
def movie_get():
    movie_list = list(db.movie.find({}, {'_id': False}))
    return jsonify({'movie_select': movie_list})

클라이언트에서 받을 것 없이 서버에서는 정보를 담아서 보내주기만 하면 됐다.

function listing() {
    $.ajax({
        type: 'GET',
        url: '/movie',
        data: {},
        success: function (response) {
            let rows= response['movie_select']
            for (let i = 0; i<rows.length; i++){
                let title = rows[i]['title']
                let image = rows[i]['image']
                let comment = rows[i]['comment']
                let star = rows[i]['star']
                let desc = rows[i]['desc']

                let star_image= '⭐'.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_image}</p>
                                            <p class="mycomment">${comment}</p>
                                        </div>
                                    </div>
                                </div>`
                $('#cards-box').append(temp_html)
            }
        }
    })
}

서버에서 응답을 받아서 반복문을 돌리고 temp_html에 찍어주면 끝.

4-14 4주차 끝 & 숙제설명

2주차까지 숙제로 만들었던 아이유 팬명록으로 숙제를 진행했다.

@app.route("/homework", methods=["POST"])
def homework_post():
    name_receive = request.form['name_give']
    comment_receive = request.form['comment_give']
    doc = {
        'name': name_receive,
        'comment': comment_receive
    }
    db.homework.insert_one(doc)
    return jsonify({'msg':'저장 완료!'})

@app.route("/homework", methods=["GET"])
def homework_get():
    notice_board= list(db.homework.find({}, {'_id': False}))
    return jsonify({'cheer_card': notice_board})

$(document).ready(function () {
    set_temp()
    show_comment()
});

function set_temp() {
    $.ajax({
        type: "GET",
        url: "http://spartacodingclub.shop/sparta_api/weather/incheon",
        data: {},
        success: function (response) {
            $('#temp').text(response['temp'])
        }
    })
}

function save_comment() {
    let name = $('#name').val()
    let comment = $('#comment').val()
    $.ajax({
        type: 'POST',
        url: '/homework',
        data: {name_give: name, comment_give: comment},
        success: function (response) {
            alert(response['msg'])
            window.location.reload()
        }
    })
}

function show_comment() {
    $.ajax({
        type: "GET",
        url: "/homework",
        data: {},
        success: function (response) {
            let rows = response['cheer_card']
            for (let i=0; i<rows.length; i++){
                let name = rows[i]['name']
                let comment = rows[i]['comment']

                let temp_html = `<div class="card">
                                    <div class="card-body">
                                        <blockquote class="blockquote mb-0">
                                            <p>${comment}</p>
                                            <footer class="blockquote-footer">${name}</footer>
                                        </blockquote>
                                    </div>
                                </div>`
                $('#comment-list').append(temp_html)
            }
        }
    });
}

닉네임과 코멘트를 서버에 넘긴 후 저장시켰고,

서버가 정보를 넘기면 반복문을 돌리고 이것을 temp_html에 찍어줬다.

4주차 숙제도 끝.

사실 몇번을 반복해서 들었는지 모르겠다.

GET, POST 방식이 초반에 잘 이해가 안됐다.

지금도 완벽하게 내가 숙지한건지 잘 모르겠다.

5주차때 복습을 한다고 하니 5주차때 설명없이 혼자서 해봐야겠다.

저작자표시 (새창열림)