🪴 성장일지

책 행복한 이기주의자(웨인 다이어)의 내용에 자극받아 시작하는 소박한 성장기록

살아있는 꽃과 죽은 꽃은 어떻게 구별하는가?<br/> 성장하고 있는 것이 살아 있는 것이다.<br/> 생명의 유일한 증거는 성장이다!

🌳 키워드 최대한 간단하게 정리, 추후에 보면서 스스로 설명

클라이언트 및 서버 간 통신(feat. JS, JQuery, Python, flask, Ajax)

예제 코드(라이브러리나 프레임 워크를 호출하는 코드는 생략)

• 코드 자체 단순한 예시 코드로 이 코드 자체에 집중하기보단 어떻게 클라이언트(프론트)와 서버(백)이 서로 통신하는지 감을 잡을 수 있게 하자!

$(document).ready(function () {
  $('body').html(''); // 화면 초기화(body 태그를 빈값으로)
  showPage(); // 특정 페이지를 보여주는 함수
});

function showPage() {
  $.ajax({
    type: 'GET',
    url: '/page',
    data: {},
    success: function (response) {
      let pages = JSON.parse(response['value']);
      for (let i = 0; i < pages.length; i++) {
        makePage(
          pages[i]['first'],
          pages[i]['second'],
          pages[i]['_id']['$oid'], // 몽고DB의 데이터 id값을 가져오기 위함(고유값)
        );
      }
    },
  });
}

// 이외에도 GET, POST 등을 이용하여 웹 서버와의 통신을 위한 기능 구현 가능

## 이 두 녀석들은 몽고DB의 _id 객체가 단순 문자열이 아닌 ObjectID라는 특별한 객체이기 때문에
## 따로 특별히 jsonify하기 위한 라이브러리
from bson.json_util import dumps
from bson.objectid import ObjectId

@app.route('/')
def home():
  return render_template('index.html')

@app.route('/page', methods=['GET'])
def read_pages():
    result = list(db.pages.find({}))
    return jsonify({'result':'success', 'pages': dumps(result)})

if __name__ == '__main__':
  app.run('0.0.0.0',port=5000,debug=True)
## 클라이언트단과 마찬가지로 서버단에서는 다양한 응답에 대한 다양한 데이터 전달 방법(API)를 짤 수 있다.

undefined