내일배움캠프 3일차 TIL : 미니프로젝트 중간점검, Ajax, flask

 

@ 학습한 내용

1. 미니프로젝트에서 백엔드를 다루면서, Jquery와 Ajax, 파이썬 flask 사용에 대해서 좀 더 익숙해짐. 

1) jquery

- val() 메소드는 값을 선택한 요소의 값을 가져오거나 변경한다.

function posting() {
    let guestID = $('#guestID').val()
    let crewID = $('#crewID').val()
    let comment = $('#comment').val()
        //'#guestID'는 선택자
        //jQuery에서 .val() 메소드는, 선택한 요소의 텍스트 값을 얻거나 설정하는 메소드
        // 'html에서 지정한 id=guestID 의 값을 가져온다. 그 가져온 것을 guestID라고 하자'

 

2) Ajax(Asynchronous JavaScript and XML)   

- Ajax는 페이지의 갱신없이 서버와 비동기적 통신을 가능하게 한다.

- 웹 페이지 '전체'를 다시 로딩하지 않고도, 웹 페이지의 '일부분'만을 갱신할 수 있다.

- 즉, 백그라운드 영역에서 서버와 통신하여, 그 결과를 웹 페이지의 일부분에만 표시할 수 있다.

- Ajax 개발 기법을 통해 빠르게 동작하는 동적인 웹페이지를 만들 수 있다.

- (화면이 새로 로딩되는 것이 아니기에 속도가 향상)

 

- 이때 서버와는 다음과 같은 여러 형태의 데이터를 주고 받을 수 있다.(HTML/ JSON  / XML / 텍스트 파일... 등)

 

//동기와 비동기 방식차이 : 동기식은 요청 후 '응답을 받아야' 다음 동작이 이루어지고, 비동기식은 요청 보낸 후 응답과 상관없이 동작함.
//이러한 이유로, http 전송 중에도 클라이언트가 웹 어플리케이션과 상호작용할 수 있다.
$.ajax({        //(페이지 갱신없이)비동기식 Ajax를 이용하여 데이터를 HTTP 요청을 전송한 후, 서버측 응답 받을 때 사용한다
    type: 'POST',    //HTTP 요청방식(GET,POST). 서버에 데이터를 HTTP POST 방식으로 전송한 후, 서버측 응답 받을 때 사용
    url: '/guestbook',  //클라이언트의 요청이 전송될 url 주소
    data: {guestID_give: guestID, crewID_give: crewID, comment_give: comment}, //HTTP 요청과 함께 서버로 보낼 데이터
    success: function (response) {  //요청(통신)이 성공일 때 실행되는 callback 함수
        alert(response['msg'])
        window.location.reload()
    }
});

(참고 : http://www.tcpschool.com/ajax/ajax_jquery_ajax

참고2: https://jvvp.tistory.com/1091 

참고3: https://sjparkk-dev1og.tistory.com/27  )

 

 

 

3) 파이썬 Flask   

# 맨 앞에 @가 붙은 것은 장식자(decorator)를 나타냄
# flask에서는 이러한 장식자가 URL 연결에 활용된다.
# 장식자를 사용하면 다음 행의 함수부터 장식자가 적용된다.
# URL '/'은 다음 행에 정의되어 있는 home함수와 연결된다.
# route 장식자는 플라스크 서버로 '/'URL 요청이 들어왔을 떄 어떤 함수로 호출할 것인지를 조정한다.
# route 장식자는 장식된 함수에서 결과를 반환할 때까지 기다리다가, 결과가 반환되면 그 결과를 대기 중인 웹브라우저로 반환한다.

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

# @app.route('/')는 http://localhost:5000/ 를 가리킨다. flask에서는 기본적으로 5000번 포트를 사용하기 때문.
# 만약 @app.route('/hello') 라면 http://localhost:5000/hello를 가리킨다.
# 그리고 @app.route 데코레이터 밑에는 반드시 데코레이터가 가르키는 주소에 접근했을 때, 반환해줄 함수가 정의되어 있다.

 

 

(참고1 :  https://blog.naver.com/21ahn/221830372908     참고2 : https://prodiary.tistory.com/45)