K-digital 기초역량훈련
[패스트 캠퍼스] 코딩 1:8 | 웹 개발 왕초보 입문 (4주차)
1️⃣ Flask (플라스크)
파이썬으로 작성된 마이크로 웹 프레임워크
https://flask-docs-kr.readthedocs.io/ko/latest/index.html
1-1. 터미널에서 flask 플라스크 설치하기
: pip install flask (windows)
: pip3 install flask (macOS)
1-2. flask 플라스크 실행 종료 명령어
: ctrl + c (windows)
: ctrl + alt + m (macOS)
* 맥의 경우 cmd + c / ctrl + c 했을 때 플라스크 종료가 안돼서
구글링 해본 결과 아래 블로그를 보고 오류 해결 완료 (감사합니다...)
https://jsdevlog.tistory.com/entry/VSCode-code-is-already-running-%EC%98%A4%EB%A5%98
1-3. 플라스크 시작하기 (search on google 'flask app run')
https://flask-docs-kr.readthedocs.io/ko/latest/quickstart.html
구글에 'flask app run' 검색 혹은 위 기재된 링크를 통해 기본 어플리케이션 코드를 가져와 실행
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello_world():
return 'Hello World!'
if __name__ == '__main__':
app.run()
http://127.0.0.1:5000/
그리고 Running on ~ 이라고 뜨는 해당 주소로 접속하면 'Hello World!' 가 출력된다
1-4. 다른 내용 출력해보기
from flask import Flask
app = Flask(__name__)
@app.route('/')
def hello_world():
return 'Hello World!'
# 추가된 코드 부분
@app.route('/dev')
def developer():
return 'Hello Programming!'
if __name__ == '__main__':
app.run()
http://127.0.0.1:5000/dev
developer() 라는 새로운 함수에 문자열 'Hello Programming!' 가 출력되도록 코드를 추가하고
기존 주소에 /dev 이 추가된 주소로 접속하면 'Hello Programming!' 문자열이 출력된다
1-5. 플라스크에서 html 반환하기 (html 렌더링)
[templates] 폴더 생성 > '~.html' 파일 생성
'templates' 폴더는 flask에서 정의해놓은 이름이기 때문에 폴더 생성 시 오타에 주의해야 함
<!DOCTYPE html>
<html lang="ko">
<head>
</head>
<body>
<h1>제목입니다</h1>
</body>
</html>
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def hello_world():
return render_template('hello_world.html')
if __name__ == '__main__':
app.run()
from ~ import 코드 뒤에 ', render_template' 함수 추가
(render_template 함수 : flask에서 제공하는 함수이며 templates 내에 저장된 html 파일을 불러올 때 사용)
return 문 뒤에 render_template('파일명.html') 통해 불러온 뒤 flask 재실행 후
브라우저를 새고로침 해보면 'hello_world.html' 내용이 웹 페이지에 출력된 것을 확인 가능
1-6. 플라스크에서 API 응답 만들기
from flask import Flask, render_template, jsonify
app = Flask(__name__)
@app.route('/')
def hello_world():
return render_template('hello_world.html')
@app.route('/fc')
def fastcampus():
res = []
for i in range(10):
res.append(
{"title": str(i) + " title"}
)
return jsonify(res)
if __name__ == '__main__':
app.run()
from ~ import 코드 뒤에 ', jsonity' 함수 추가
fastcampus() 함수 뒤에 비어 있는 리스트를 하나 만들어주고 (res = [ ])
반복문과 .append() 함수를 이용해 리스트 안에 딕셔너리 값을 추가 후 return 을 이용해 결과를 반환
(res 자료형은 파이썬에서 사용하는 자료형이기 때문에 웹 페이지 상에서 API형식으로 보이도록 jsonify()함수로 감싸서 반환)
출력값
[{"title":"0 title"},{"title":"1 title"},{"title":"2 title"},{"title":"3 title"},{"title":"4 title"},{"title":"5 title"},{"title":"6 title"},{"title":"7 title"},{"title":"8 title"},{"title":"9 title"}]
1-7. 파일 관리하기
FE 파일 관리 : html / css / js 파일을 각각 분리하여 연결하는 형태 (e.g. <link rel="stylesheet" ~> )
BE 파일 관리 :
[static] 폴더 생성 > '~.css' 파일 생성
'static 폴더는 templates와 마찬가지로 flask에서 정의해놓은 이름이기 때문에 폴더 생성 시 오타에 주의해야 함
(templates 폴더와 static 폴더가 같은 위치에 있도록. 상하관계X)
<!DOCTYPE html>
<html lang="ko">
<head>
<link rel="stylesheet" href="/static/style.css">
</head>
<body>
<h1 class="red">제목입니다</h1>
</body>
</html>
static 폴더를 만들면 flask가 자동으로 연결해주기 때문에 현재 경로(./~)가 아닌 / 부터 시작하는 경로를 입력
.red {
color: red;
}
from flask import Flask, render_template, jsonify
app = Flask(__name__)
@app.route('/')
def hello_world():
return render_template('hello_world.html')
if __name__ == '__main__':
app.run()
flask 재실행 후 브라우저를 새로고침 해보면 링크로 연결된 css 내용 'red' 가 적용된 것 확인 가능
2️⃣ 모바일 청첩장 만들기
2-4. 방명록 만들기
(1) 터미널에서 flask-pymongo 설치하기
$ pip install flask-pymongo (windows)
$ pip3 install flask-pymongo (macOS)
Successfully installed flask-pymongo-2.3.0 문구가 나오면 설치 완료
(2) 터미널에서 mongoDB 실행하기
brew services start mongodb-community
Successfully started `mongodb-community` 문구가 나오면 완료
(3) import pymongo 연결, request & redirect 연결
import datetime
from flask_pymongo import PyMongo
from flask import Flask, render_template, request, redirect
app = Flask(__name__)
app.config['MONGO_URI'] = 'mongodb://localhost:27017/local'
mongo = PyMongo(app)
@app.route('/guest', methods=["POST"])
def guest():
name = request.form.get('name')
content = request.form.get('content')
mongo.db['wedding'].insert_one({
"name": name,
"content": content
})
return redirect('/')
@app.route('/')
def index():
now = datetime.datetime.now()
wedding = datetime.datetime(2023, 4, 22)
diff = (wedding - now).days
return render_template('index.html', diff=diff)
if __name__ == '__main__':
app.run()
pagenation 만들기
.limit() 함수
query string
(+) Flask port 5000 오류 해결
Address already in use
Port 5000 is in use by another program. Either identify and stop that program, or start the server with a different port. On macOS, try disabling the 'AirPlay Receiver' service from System Preferences -> Sharing.
맥에서 port 5000 오류가 자주 생긴다고 한다. 모바일 청첩장 만들기 전까지는 해당 오류가 없었는데 오늘 갑자기 오류를 만나면서 당황한 나머지 저 영문을 다 읽어보려고 하지도 않고 냅다 구글에 검색만 수두룩ㅋㅋ 해결하고 다시보니 문구에서 이미 해결법을 알려주고 있었음. 앞으로 영어를 두려워하지 말고 끝까지... 읽던가 파파고를 돌리던가 해야겠다. 개발을 하려면 영어울렁증을 극복해야만 하다는 것을...
아무튼,
macOS > System Preferences (시스템 환경설정) > sharing (공유)> AirPlay Receiver 해제하면 오류 해결!
나같은 경우는 이미 모든 설정이 해제된 상태였는데도 불구하고 오류가 났는데, 화면 공유 체크했다가 다시 풀었더니 해결됐다. 이게뭔...
이렇게 해도 안 되는 경우에는 터미널을 열어서 아래 명령어로 port 5000을 사용 중인 시스템을 확인 후,
lsof -n -i TCP:5000
COMMAND PID
Python 12345(예시)
kill 명령어를 사용해 해당 프로그램을 종료해주면 오류 해결 완료
kill -9 PID
(e.g. kill -9 12345)
(+) python datetime 오류
모바일 청첩장 만들다가 결혼식 디데이 카운트 부분을 만드는데 Internal Server Error (500) 가 발생했다.
이번에도 구글의 힘으로 해결했는데 운좋게 첫 페이지에 있는 글에서 바로 해결법을 찾았다.
이유는 datetime 쓰기 전 import 가 제대로 안 되어 있었기 때문인데,
강의에서는 datetime 사용 전 import 연결을 짚어주지 않았고 바로 사용해도 오류 없이 출력됐었다. (윈도우만 그런건가?)
macOS 유저인 나는 일단 파이썬 파일 상단에 import datetime 한 줄 추가해주고 재실행 했더니 해결 완료.
import datetime 연결하는 순간 하단 def index() 함수 내부에 있던 datetime 코드들도 활성화 되면서 색상이 바뀌었다. 굳!
from flask import Flask, render_template
import datetime # 추가한 부분
app = Flask(__name__)
@app.route('/')
def index():
now = datetime.datetime.now()
wedding = datetime.datetime(2023, 4, 22)
diff = (wedding - now).days
return render_template('index.html', diff=diff)
if __name__ == '__main__':
app.run()
thank you for References🙏
https://velog.io/@honey_bee/error-Address-already-in-use-Port-5000-is-in-use-by-another-program
https://stackoverflow.com/questions/19934248/nameerror-name-datetime-is-not-defined
https://algoroot.tistory.com/44
👩🏻💻 4주차 학습 후기
모바일 청접장 만들기 너무 재밌다! 슬라이드 앨범 부분에서 조금 버벅이긴 했는데 구글링해서 어찌저찌 타임셋도 맞춰두었고 혼주 소개 부분도 정렬이 마음에 안 들어서.. 따로 만들어보았더니 내 맘에 들게 바뀌었다. 기본 코드에서 벗어나서 뭔가를 한다는게, 오류나면 어쩌지 틀리면 어쩌지 이런 불안감은 있지만 하고나서 성공한다면 그만한 뿌듯함도 없는 것 같다.코드가 길어지고 더러워졌을지언정시도를 해보았고 화면에 구현해냈다는 걸 혼자 만끽하는 그 순간이 정말 뿌듯! 모바일 청첩장 부분 강의가 조금 길어서... 당당마켓을 다 까먹어버렸는데 그래서 1주차부터 당당마켓 부분만 한번 더 복습해야겠다. 그리고 모바일청첩장은 따라하느라 블로그에 정보적는걸 못했는데 시간이 좀 남는다면 모청 부분도 다시 한번 돌려보고 나중에 블로그만 봐도 이해될 수 있게 핵심을 요약해보아야겠다. 복습의 중요성도 넘넘.. 느끼는 중.. 벅찬 순간도 있었지만 (오류를 만났는데 강의와 질문에서도 해결이 안된다던지) 그래도 모든걸 상쇄하는 즐거운 부분도 있다! 학습일지 열심히 써서 강의 수강권 받는다면 뭘 들을지 김칫국 고민중 +.+ 5주차도 힘내서 해보자고
'K-Digital Training > 패스트캠퍼스 1:8 코딩 입문' 카테고리의 다른 글
[패스트 캠퍼스] 코딩 왕초보 웹 개발 강의 : 5주차 학습일지 (0) | 2023.03.03 |
---|---|
[패스트 캠퍼스] 코딩 왕초보 웹 개발 강의 : 3주차 학습일지 (0) | 2023.02.21 |
[패스트 캠퍼스] 코딩 왕초보 웹 개발 강의 : 2주차 학습일지 (0) | 2023.02.13 |
[패스트 캠퍼스] 코딩 왕초보 웹 개발 강의 : 1주차 학습일지 (0) | 2023.02.08 |