20201029 간단한 웹 복습

사용하는 기술들(Skills)

• HTML, Javascript, css
• flask, ajax, jquery

목표(Objects)

• 간단한 메모장 웹 완성하기
• 포스팅, 리스팅 api 구현

과정(Process)

• 프론트와 백 연결(connect back to front)

1. back side

@app.route('/memo', methods=['POST'])
def post_article():
  
  	return jsonify({'result': 'success', 'msg': 'POST 연결되었습니다!'})
    # 제이슨 형식으로 return 해준다. -> response로 가게됨

2. front side

function postArticle() {
                $.ajax({
                    type: "POST",
                    url: "/memo",
                    data: {},
                    success: function (response) { // 성공하면
                            // response의 키인 result의 값을 비교했을때 sucess이면 alert을 띄움
                        if (response["result"] == "success") {
                            alert(response["msg"]);
                        }
                    }
                })
            }

• back에서 만든 url과 메소드 형식에 맞춰 ajax으로 비동기 연결을 해준다.

• front에서 function이 실행되면, ajax를 통해 post요청을 flask에 보내고, 그에 대한 retrun으로 json데이터를 넘겨준다. json file에서 result 값을 체크해, 성공여부를 판단한다. 만일 성공적이라면 msg alert을 띄운다.

• Connect back to the front, using flask with ajax Asynchrony processing. Connect those by URL and Method(as POST, GET etc)

• Once function goes on, front sends POST request to flask sever. (It is connected by url and method) flask returns json file to front as response, at front we check if it is success or not buy value of 'result'. If it is sucessful alert client a message.

느낀점(review)

• 생각보다 어렵고, 생각보다 쉬운 웹. 제발 프로젝트 완성 시키고 싶어요 제발!
• 매일 놀러다니지만 매일 할일이 산더미로 쌓여간다.(복리로!) 내일 리뷰특강도 가는데, 내일 데이터 분석도 하는데, 내일 다이어그램 과제도 하는데, 내일 알고리즘 실강도 있는데... 하 정말...^_^ 좀 힘드네요