나홀로메모장 파생형 만들기-Call of AJAX

원래 페이지네이션이랑 수정/삭제도 구현하려고 했는데 못함…

페이지네이션은 전에 했던 게 오브젝트를 동적으로 생성하는건데 여기서는 DB에 있는 걸 받아와서 진행해야 하는거라 버튼 렌더링/로직에서 막혔고 수정/삭제는 이따 보시면 아시겠지만 저기서 뭐가 뭔지를 구분할 수단이 없습니다. 아, 사람은 구별할 수 있지. 컴퓨터가 못해요.

---

인간적으로 달력 위에 시계 마렵잖아요

Reference

https://stickode.tistory.com/124

네? 아날로그요? 아 그거 힘들어… 내가 봤어… 네? 찰떡같이 넘어가서 간지나는 Flipclock이요? 그거 제이쿼리 라이브러리 있으니까 갖다 쓰세요. 이건 돼지털 시계임.

function getClock() {
    const date = new Date();
    const hours = String(date.getHours()).padStart(2, "0");
    const min = String(date.getMinutes()).padStart(2, "0");
    const sec = String(date.getSeconds()).padStart(2, "0");
    clock.innerText = `${hours}:${min}:${sec}`;
}

getClock();
setInterval(getClock, 1000);

date 밖으로 빼면 시계가 안가더라… 정확히는 새로고침 해야 감.

Create/Read

참고로 이거 원래도 CR만 있었습니다. 예제로 한번 써보라고 올린 거 있었는데 페이지네이션도 없는데다가 카드 높낮이도 제각각+추가되는 순서가 좌우가 아님+많은 사람들이 올려놔서 대혼란시대임… 솔직히 이정도면 페이지네이션 말고 프로그레스바 넣지 좋은데? 

자 일단 완성작 보고 갑시다.

아니 ㄹㅇ 이걸 하셨어요? 예 했습니다. 그림자는 덤임. 이모지는… 어… 아니 리눅스는 안되는 줄 알았는데 파이참에서 컨트롤 알트 ;하니까 이모지 입력창 떠서 깜놀했음. 아니 안될 줄 알았는데 이게 됐다니까??? 그럼에도 리눅스에서 안되는 카톡은 대체 노션도 웹노션이 있거늘! 

Create

//쓰기
function write_article() {
    let article_title = document.getElementById('write-title').value;
    let article_contents = document.getElementById('write-contents').value;
    let date = new Date();
    let year = date.getFullYear();
    let month = String(date.getMonth() + 1).padStart(2, '0');
    let day = String(date.getDate()).padStart(2, '0');
    let hour = String(date.getHours()).padStart(2, "0");
    let minute = String(date.getMinutes()).padStart(2, '0');
    let second = String(date.getSeconds()).padStart(2, '0');
    let timestamp = year + '-' + month + '-' + day + ' ' + hour + ':' + minute + ':' + second;

    $.ajax({
        type: "POST",
        url: "/write",
        data: {
            'timestamp_give': timestamp,
            'title_give': article_title,
            'contents_give': article_contents
        },
        success: function (response) {
            alert(response['msg'])
            window.location.reload();
            document.getElementById('write-title').value = '';
            document.getElementById('write-contents').value = '';
        }
    })
}

const write_btn = document.getElementById('write_article');
write_btn.addEventListener('click', (e) => {
    write_article();
})

JS

@app.route('/write',methods=['POST'])
def write():
    timestamp_receive = request.form['timestamp_give']
    title_receive = request.form['title_give']
    contents_receive = request.form['contents_give']
    print(timestamp_receive)

    doc = {
        'timestamp':timestamp_receive,
        'title':title_receive,
        'contents':contents_receive
    }

    db.diarys.insert_one(doc)

    return jsonify({'msg': '저장되었습니다!'})

Python

타임스탬프 찾아보니까 파이썬에서 만들더라… 난 JS에서 만들어서 줬는디… 아무튼, 타임스탬프는 글의 작성일(과 시간)을 기록한 것이다. 예전에 원페이지 쇼핑몰 만들면서도 회원가입할 때 타임스탬프를 받았었는데, 그거다. 그냥 그거다. 제목이랑 내용은 뭐… 다들 아시죠?

