공부/집구석 코딩

웹 개발 4주차

JeongYeon 2022. 9. 15. 11:40

< 4주차 >

서버를 돌아가게 만드는 파일 이름을 app.py라고 많이 지음.

파일 → 설정 → Python 인터프리터 → flask 설치

프레임워크 라이브러리든 내가 편하려고 남이 만들어 놓은거 갖다 쓴느 것

프레임워크는 남이 짜둔 어떤 규칙이나 틀 안에서 내가 코딩을 자유롭게 해서 편함

라이브러리는 내 마음대로 짜는데 남이 만들어 놓은 것을 중간에 자유롭게 갖다 써서 편함

 

Flask 시작 코드

from flask import Flask
app = Flask(__name__)

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

if __name__ == '__main__':  
   app.run('0.0.0.0',port=5000,debug=True)
 
 ☞ 내가 만든 서버에 5000번 문으로 접속하겠다.

 

프로젝트 폴더 안

- static 폴더(이미지, css파일을 넣어둠.)

- templates 폴더(html 파일을 넣어둠.)

- app.py 파일

GET 방식

- 통상적으로 데이터 조회(Read)를 요청할 때 ex. 영화목록 조회

- 데이터 전달: URL 뒤에 물음표 붙여 key=value로 전달 ex. google.com?q=북극곰

POST 방식

- 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 ex. 회원 가입 · 탈퇴, 비밀번호 수정

- 데이터 전달: 바로 보이지 않는 HTML body에 key:value형태로 전달

frontend는 HTML 쪽

backend는 플라스크서버쪽

 

 url: "/test?title_give=봄날은간다",

 /test 라는 창구에 가는데 title_give 라는 이름으로 봄날은간다라는 데이터를 갖고 갈게~~

왼쪽에 다 붙어 버리면

ctrl + a 눌러 전체 선택 후 ctrl + k + f 눌러주면 자동 정렬. (ctrl + f는 '찾기')

이라는데 왜 난 안돼죠? ☞ ctrl + alt + l 누르니 자동정렬되는데..? 

 

연습 ①

우리가 구현해야 하는 것은

  1. 주문 하는 것 (주문하기 버튼을 클릭)
  2. 주문한 걸 보여주는 것 

POST(포스팅하기) 연습

① API 만들고 사용하기 (이름, 주소, 평수 저장하기_ Creat → POST)

요청정보 : URL = /mars, 요청 방식 = POST

클라이언트(ajax) → 서버(flask) : name, adress, size

서버(flask) → 클라이언트(ajax) : 메세지를 보냄(주문완료!)

☞ 클라이언트와 서버 연결 확인 ☞ 서버부터 만들기 ☞ 클라이언트 만들기 ☞ 완성 확인하기

새로 고침

window.location.reload()

GET(보여주기) 연습

① API 만들고 사용하기 - 저장된 주문을 화면에 보여주기 (Read → GET)

요청정보 : URL = /mars, 요청 방식 = GET

클라(ajax) → 서버(flask) : (없음)

서버(flask) → 클라(ajax) : 전체 주문을 보내주기 

☞ 클라이언트와 서버 연결 확인 ☞ 서버부터 만들기 ☞ 클라이언트 만들기 ☞ 완성 확인하기

붙여주는 건 temp_html

 
let temp_html = ``
let temp_html = `<tr>
                    <td>${name}</td>
                    <td>${address}</td>
                    <td>${size}</td>
                 </tr>`
$('#order-box').append(temp_html)

 

 

연습 ②

  1. 기록하기(url, 별점, 코멘트 받아서 기록)  (url을 가지고 이미지, 제목, 디스크립션을 크롤링해서 같이 DB에 넣어주는 것)
  2. 보는 것 (카드 붙여주기)

크롤링 하려면 requests, bs4 라이브러리 설치

meta 태그

예. 구글 검색 시 표시될 설명문, 사이트 제목, 카톡 공유시 표시될 이미지 등

별 붙이기

let star_image = '⭐'.repeat(star)
728x90

'공부 > 집구석 코딩' 카테고리의 다른 글

웹 개발 5주차  (2) 2022.09.20
웹 개발 3주차  (0) 2022.09.10
웹 개발 2주차  (0) 2022.09.04
웹 개발 1주차  (0) 2022.07.15