[TIL] 230113 토이프로젝트 4일차 끝

2023013

최종적으로 토이프로젝트를 마무리했다.

 

3일 차에서 URL을 넣는 Form을 만들었고, 그 안에 Ajax와 mongoDB를 사용해 POST형식으로 DB 쪽에 넣고 GET방식으로 홈페이지에 뿌려주었다. 

function ajaxBookMark(url, data) {
    bookmark_list = {};
    $('#cards-box').empty();
    $.ajax({
        type: 'POST',
        url: url,
        data: data,
        async: false,
        success: function (response) {
            if (response['msg']) {
                response['msg'];
            } else if (response['error']) {
                alert(response['error']);
            }
            bookmark_list = response;
        },
        error: function () {
            // alert('url을 확인해 주세요');
        },
    });

    return bookmark_list;
}

function showBookMark() {
    const tokenId = document.querySelector('.logo').getAttribute('data-id');
    bookmark_list = ajaxBookMark(
        '/show_bookmark', //
        { id_give: tokenId } //
    )['bookmark_list'];

    bookmark_list.forEach((list) => {
        const number = list['number'];
        const image = list['image'];
        const title = list['title'];
        const category = list['category'];
        const url = list['url'];
        let hash = list['hash'];

        const reg = /[\{\}\[\]\/?.,;:|\)*~`!^\-_+<>@\#$%&\\\=\(\'\"]/gi;

        hash = hash.map((tag) => `#${tag.replace(reg, '')}`).join(' ');

        const tempHTML = `
                        <div class="col cards-box" data-aos="fade-up" data-aos-delay="200" data-aos-easing="ease-in-out" data-aos-once="false">
                        <div class="cards-box__container logo" data-number="${number}">
                            <div class="cards-box__category"><span>${category}</span><button class="cards-box__closeBtn"></button></div>
                            <div class="cards-box__card" style="width: 18rem">
                                <a href="${url}" target= _blank rel= noopener noreferrer>
                                    <img src="${image}" class="cards-box__img" alt="bookimage" onerror="this.src='/static/img/errorImg.jpg';"//>

                                    <p class="cards-box__body-title">${title}</p>
                                </a>
                                <p class="cards-box__body-tag">${hash}</p>
                            </div>
                        </div>
                    </div>
        `;

        $('#cards-box').append(tempHTML);
    });

    addCategoryPopUp();
}

function saveBookMark(url, data) {
    return ajaxBookMark(url, data);
}

function deleteBookMark(url, data) {
    return ajaxBookMark(url, data);
}

// ================ 실행 함수 ===============

showBookMark();

#============================bookMark=====================

@app.route("/save_bookmark", methods=["POST"])
def save_bookmark():
    # json -> dictionary
    bookmark_data = json.loads(request.form["data_give"])
    id_receive = bookmark_data["id"]
    url_receive = bookmark_data["url"]
    category_receive = bookmark_data["category"]
    hash_receive = bookmark_data["hash"]

    all_list = list(db.bookmarks.find({}))
    if len(all_list) != 0:
        number = max(x["number"] for x in all_list) + 1
    else:
        number = 1

    bookmark_list = list(db.bookmarks.find(
        {"id": id_receive, "url": url_receive}, {'_id': False}))
    if len(bookmark_list) != 0:
        return jsonify({"error": "이미 가지고 있는 url 입니다."})

    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']
    image = soup.select_one('meta[property="og:image"]')['content']

    new_bookmark = {
        "number": number,
        "title": title,
        "image": image,
        "id": id_receive,
        "url": url_receive,
        "category": category_receive,
        "hash": hash_receive
    }
    db.bookmarks.insert_one(new_bookmark)

    category_list = list(db.categories.find(
        {"id": id_receive, "category": category_receive}, {'_id': False}))

    if len(category_list) == 0:
        new_category = {
            "category": category_receive,
            "id": id_receive
        }
        db.categories.insert_one(new_category)

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


@app.route("/show_bookmark", methods=["POST"])
def show_bookmark():
    id_receive = request.form["id_give"]
    bookmark_list = list(db.bookmarks.find({"id": id_receive}, {'_id': False}))
    return jsonify({'bookmark_list': bookmark_list})


@app.route("/delete", methods=["POST"])
def delete_bookmark():
    number_receive = request.form["number_give"]
    number = int(number_receive)
    db.bookmarks.delete_one({"number": number})
    return jsonify({"msg": "삭제 완료"})

그리고 디자인은 아래와 같이 완성했다.

참고로 Delete 버튼도 만들어 DB에서도 삭제되도록 적용시켜 주었다.

 

로그인의 보안성을 위해 토큰과 쿠키를 PyJwt 패키지를 통해 사용하였다.

 

결과물을 aws로 호스팅 하는 과정에서 토큰 -500 에러가 발생했는데, TypeError: Object of type bytes is not JSON serializable라는 에러였다.

 

이 에러코드는. decode('utf-8')을 사용하면 해결이 되었는데, 로컬 환결일 때는 decode를 사용하고 호스팅 서버일 때는 사용하지 않아야 한다. 이 에러는 인코딩하고 json형으로 리턴하는 과정에서 type을 인식하지 못해 발생한 것으로, 다시 decoding 하여 결괏값을 전달해줘야 한다.

 

    # jwt 암호화 
        token = jwt.encode(payload, SECRET_KEY, algorithm='HS256').decode('utf-8')
        #로컬 환경 = .decode('utf-8') 사용 Line 87
        #호스팅 서버 = .decode('utf-8') 없앰 Line 87

결과 화면

유튜브 구현 화면

토이프로젝트 GitHub

GitHub - Seogun95/12jo_ToyProject