서버를 만들고 자바스크립트를 이용하여 만드는 웹페이지 !
파이썬 파일과 html 파일 이렇게 두 개를 왔다 갔다 하면서 하다 보니 쪼꼼 정신이 없었지만 또 새로운 것을 배웠던 4주차였다 ! 🥹
이번 4주차 숙제 ! 서버와 메인 페이지 파일을 왔다 갔다 하며 POST와 GET으로 나뉜 부분들을 잘 정리하는 것이 관건이다 🤨
GET 이란 ?
get은 클라이언트에서 서버로 어떠한 리소스로부터의 정보를
요청하기 위해 사용하는 메서드이다. 우리가 구글에서 검색 버튼을 누르는 것, 게시판의 게시물을 조회하는 것 등이 모두 get 요청이다.
POST 란 ?
post는 클라이언트에서 서버로 리소스를
생성하거나업데이트목적으로 데이터를 보낼 때 사용되는 메서드이다. 우리가 게시판에 게시글을 작성하면 게시판 글 목록에 내가 쓴 글이 추가되는 것 등이 post 요청이다.
일단 2주차 숙제에 이어서 만드니까 숙제 코드 꺼내주고 !
서버를 만드는 코드는 이렇다.
@app.route 로 시작하는 모든 부분들이 일종의 창구라고 생각하면 된다 ! 저 부분에 get요청, post 요청이 들어가며, 주로 실행할 함수가 포함된다.
port 를 5000번으로 해놨기 때문에, 서버 실행 후
localhost:5000이 주소로 들어가보자 
그럼 이렇게 웹페이지가 나오는데 오늘 할 것은 주문 정보를 입력한 후 주문하기 버튼을 누르면 밑 테이블에 주문 정보가 차례대로 붙는 작업이다.
💬 입력 받은 데이터 전달하기
📁 app.py - 먼저 '주문하기' 버튼을 누르면 정보가 테이블에 붙어야 하므로 post 요청으로 해야 한다.
📁 index.html - '주문하기' 버튼을 눌렀을 때 실행될 order() 함수이다. 똑같이 type은 "post" , url은 창구에 적혀 있는 "/order"로 하며, response가 성공적으로 되었을 때 정해진 메시지 창이 띄워지도록 했다.
그리고 페이지를 다시 읽는
window.location.reload();코드를 추가했다.
다시 📁 app.py !
웹페이지의 각 입력 칸들마다 입력되는 데이터를 받는 변수를 설정해주고, 이를 딕셔너리(doc)로 만들어서 데이터베이스의 orders 파일에 넣어주었다.
📁 index.html - 표시한 부분처럼 각 입력 칸마다 id를 먹여서 
input 타입을 통해 받은 값을 jquery 를 이용해 새로운 변수에 넣는다.
그리고 표시될 데이터에 위 변수들을 딕셔너리 형태로 넣어주기 !
여기까지 하면 입력 받은 데이터를 넘겨주는 것까진 완료다 !
데이터를 입력한 후 '주문하기' 버튼을 눌렀을 때 데이터가 잘 들어왔는지 데이터 베이스에 가서 확인해보는 것은 필수다 ✨
✏️ 버튼 누르면 테이블에 정보 붙이기
📁 index.html - 이제 받은 주문 정보를 웹페이지 하단에 붙여볼 것이다 ! 페이지가 로딩 되자마자 정보가 리스팅되어야 하므로 listing() 함수를 선언하겠다.
✋🏻 코드 설명 !
orders = list(db.orders.find({}, {'_id' : False}))- 데이터베이스의 orders 파일에서 id 값은 제외하고 출력({'_id' : False})하며, 조건 없이({ }) 모든 값을 가져와 list해서 변수 orders에 넣는다.
📁 index.html
✋🏻 코드 설명 !
1. type은 get으로, url은 주문 목록 보기 창구의 주소인 '/order'로 한다. data는 넣지 않는다.
* response가 성공적으로 되었다면 ?
2. 📁 app.py 에서 list한 정보를 가져와 변수 orders에 넣어준다.
3. list된 정보들을 for문을 통해 변수에 하나하나 넣어준다.
4. 부트스트랩에서 가져온 table을 body에 붙여준다.
5. 기존 table 코드에는 데이터가 들어갈 수 있는 여러 줄이 존재하는데, 그 중 한 줄만 temp_html이라는 변수에 넣어준다.
6. jquery를 이용하여 ${변수명} 형태로 필요한 자리에 값들을 넣어주면 끝 !
7. 테이블 내 정보가 들어가는 자리에 id를 "orders-box"라고 했기 때문에, 이는 for문을 돌면서 temp_html을 한 줄씩 붙이라는 코드이다.
$('#orders-box').append(temp_html)8. 찐막으로 기존 table에 있던 정보들을 삭제해주면, 내가 저장한 정보부터 출력되는 화면을 볼 수 있다 ! !
Jquery란 ?
자바스크립트(javascript)를 기반으로 만들어진 라이브러리 !
👩🏻💻 일단 서버를 다룬다는 점이 굉장히 어려웠다. 너무 겁을 먹어서 그런가 ,, 낯설지만 차근 차근 익숙해져야지 ! 이와 더불어 jquery와도 친해지고 싶다 화이팅 ^_^ 이제 한 주차 남았다 !
