내일배움캠프 D+17

⏳ 타임어택 만회하기

웹개발 복습 전 미뤄뒀던 타임어택에 손을 대보기로 했다.
일단 1시간 정도 추가로 고민해보고 소스코드를 보는 것으로 결정하고 시작했다.

---

🌠 메인 페이지

• 입력 - 출력
  입력: 제목/비밀번호/내용
  출력: 글갯수/제목/날짜와 시간/삭제버튼

  컬럼 상세
  idx - 번호(데이터의 유니크한 번호)
  title - 타이틀
  content - 내용
  pw - 비밀번호
  reg_date - 저장 데이트 타임
  
  - Reg_date를 이용하여 항상 최신순으로 정렬
  - 삭제시 유니크한 번호인 idx 컬럼을 사용하여 삭제 (테이블에는 연속적인 번호)
  - 페이지 이동으로 삭제 구현

• idx
  count()는 업데이트 이후 실행되지 않고, count_documents()를 사용하면 데이터가 많을 경우 아주 오랜 시간이 걸린다.
  따라서 count(), count_documents() 대신에 collection.estimated_document_count()를 사용.
  참고

  @app.route('/post', methods=['POST'])
  def save_post():
     post_count = db.articles.estimated_document_count({})
     title_receive = request.form['title_give']
     content_receive = request.form['content_give']
     password_receive = request.form['password_give']
  
     # 도큐먼트 수로만 넣으면 중간에 삭제가 됐을 때 빈 숫자가 들어가기 때문에 최근 숫자에서 +1
     if post_count == 0:
         idx = 1
     else:
         idx = db.articles.find_one(sort=[("idx", -1)])['idx'] + 1
     doc = {
         'idx': idx,
         'title': title_receive,
         'content': content_receive,
         'pw': password_receive,
         # 여기서 시간 형태를 바꾸지 않고 GET 으로 가져올 때 바꾸기!
         'reg_date': datetime.now()
     }
     db.articles.insert_one(doc)
  
     return jsonify({'result': 'success', 'msg': '포스팅 성공!'})

• reg_date
  datetime.now()하면 DB값처럼 찍힌다.
  이후 전달할 때 반복문으로 strftime 함수 써서 바꿔주기!

  @app.route('/post', methods=['GET'])
  def get_post():
     posts = list(db.articles.find({}, {'_id': False}).sort('reg_date', -1))
     # DB대로 들어간 posts 배열 안의 시간 형태를 원하는 모양으로 바꿔준다!
     for a in posts:
         a['reg_date'] = a['reg_date'].strftime('%Y.%m.%d %H:%M:%S')
     return jsonify({'all_post': posts})

  참고
  

---

🌠 삭제 페이지

• DB값 넘겨주기
  숫자값 변환해준다.

  @app.route('/detail/<idx>')
  def detail(idx):
     # 문자로 들어오는 idx 변환!!!!
     post = db.articles.find_one({'idx': int(idx)}, {'_id': False})
     return render_template('detail.html', post=post)

• Jquery Ajax DELETE

  function deleteArticle() {
            $.ajax({
                type: "DELETE",
                url: "/post?idx={{ post.idx }}",
                success: function (response) {
                    alert(response["msg"])
                    window.location.href="/"
                }
            })
    }

  @app.route('/post', methods=['DELETE'])
   def delete_post():
      idx = request.args.get('idx')
      print(idx)
      db.articles.delete_one({'idx': int(idx)})
      return {"result": "success", "msg": "삭제 성공!"}

---

✅ Check Point

	- db값 가져와서 진자2 쓰려면 render_template으로 같이 넘겨주기
	- 데이터 타입 파악하기
	- request.args.get 보면 파라미터 넘겨받는 값 있다고 생각해야함!
	- 오타 있는지 확인 잘 하기!!!

---

SAVE 💾

와ㅋㅋㅋ reg_data라고 써놓질 않나 idx는 idk로 적고 td태그는 tb태그... 아주 오타 작렬이었다ㅋㅋㅋㅋ그러니까 db저장도 안되고 get도 안나오지...에휴ㅋㅋㅋㅋidk가 너무 웃기다 진짜;; 자기소개도 아니고ㅠ
그리고 확실히 그랬다, git으로 작업하니까 로컬 파일이 있는 게 아니라서? 재실행을 매번 해야됐음... 담번엔 clone 떠놓고 로컬하다가 복붙해야겠다.
제이쿼리 Ajax에도 4가지 타입이 있는 걸 이제야 알았다... post get put delete 이거 관련해서도 조금 찾아봐야겠다.

---

💻 웹개발 심화반 4주차 복습

일단 내가 마음대로 짰던 코드와 답안 코드를 비교해보고, 깨달은 부분을 체크하고 다시 4주차 처음부터 해보는 것을 목표로 했다.

---

• 갯수 세기

  $a_like.find("span.like-num").text(num2str(response["count"]))

  이 코드는 count를 돌려받을 때 이미 type별 count를 받은 것이기 때문에 사실 ${type}-num으로 바꿔서 적을 필요가 없다.

---

Bulma에서 요소가 감춰지도록 세팅해둔 클래스

.is-hidden {
    display: none!important;
}

제이쿼리 토글 메소드를 이용해 요소를 쉽게 감춘다.

function toggle_sign_up() {  
    $("#sign-up-box").toggleClass("is-hidden")
}

정규표현식 체크

---

페이지 이동 정리

location.replace("이동할 주소");   
// 이전페이지 히스토리가 남지 않음.

location.href("이동할 주소");      
// 이전페이지 히스토리가 남음 (많이사용함).

history.go(-1);                  
// 이전페이지 가기. () 안의 값이 현재페이지에 대한 상대좌표.

location.reload();               
// 현재페이지 새로고침

출처

파이썬에서는 return redirect(url_for("home")) url_for()

---

4-11
toISOString()
참고

보통 이런 형태로 많이 쓴다.

let currentDay = new Date().toISOString().substr( 0, 10 );
// currentDate == 'YYYY-MM-DD' 와 포맷으로 리턴

주의!
utc 시간대 기준으로 나옴
참고

4-12
숫자 셀 때

 count = db.likes.count_documents({"post_id": post_id_receive, "type": type_receive})

4-15
내 프로필일 때만 보이게 하기

status = (username == payload["id"])  # 내 프로필이면 True, 다른 사람 프로필 페이지면 False

위와 같이 서버에서 확인하는 값을 넘겨주고

{% if status %}
<section id="section-post" class="section" ...>
{% endif %}

jinja2를 이용해 참일 때만 보이게 해준다.