개발일지4

강의자료

• 로컬개발환경
  

• 클라우드환경
  

Flask 프레임워크: 서버를 구동시켜주는 편한 코드 모음. 서버를 구동하려면 필요한 복잡한 일들을 쉽게 가져다 쓸 수 있습니다.

• flask 서버를 돌리는 파일은 app.py라고 이름 짓습니다!

• html 파일 불러오기 : flask 내장함수 render_template를 이용합니다.

from flask import Flask, render_template

---

GET, POST 방식

• GET → 데이터 조회(Read) 요청할 때
  예) 영화 목록 조회
  → 데이터 전달할 때 :
  URL 뒤에 물음표를 붙여 key=value로 전달
  ) google.com?q=북극곰

• POST → 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청할 때
  예) 회원가입, 회원탈퇴, 비밀번호 수정
  → 데이터 전달할 때 :
  바로 보이지 않는 HTML body에 key:value 형태로 전달
  

---

• 화성땅 공동구매 - POST

1. 요청 정보 : URL= /mars, 요청 방식 = POST
2. 클라(ajax) → 서버(flask) : name, address, size
3. 서버(flask) → 클라(ajax) : 메시지를 보냄 (주문 완료!)

• 화성땅 공동구매 - GET

1. 요청 정보 : URL= /mars, 요청 방식 = GET
2. 클라(ajax) → 서버(flask) : (없음)
3. 서버(flask) → 클라(ajax) : 전체 주문을 보내주기

---

* META 태그란?
URL만 입력했는데, 자동으로 불러와지는 부분들 : 'meta'태그를 크롤링 함으로써 공통적으로 얻을 수 있다.

부분에 들어가는, 눈으로 보이는 것(body) 외에 사이트의 속성을 설명해주는 태그들입니다. 예) 구글 검색 시 표시 될 설명문, 사이트 제목, 카톡 공유 시 표시 될 이미지 등

• 스파르타피디아 - POST

1. 요청 정보 : URL= /movie, 요청 방식 = POST
2. 클라(ajax) → 서버(flask) : url, star, comment
3. 서버(flask) → 클라(ajax) : 메시지를 보냄 (포스팅 완료!)

• 스파르타피디아 - GET

1. 요청 정보 : URL= /movie, 요청 방식 = GET
2. 클라(ajax) → 서버(flask) : (없음)
3. 서버(flask) → 클라(ajax) : 전체 영화를 보내주기

메모

mongoDB / HTML CSS JS / 서버를 만든다!
-> 내 컴퓨터에서 만들고 내컴퓨터에서 테스트해본다 = 로컬개발환경

flask 프레임워크 : 서버를 만들수있는 프레임워크
(서버를 구동시켜주는 편한 코드 모음)

@app.route('/')
def home():
return 'This is Home!'

@app.route('/mypage')
def mypage():
return 'This is mypage!!!'

localhost:5000/mypage

---

<flask 기본 폴더구조>
[세팅 루틴: (프로젝트 폴더안에 항상 이렇게 세팅하고 시작)]

• 파일-새프로젝트 폴더 설정

• 폴더 내 경로(directory) 생성:
  . static(이미지, css 파일 넣어둠)
  . templates(html 파일 담아두고 불러오는 역할)
  

• 폴더 내 파이썬 파일 생성:
  . app.py
  

• templates 경로 내 index.html 생성

• 파일-설정-프로젝트-python-인터프리터-+-패키지 설치
  . flask
  . pymongo
  . dnspython

<서버에 html보내기>
render_template
return render_template('index.html') 하면
templates폴더 내의 html을 읽어서 서버에 보내준다

<localhost:5000 VS 파이참 우측상단 크롬 버튼?>
. localhost:서버가 보여주는 것
. 우측상단 크롬: 내 컴퓨터 파일 열어서 보는것과 같은 개념

---

< api >
get : 데이터 조회
. url뒤에 ?key=value
post : 데이터 생성 변경 삭제
. html body에 key:value

cf. 프론트엔드 html쪽, 백엔드 flask/서버쪽

---

<과제들>

[화성땅공동구매]

• dbprac파일 참고하여 작성
  cf) 새로고침: window.location.reload()

• 주문하기 / 정보 서버에 주기(post) / 버튼클릭 시 완료
  -> 버튼누르면 save_order function 실행되고
  -> name,address,size정보를 Jquery로 가져와서 실어보냄
  -> 미리약속한대로(창구에) -> app.py에서 약속한대로 받음(post)
  -> 창구에서 db에 저장하고 -> 주문완료라고 return 값 보내면
  -> 메시지가 받아서 alert 로 보여주고 -> window reload

• 주문 보여주기 / 로딩완료 시 자동조회(get)

[스파르타피디아-movie]

• 조각 기능 : 프로젝트 구현전 필요한 기능들을 먼저 구현

• 크롤링 연습 - meta 태그
  ex) 네이버 영화 : html head 부분에 og:image, og:title...

• 뼈대 준비하기 API 만들기(POST)
  . 무엇을 만들기 파악하기
  . 서버만들기(app.py)-클라이언트만들기(html)-확인하기

• mongo DB에 저장한 값 화면에 보여주기(GET)

[팬명록 완성 과제]
서버만들고 클라이언트 만드는 것 까지 잘 한 것 같은데,
데이터 입력 후 mongo DB에 저장 및 화면에 적재되는 게 계속 오류가 났다.

※ 오류코드:
name_receive = request.form['name_give']
File "상세 파일위치\바탕 화면\sparta\projects\homework\venv\lib\site-packages\werkzeug\datastructures.py", line 375, in getitem
raise exceptions.BadRequestKeyError(key)

werkzeug.exceptions.BadRequestKeyError: 400 Bad Request: The browser (or proxy) sent a request that this server could not understand.

KeyError: 'name_give'

--> 해결완료! (04/20)
POST 쪽에 name_give 정의를 안해줬었다..^^;

      function save_comment() {
        let name = $('#name').val()
        let comment = $('#comment').val()

        $.ajax({
            type: 'POST',
            url: '/homework',
            data: {name_give:name, comment_give: comment},
            success: function (response) {
                alert(response['msg'])
                window.location.reload()
            }
        })
    }