TIL 15) 2022.05.06 (금) | 인스타 클론 코딩 팀플 3 일차

오늘의 작업내용

• 피드 불러오기 기능 구현 (로그인 기능 제외)
• 이미지 미포함

[app.py]

@app.route('/feed', methods=['GET']) # url /feed 페이지에 get방식으로 함수 호출
def getFeed():
  # 피드 조회하기
  posts = list(db.posts.find({}).sort("post_date", -1).limit(20))
  # 변수 posts에 db 테이블 중 posts라는 테이블에서 데이터들을 찾아와서 리스트로 만들어 담아라
  # 데이터들은 post_date를 내림차순으로(최신순) 정렬해라
  # 정렬된 데이터들을 앞에서부터 20개만 가지고 와라

  for post in posts:
  # posts라는 리스트에서 내용물이 없을 때까지 post를 하나씩 꺼내라

    # 데이터 타입을 바꿔줌
    post["_id"] = str(post["_id"]) # 꺼내지는 post에 "_id"의 value를 문자열로 바꿔라
    post["post_date"] = str(post["post_date"]) # 꺼내지는 post에 "post_date"의 value를 문자열로 바꿔라

  return jsonify({'posts': posts, 'result':'success'})
  # 딕셔너리 안에 든 key, value 값을 json형태로 데이터로 만들어서 리턴해준다

• @app.route(/) : 플라스크에서 지원하는 데코레이터(http://localhost:5000/ - 플라스크에서 기본적으로 5000포트 사용)
• @ 데코레이터(장식자) : 메인 함수를 고치지 않고 장식자를 붙여서 메인함수에 넣을 반복적이고 부가적인 내용을 더해주는 것
• jsonify : 괄호 안에 들어간 키값, value값을 json 형태로 같이 데이터로 넣는다

// ... 피드 불러오기
function getFeed() {
    $("#card_box").empty() // ... 피드를 붙여주기 전에 카드박스를 비워줌
    
    // ... jQuery를 이용한 ajax 사용
    $.ajax({	// ajax 선언
        type: "GET",	// (통신방식) GET 전송방식으로 서버에 전송[조회]
        url: "/feed",	// 서버로 보낼 url
        data: {},	// 서버로 보낼 데이터 정의
        success: function (response) {
        // 데이터 요청이 성공했을 때 실행되는 function(response)는 서버에서 보낸 리턴 값
        // 'response'에 서버에서 보낸 값이 담겨있음
            if (response["result"] == "success") {
            // (조건)response에 담아온 'result'라는 key값에 'success'라는 value가 있으면
                let posts = response["posts"]
                // 'posts'변수에 response 안에 있는 'posts' 키값의 value를 담아라
                for (let i = 0; i < posts.length; i++) {
                // (반복) 변수 'i'는 0임을 선언
                // 반복문이 한번 실행될때마다 'i'에 1씩 더하고 posts의 길이 만큼 반복되면 종료
                
                    let post = posts[i]	// 변수'post'에 리스트'posts' 안에 있는 i번째 리스트값을 넣어라 
                    let post_date = new Date(post["post_date"])
                    // 변수 'posts_date'에 리스트 'post' 안의 'post_date'라는 키값이 가진 value로 Date 객체를 만들어라
					
                    //`` 사이에 template을 넣어 정의
                    let html_temp_img = `<div class="card">
                                            <!--게시글 헤더-->
                                            <div class="card-body">
                                                <div class="card_header">
                                                    <div class="human"></div>
                                                    <div class="nickname">${post['user_id']}<br><span class="gray_s">${post['location']}</span></div>
                                                </div>
                                                <button class="dot-dot-dot btn-open-popup" onclick="popOpen()"></button>
                                            </div>
                                            <!--게시글 이미지-->
                                            <img src="../static/img/post_3.jpg" class="card-img-top post_img">
                                            <!--게시글 이미지 하단 아이콘-->
                                            <div class="post_icon">
                                                <div class="post_icon_left">
                                                    <div class="like"></div>
                                                    <div class="comment"></div>
                                                    <div class="direct"></div>
                                                </div>
                                                <div class="post_icon_right">
                                                    <div class="bookmark"></div>
                                                </div>
                                            </div>
                                            <!--댓글 본문-->
                                            <div class="box">
                                                    <p><span class="bold">좋아요 3개</span></p>
                                                    <div class="feed-information">
                                                        <span class="id">${post['user_id']} </span>
                                                        <span class="feed-content black">${post['desc']}</span>
                                                    </div>
                                                    <div class="click gray_r" id="comments">댓글 보기</div>
                                                    <br><div class="gray_s">${post['post_date']}</div>
                                                </div>
                                            <!--댓글 달기-->
                                            <ul class="list-group list-group-flush">
                                                <ul class="list-group list-group-flush">
                                                    <li class="list-group-item">
                                                        <div class="emoji"></div>
                                                        <input type="text" onkeyup="inputComment(this)" class="reply" placeholder="댓글 달기...">
                                                        <button type="button" disabled="false" onclick="postComment()" class="btn btn-outline-info btn-sm">게시</button>
                                                    </li>
                                                </ul>
                                            </ul>
                                        </div>`
                   
                    $("#card_box").append(html_temp_img)
                    // id가 card_box인 div에 html_temp_img라는 것을 추가해라
                }
            }
        }
    })
}

•  jQuery를 이용한 ajax사용
• HTML template : 반복적인 HTML부분을 template으로 만들어두고, 서버에서 온 data(주로 json)을 결합해서, 화면에 추가하는 작업 ( HTML template + JSON data ) // 백틱(``) 사이에 있는 부분이 반복적으로 붙여넣을 template

 

REFERANCE

• ajax : https://java119.tistory.com/4?category=809224