4주차에서는 백엔드 과정을 배웠다
즉, 서버 만들기를 배웠다
두근두근
다만 백엔드 과정이
꽤나 양이 많아 포스트를
4개로 나누어 포스팅하였다
마지막 포스트 2개는
실제로 미니 프로젝트를 만들어보았다!
기대하시라! 꺄
서버를 만들기 위해서는
라이브러리 = 프레임워크가 필요하다
우리는 백엔드 서버를 위해
Flask라는 프레임워크를 사용했다
Flask 프레임워크로 서버 만들기
1.원하는 폴더로 이동한다
2.app.py를 만든다
3.터미널을 켠다
4.가상환경을 잡는다
터미널에서 python3 -m venv venv치고 엔터
*venv는
프로젝트별로 라이브러리를 담아두는 통
5.Flask 설치하기
터미널에 pip install 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)
간단한 나의 웹페이지 만들기
from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
return 'This is my Home!'
@app.route('/mypage')
def mypage():
return 'This is mypage!'
if __name__ == '__main__':
app.run('0.0.0.0',port=5001,debug=True)
링크주소: http://localhost:5001/mypage
여기서 localhost:5001은 컴퓨터 주소/즉, 어떤 은행 어디 지점이면
mypage는 입출금 창구 이름이다
또한 저 주소는 나의 임시 주소이므로
배포를 한 웹사이트가 아니어서
링크를 들어가도 사이트를 보지 못한다
이번엔 버튼을 만들어보았다
from flask import Flask
app = Flask(__name__)
@app.route('/')
def home():
return 'This is my Home!'
@app.route('/mypage')
def mypage():
return '<button>버튼입니다</button>'
if __name__ == '__main__':
app.run('0.0.0.0',port=5001,debug=True)
html에서 만든 버튼과 같이 확인된다!
프론트엔드와 벡엔드를 연결하는 방법 알아보기
html 파일을 추가한다 (파일명: index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<title>Document</title>
<script>
function hey(){
alert('안녕!')
}
</script>
</head>
<body>
<h1>제목을 입력합니다</h1>
<button onclick="hey()">나는 버튼!</button>
</body>
</html>파이썬 파일에 index.html을 추가한다
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def home():
return 'This is my Home!'
@app.route('/mypage')
def mypage():
return render_template('index.html')
if __name__ == '__main__':
app.run('0.0.0.0',port=5001,debug=True)
나는 버튼!을 누르면 안녕!이라는 팝업이 뜬다
프론트와 백의 차이를 쉽게 말하자면
프론트엔드에서 벡앤드로 데이터를 전송하고
백엔드에서는 데이터를 내려받아서
프론트엔드로 보낸다고 생각하면 된다
두 방이 있고
A방에서 접수를 하면
접수내용을 B방으로 건네주고
B방에서는 접수내용을 바탕으로
A방에게 필요한 내용을
전해주는 거라고 생가하면
쉬울 것 같다!
다음 포스트에서는
백엔드에 사용되는 코드를
직접 기록해 보았다!
많관부.
'웹개발 종합반' 카테고리의 다른 글
| 첫 번째 미니프로젝트 - 화성땅 공동구매 (0) | 2023.05.11 |
|---|---|
| 웹개발 종합반 4주차 (2) (0) | 2023.05.11 |
| 웹개발 종합반 3주차 (0) | 2023.05.10 |
| 웹개발 종합반 2주차 (0) | 2023.04.25 |
| 웹개발 종합반 1주차 (0) | 2023.04.24 |