코드에 짬이 좀 차신 분들이라면 뭔가 위화감을 느낄 수도 있다. 응? idx는 없나요? 이게 MySQL은 그게 강제되는거라 Key로 잡아놓고 뭐 쓸 때 알아서 자기가 추가했는데(그래서 삭제하면 번호가 중간중간 비는 게 그대로 나온다), 몽고DB는 그런게 없다. id가 있긴 있는데 그게 곧 idx가 아니라서 저것도 같이 보내려면 별도로 JS에서 중복 안 되는 번호로 ‘만들어서’ 보내던가, 서버단에서 추가하면서 idx를 붙이던가 해야 한다. 그리고 이게 U/D를 추가 못 하는 원인이 된 게, 컴퓨터 입장에서 타임스탬프 말고 수정/삭제할 글을 식별할 수단이 없다.

일단 CRUD까지 다 되는 게시판은 나중에 FLASK/MongoDB/JS 쓰는걸로 찾아서 차근차근 따라해 볼 예정…

Read

Read는 DB에 있는 거 불러와서 배치하면 되는데 두가지가 어려웠다. 첫번째는 내가 의도한건 Z자로 정렬되는(위 그림처럼)거였는데 얘는 밑으로 줄줄이 붙고 있다. 그래서 그리드로 줬던 걸 플렉스로 바꿨고, 두번째로 게시판은 가장 최근에 올린 글이 먼저 나온다. SNS도 그렇지만 최근에 올린 글이 먼저다.

$.ajax({
        type: "GET",
        url: "/load_diary",
        data: {},
        success: function (response) {
            let articles = response['all_articles']
            for (let i = articles.length; i >= 1; i--) {
                let timestamp = articles[i-1]['timestamp'];
                let title = articles[i-1]['title'];
                let content = articles[i-1]['contents'];
                let content_area = document.querySelector('.contents-area');
                let card_border = document.createElement('div');
                card_border.classList.add('card');
                card_border.id = 'contents';

                let card_body = document.createElement('div');
                card_body.classList.add('card-body');

                content_area.appendChild(card_border);
                card_border.appendChild(card_body);

                card_body.innerHTML = `<h4 class="card-title">${title}</h4><h6 class="timestamp">${timestamp}</h6><p class="card-text">${content}</p>
                    <a href="#" class="card-link">More...</a>`
            }
        }
    })

JS

@app.route('/load_diary',methods=['GET'])
def read():
    articles = list(db.diarys.find({}, {'_id': False}))
    return jsonify({'all_articles': articles})

Python

배치는 CSS에서 display를 그리드 말고 플렉스고 바꾼 다음, 플렉스 랩 주고 카드 크기를 1/3으로 맞춰서 해결봤다. 동적으로 생성할때는 안그러더니 왜그러나 몰라… ㅡㅡ 근데 두번째는 어떻게 했냐… 서버에서 요청받고 데이터를 불러올 때 딕셔너리 형식으로 저장된 것들이 들어있는 ‘배열’로 가져온다. 그럼 그 배열을 뒤집으면 되나요? 일단 그렇게 하긴 했는데 파이썬에서 시도했다가 에러뜸.

그래서 어차피 반복문으로 추가하는거면 거꾸로 불러서 뒤에서부터 인덱싱하자 해서 저렇게 된거다. 그것도 자바스크립트에서도 배열이 있고 인덱싱이 있으면 -1 이런거 되겠네? -> 귀찮은데 걍 거꾸로 인덱싱하지 뭐 해서 이렇게 된 것. 게시물의 개수가 10개이면 인덱스는 0~9니까 반복문 안의 i에서는 1을 빼야 하고(안그러면 에러뜬다), for문의 i는 10에서 시작해서 1이 될때까지 하나씩 뺀다. 저 하나씩 빼는거 ++ 반대라 –인가 했더니 진짜였고…