1. 학습내용
1) 웹 프레임워크의 개념
1-1)프론트 엔드(frontend, client side)
- css, html, JavaScript 를 다룬다.
- 웹 개발에서 프론트엔드는 사용자에게 시각적으로 보여지는 부분(UI)를 다룬다.
1-2)백엔드(Backend,server side)
- 백엔드 개발자는 서버 사이드 언어를 배워야 하며 서버와 데이터 통신을 하는 등의 역할을 할 수 있어야 한다.
- Python, Kotlin, Java, Node 등
- 백엔드는 사용자에게 드러나지 않는 DB공간, 서버를 구축하는 것을 의미 한다고 볼 수 있다.
<참고>
frontend와 backend를 같이 하는 사람을 full stack 엔지니어라고 부른다.
1-3) 웹 프레임워크
웹 프레임워크(Web framework,WF) 또는 웹 애플리케이션 프레임워크(Web application framework, WAF)는 동적인 웹 페이지나, 웹 애플리케이션, 웹 서비스 개발 보조용으로 만들어지는 애플리케이션 프레임워크의 일종이다. 웹 페이지를 개발하는 과정에서 겪는 어려움을 줄이는 것이 주 목적으로 통상 데이터베이스 연동, 템플릿 형태의 표준, 세션 관리, 코드 재사용 등의 기능을 포함하고 있다.
1-4) flask
flask는 웹페이지를 찍어내는 공장이다.
홈페이지: https://flask.palletsprojects.com/en/2.1.x/
Python에서 다운방법: visual code에서 terminal에 pip install flask
1-5) 만약 flask가 실행 되지 않을 경우
홈페이지: https://glitch.com/
- glitch에서 flask 검색
- view source
- 복제: Remix you own
- 2)라우팅
라우팅이란 우리가 사용하는 IP주소를 기반으로 데이터가 길을 찾게 하는 시스템이다.
즉, 경로를 '라우트'라고 부르고 경로를 정해 패킷을 전달해 주는 네트워크 장치를 '라우터'라고 부르며, '라우터'가 경로를 설정하여 패킷을 전달해 주는 행위를 '라우팅'이라고 부른다.
3) 템플릿
template()란?
html 등에서 문장이 반복되고 중복되는 것을 막기위해 함수 등을 사용했다면 flask tk상에서는 template화를 시키면 코드를 간편화 시킬 수 있다.
@app.route("/")
def index():
return template('aa.html') #View 함수,html template를 불러온다.예시)
from flask import Flask
app = Flask(__name__)
topics = [
{"id":1, "title":"html", "body":"html is ...."},
{"id":2, "title":"css", "body":"css is ...."},
{"id":3, "title":"js", "body":"js is ...."}
]
def template(content):
liTags = ''
for topic in topics:
liTags = liTags + f'<li><a href="/read/{topic["id"]}/">{topic["title"]}</a></li>'
return f'''
<html>
<body>
<h1><a href="/">WEB</a></h1>
<ol>
{liTags}
</ol>
{content}
<ul>
<li><a href="/create/">create</a></li>
</ul>
</body>
</html>
'''
@app.route("/")
def index():
return template('<h2>Welcome</h2>Hello, WEB!')
@app.route("/read/<int:id>/")
def read(id):
title = ''
body = ''
for topic in topics :
if topic['id'] == id:
title = topic['title']
body = topic['body']
break;
return template(f'<h2>{title}</h2>{body}')
@app.route('/create/')
def create():
content = '''
<form action="/create/">
<p><input type="text" name="title" placeholder="title"></p>
<p><textarea name="body" placeholder="body"></textarea></p>
<p><input type="submit" value="create"></p>
</form>
'''
return template(content)
@app.route('/update/')
def update():
return 'Update'
app.run()결과)
-
초기화면
-
create를 눌렀을때
4) 구글 연동
from flask import Flask
app = Flask(__name__)
topics = [
{"id":1, "title":"html", "body":"html is ...."},
{"id":2, "title":"css", "body":"css is ...."},
{"id":3, "title":"js", "body":"js is ...."}
]
def template(content):
liTags = ''
for topic in topics:
liTags = liTags + f'<li><a href="/read/{topic["id"]}/">{topic["title"]}</a></li>'
return f'''
<html>
<body>
<h1><a href="/">WEB</a></h1>
<ol>
{liTags}
</ol>
{content}
<ul>
<li><a href="/create/">create</a></li>
</ul>
</body>
</html>
'''
@app.route("/")
def index():
return template('<h2>Welcome</h2>Hello, WEB!')
@app.route("/read/<int:id>/")
def read(id):
title = ''
body = ''
for topic in topics :
if topic['id'] == id:
title = topic['title']
body = topic['body']
break;
return template(f'<h2>{title}</h2>{body}')
@app.route('/create/')
def create():
content = '''
<form action="https://www.google.com/search">
<p><input type="text" name="title" placeholder="title"></p>
<p><textarea placeholder="body"></textarea></p>
<p><input type="submit" value="create"></p>
</form>
'''
return template(content)
@app.route('/update/')
def update():
return 'Update'
app.run()결과)
2. 학습한 내용 중 어려웠던 점 또는 해결못한 것들
from flask import Flask
app = Flask(__name__)
topics = [
{"id":1, "title":"html", "body":"html is ...."},
{"id":2, "title":"css", "body":"css is ...."}
]
def template(content):
liTags = ''
for topic in topics:
liTags = liTags + f'<li><a href="/read/{topic["id"]}/">{topic["title"]}</a></li>'
return f'''
<html>
<body>
<h1><a href="/">WEB</a></h1>
<ol>
{liTags}
</ol>
{content}
</body>
</html>
'''
@app.route("/")
def index():
return template('<h2>Welcome</h2>Hello,Web!')
@app.route("/read/<int:id>/")
def read(id):
title = ''
body = ''
for topic in topics:
if topic['id'] == id:
title = topic['title']
body = topic['body']
break;
return template()
@app.route('/create/')
def create():
return 'Create'
@app.route('/update/')
def update():
return 'Update'
app.run()이 부분에서 라운팅을 적용하는 것과 라운팅에 대한 개념이 학습 내용 중 어려웠다.
3. 해결방법 작성
라우팅- 수업 동영상 참고
3-1) 먼저 code를 입력하고 glitch에서 preview를 통하여 window화면을 연다.
3-2) widow를 열었을때 아래의 주소가 되는 것을 볼 수 있다.
3-3)라우팅을 위해서는 /create/를 끝에 붙인다.
<참고>
@app.route('/create/')
def create():
return 'Create'
@app.route('/update/')
def update():
return 'Update'에서 route ('/##/')을 작성하였으므로 create 뿐 아니라 update도 가능하다.
3-4) 결과
4. 학습소감
지금까지 들었던 수업 중에서 가장 이해하기 힘들었던 수업이였던 만큼 복습이 매우 중요하다.라고 생각이 들었고 html, css, JavaScript, Python에 이어 flask를 하다보니 각각의 개념이 혼합된 기분이며 정리되지 않은 것 같다.
또한, 수업시간에 같이하면서 코딩을 하면 따라갈 수 있었지만, 막상 혼자서 해보면 과연 할 수 있을까? 라는 생각이 들었다.
