TIL 4일차 API, Query, Ajax

오늘은 미니프로젝트를 보다가 방명록을 서버로 보내는 게 어떻게 작동되는지 궁금해서 웹개발 2주차 API를 복습했다.

정확히 말하자면 Flask 서버에 Ajax 및 JQuery를 사용해서 파일을 업로드하는 법을 다시 익혔다.

 

1. JQuery

html의 요소들을 조작하는, 편리한 javascript를 미리 작성해둔 라이브러리

임포트: 미리 작성해둔 자바스크립트 코드를 가져오는 것

head 사이에 넣어주면 된다.

물론, 가리켜야 조작이 가능하므로 css는 class, jQuery는 id 값으로 특정 버튼/인풋박스/div 등을 가리킨다.

 

서버에서 클라이언트(우리의 경우 html)로는 JSON으로,

클라이언트에서 서버로 보낼때는 get 요청!

 

2. Ajax의 기본 골격

<script>
    $.ajax({
        type: "GET",
        url: "여기에URL을입력",
        data: {},
        success: function(response){
            console.log(response)
        }
    })
</script>

 

3. 내가 취약한 부분

가져온 값을 이용해 names-q1 에 붙일 태그 만들기

만들어둔 temp_html을 names-q1에 붙이기

let temp_html = `<div class="postcard">
                    <div class="card-body">
                        <blockquote class="blockquote mb-0">
                            <p>${comment}</p>
                            <footer class="blockquote-footer">${name}</footer>
                        </blockquote>
                    </div>
                </div>`

 

 

덧붙여, 파이참을 새로 실행할 때마다 인터프리터를 추가해줘야하는데 여간 귀찮은 게 아니다.

Flask, dnspython, pymongo 이 세 개를 매번 추가해주는 것이 번거로워서

로컬 저장소에 저장하려고 터미널에서 pip install ... 도 시도해보았지만 잘 안되었다. 이 부분은 차차 해결하는 것으로...

이렇게 한 다음 app.py 실행한 후 크롬창에 localhost: 5000 입력하면 웹페이지가 실제로 뜬다!!

 

그리고 마지막에는 내일 발표할 자료들을 만들었다. PPT와 영상 팀원분들 덕분에 아주 만족스러운 자료가 나왔다.

내일은 아침 일찍 웹개발 3주차에서 mongoDB 연결하는 것을 복습하고, 4주차도 복습할 예정이다.

그리고 팀원분들과 발표 준비 해야지 룰루