1.학습한 내용
지금까지 배웠던
html, css , js 등은 웹브라우저에 의해서 해석이 되고, 웹브라우저 앞에 있는 유저가 있을때.
웹 브라우저를 보는 유저 입장에서는 html, css, js 세가지 기술로만 볼수있다.
따라서 이를 Front End 프론트엔드 , 혹은 클라이언트입장에서 사용되는 기술이라 하여 Client Side Technology 클라이언트 사이드 테크놀로지 라고 부른다.
또한 현재 배우고있는 Python 그리고 배우지않은 php, java, modejs 등의 웹서버 안에서만 이루어지는 동작의 기술들은 Back End 백엔드, 혹은 서버에서 이루어지는 기술이라 하여 Server Side Technology 서버 사이드 테크놀로지 라고 한다.
1)Flask 시작
오늘은 지난번에 했던 pandas 와 비슷하게 Flask 를 visual studio code 에 다운로드 시키는것으로 시작하였다.
$ pip install Flask이 Flask 를 다운을 받고나면
from flask import Flask
app = Flask(__name__)
@app.route("/")
def hello_world():
return "<p>Hello, World!</p>"
app.run()
위의 코드양식을 사이트에서 가져와서 사용하는것으로 html을 사용하지 않고 웹서버를 만들어낼수 있었다.
이때
@app.route("/")
def hello_world():
return "<p>Hello, World!</p>"의 코드는 / 라는 입력값이 주어졌을때
hello_world 라는 값을 처리하는 코드이다.
2) Glitch.com 글리치
글리치 서버는 서버를 무료로 빌려주는 클라우드 서비스를 하는 사이트이다.
이곳에서 오른쪽 돋보기 에서 Flask 를 검색하게되면
이러한 플라스크가 나오고 이것을 클릭하여 나온 화면에서 오른쪽아래 Remix your own 버튼을 클릭하게 되면.
플라스크 형식이 복사가 되어서 개인이 이용할수있게된다.
이 곳에서 start.sh 파일을 확인해보면
python server.py
server.py 라는 파이썬 프로그램을 실행한다고 되어있는데.
해당서버에서 서비스하는 파이썬은 python3 가 아닌 python 2.7 버전이기때문에
python3 server.py
로 변경한다.
또한 해당 사이트의 하단을 보면
왼쪽부터 현재 코드의 상태.
실행코드의 로그 ( 오류가 생겼을때 확인하기 용이)
터미널
툴즈
프리뷰
기능을 가지고있다.
3)Flask 사용
1) 과 같은 Flask 코드 양식을 가져온 뒤 코드를 짜기 시작한다.
from flask import Flask
app = Flask(__name__)
app.run()기본 양식으로써 flask 를 활성화해서 불러낸 후.
<html>
<body>
<h1><a href="/">WEB</a></h1>
</body>
</html>
기본적인 html 형식을 짠 후 정리를 하면서 진행하게 되는데.
topics = [
{"id":1, "title":"html", "body":"html is ...."},
{"id":2, "title":"css", "body":"css is ...."},
{"id":3, "title":"js", "body":"js is ...."}
]우선 topics 라는 list를 주고 그것에 dictionary 를 사용하여 각각에 이름을 붙여준다.
이후 중복되는 코드가 너무 많기때문에
Flask 사이트의 Routing 기술을 이용하게 되는데.
def template():
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>
</body>
</html>
'''이러한 함수를 만들어 내면
topics 라는 dictionary 에서 topic 이라는 정보를 가져오는 것으로 liTags ='' 에 표시가 되도록 하는데.
이때 반복문을 이용하여서 id의 값에 따라서 title을 출력하고. topics 에서 topic을 꺼내온 liTags 에서의 id 값에 따라서 title 값과 body값이 다르게 입력이 된다.
따라서 이 코드를 사용을 하게되면
@app.route("/")
def index():
return template('<h2>Welcome</h2>Hello,WEB!')이와 같은 코드를 사용하면
이와 같은 화면이 나올것이고.
비슷하게 꼬아서
@app.route("/")
def index():
return template('<h2>Read</h2>Hello, READ!')와 같이 바꿀경우엔
화면의 굵은 Welcome 은 Read로
화면의 작은 Hello,WEB! 은 Hello,READ! 로
나올것이다.
이를 이제 본문에서 사용을 하게되면.
@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}')/read/<int:id>/ 를 작동시키면
id값이 지정된곳에 들어간것에 따라서
id번째의 id의 값을 기준으로
title 의 값은 topic 의 title값을,
body 의 값은 topic 의 body값이 대입이 되어서
화면이 출력되게 만드는 코드가 작동을 한다.
이 후 이렇게 만든 route를 이용하였을때
id가 1인 html을 누르면
id가 2인 css를 누르면
id가 3인 js를 누르면
와 같은 화면이 나오는 코드가 작동한다.
이어서
create 를 눌렀을때 작동하는 route를 만들것인데.
위의 Flask 사이트의 routing 기술을 쓰면서 더 깊게 들어가서 설정을 하게 되면 위의 함수에서
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>
'''이러한 template(content) 함수를 만들어내게 되면
@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)create 가 작동을 했을때.
placeholder가 title인 이름이 title이라는 text가 나오고.
그 아래에 placeholder가 body인 이름이 body인 textarea 가 생성이 된다.
그리고 create라는 submit을 누를수있다.
라는 결과값이 출력된다.
2.학습내용 중 어려웠던 점
수업을 진행하던 도중 오류가 나게되어서 이전에 하였던 해결방식인 비교를 하면서 수정하는 방식을 사용하였는데도 작동이 되지 않는 문제가 발생하였다.
3.해결방법
그래서 수업을 진행하던 도중 질문을 하는 시간에 확인이 된것으로, 그전의 다른 기술들과 다르게 python의 경우 들여쓰기의 여부가 매우 중요하기때문에 이로 인해서 작동을 하지 않는것을 알수있게되었다.
4.학습소감
기존의 js 와 python 을 비교해가면서 배우는 수업과 다르게 오늘은 새로운 것을 배우게 되었는데, 생소한점과 익숙하지 않은점으로 인한 오류가 많았으며, 배울수록 복잡하다는 느낌이 들었다.
특히 오늘 문제가 되었던 들여쓰기의 경우에는 나름대로 따라서 쓴다고 쓰던 코드들이 시프트 엔터인지 컨트롤 엔터인지 익숙하지 않은 방식으로 인해서 들여쓰기가 제대로 되지않았고, 이를 스페이스바로 모양만 따라하려고 하다가 오류가 많이 난것으로 인해서, 이것은 자주 사용해보고 익숙해지는것이 중요하다고 느끼게 되었다.
