TIL220511

 안하던 짓을 붙잡고 하려다 보니 몸에서 과부하가 생긴건지 감기에 눈병에 손목까지.. 아프지 않은 곳이 없다. 머리는 멍 하고 코드는 안 풀리고.. 우여곡절 끝에 1주차 미니 프로젝트가 끝났다. 더 잘할 수 있었을 것 같은데.. 끝났다고 생각하니 기분이 좋기도하다. 하지만 다음주에는 또 다음주의 난관이 있겠지..

 

http://webprogramming-mj6119.shop/

스위터 - 세상을 달달하게

구현 못해서 아쉬웠던점

1. 카드에 작성자를 추가하지 못했던 것

2. 작성자 프로필 편집을 하지 못했던 것

3. 작성자를 클릭하면 그 작성자가 올렸던 글들을 모아 볼 수 있게 하는 기능을 추가하지 못했던 것

4. 좋아요 기능을 추가하지 못한 것 

5. CSS부분을 크게 신경쓰지 못한 것(og:title, og:description 포함)

6. 객체 배열의 DB 저장에 너무 많은 시간을 할애한 것

7. 서버사이드 렌더링을 많이 사용하지 못한 것

8. 로그인/로그아웃 담당을 하지 않아서 많이 건드리지 못했던 것

9. card의 아이디 값을 받아와 삭제를 구현하지 못했던 것 (리스트의 개수를 count 변수로 받아 DB에 추가했다.)

 

6번은 아쉬웠던 점도 있었지만 구글링해서 이것저것 찾아보면서 정보를 얻었던 시간이기도 했었던 지라 아주 의미 없는 시간은 아니었었겠지만 정말 많은 시간을 할애해서 만든 결과물은 사실상 2분이면 다 돌아보는 기능이었다는게 허무하기도 하다. 아직 예외처리도 많이 부족하고 팀원들의 코드를 합치면서 오류가 나서 작동하지 않는 부분이 수도 없이 나타나서 갈 길이 한참 멀었다는 생각이 들었다. 

 

        function listing() {
            $.ajax({
                type: "GET",
                url: "/calories",
                data: {},
                success: function (response) {
                    let foods = response['foods']
                    $('#cards-box').empty()
                    for (let i = 0; i < foods.length; i++) {
                        let total_kcal = foods[i]['total_kcal']
                        let detail = foods[i]['food_detail']
                        let file = foods[i]['file']
                        let time = foods[i]['time']
                        let id = foods[i]['_id']

                        if (file == undefined) {
                            file = 'no_img.png'
                        }

                        // 배열에 넣음

                        let temp_html = `<div class="card">
                                            <img class="food_img"
                                                 src="../static/${file}" alt="">
                                            <div class="card_body">
                                                <h5 class="all_calories">총 ${total_kcal} Kcal</h5>
                                                <p class="save-date">${time}</p>
                                            </div>
                                            <table id="card_content_${i}" class="card_content">
                                                <tr>
                                                    <th>음식 이름</th>
                                                    <th>용량(g)</th>
                                                    <th>Kcal</th>
                                                </tr>
                                            </table>
                                        </div>`
                        $('#cards-box').append(temp_html)
                        // 밑에 푸드 데이터들을 따로 받아옴
                        for (let j = 0; j < detail.length; j++) {
                            let food_name = detail[j]['food_name']
                            let food_g = detail[j]['food_g']
                            let food_kcal = detail[j]['food_kcal']

                            let temp_tr = `<tr class="food_data" id="detail_${j}">
                                                <td>${food_name}</td>
                                                <td>${food_g}</td>
                                                <td>${food_kcal}</td>
                                            </tr>`
                            // console.log(temp_tr)
                            let card_content = `card_content_${i}`;
                            // console.log(card_content)
                            $('#' + card_content).append(temp_tr)
                        }

                    }
                }
            })
        }

def posting():
    today = datetime.now()
    time = today.strftime('%Y-%m-%d-%H-%M')

    filename = f'file-{time}'
    file = request.files["file_give"]

    extension = file.filename.split('.')[-1]

    save_to = f'static/{filename}.{extension}'
    file.save(save_to)

    food_receive = request.form['food_give']
    total_kcal_receive = request.form['total_kcal_give']

    # token_receive = request.cookies.get('mytoken'),
    # payload = jwt.decode(token_receive, SECRET_KEY, algorithms=['HS256'])
    # writer = payload['id']

    homework_list = list(db.foods.find({}, {'_id': False}))
    count = len(homework_list) + 1

    food_detail = json.loads(food_receive)

    food_ary = []
    for food in food_detail:
        food_ary.append({
            "food_name": food['food_name'],
            "food_g": food['food_g'],
            "food_kcal": food['food_kcal']
        })

    doc = {
        "food_detail": food_ary,
        "total_kcal": total_kcal_receive,
        "time": today.strftime('%Y.%m.%d'),
        'file': f'{filename}.{extension}',
        'num': count,
        # 'writer': writer
    }
    db.foods.insert_one(doc)

    return jsonify({'msg': '업로드 완료!'})

한 이틀 걸린 코드.. 완성도가 높은 것도 아닌데 이틀이나 걸렸다니..^_ㅜ 구현하는데 어려웠던 것들을 시간 순서대로 나열해보면

1) 로컬 파일 업로드 작업

2) food_name, food_g, food_kcal라는 키를 가진 food 객체의 배열을 DB에 저장하는 것

3) DB에 저장된 food 객체 배열의 값을 JS에서 받아오는 것

4) 받아온 값을 HTML에 추가하는 것.

5) 로그인 된 아이디 값을 DB에 저장해 card에 작성자를 붙이는 것 (팀원들의 코드를 합치면서 오류가 발생해 고치지 못함)

 

사실 우리 팀이 가장 애를 먹었던 것은 단연 3번이 아닌가 싶다.  이차원 배열로 받아야 하는 거라 생소해서 어렵기도 했고 코드 (개인적으로는) 복잡해서 머리속에 잘 그려지지가 않았다. 이중 루프를 사용하고 <tr><td>로 값을 바꾸는 건 어렵지가 않았는데

$('#' + card_content).append(temp_tr)​

를

$('#cards-box').append(temp_html)

보다 선행에 삽입해서 오류가 계속 나타나 정말 정신없이 시간을 뺏겨버렸다.