어제+그제 한 내용 오늘 정리하기. 또 안하면 까먹으니까, 정리는 늘 필수이다.
주제 : 서버 만들기 (응답 만들기)
4주차에서는 모바일 청첩장을 만들 것이다. (추가효과는 추가강의 참고)
이전에 만든 당당마켓도 에디터 + 수정할 것이다.
01. 백엔드 프로그램 만들기
만약 python으로 백엔드 프로그램을 만든다면 필요한 것은 무엇일까?
1) python 코드를 작성하여
A주소로 들어오면 A 페이지가 나오게, B가 들어오면 B가 나오게 해야 한다.
2) 또한 백엔드에서 DataBase에 접속(접근) 가능한데,
data를 가져온 다음, 그 Data를 우리가 알고있는 Html코드로 반영해서 보여줘야한다.
(이 중간 역할을 하는 것이 백엔드 프로그램이다.)
즉, 우리가 백엔드 프로그램을 구성하는데에 알아야하는 것도 사실은 많다
but 개발자들이 이미 좋은 코드를 만들어놓았다. (=Library)
이때 큰 라이브러리를 프레임워크(Framework)라 하고, 대표적으로 플라스크나 장고가 있다.
우리는 이 중 Flask를 선택하여 사용한다.
Flask가 무엇인가?
특징 : Micro
플라스크는 Micro-Framework라고 부르는 라이브러리이다.
이는 웹 개발에 필요한 것은 많은데, 정말 필요한 것만 가지고 있어서 Micro 이다.
웹 서버를 만드는 라이브러리는 다양하게 있지만,
Flask는 그 중 가장 가볍고 요소가 적어 마이크로 서비스를 만들 때 유용하다.
장단점
장점 : 가볍고 빠르게 쉽게 접근 가능하다.
단점 : 많은 기능, 더 큰 서비스를 만들기 위해서는 적합하지는 않을 수 있다. (불가능하지는 않음)
지원
1) 라우팅(Routing)
: 특정 주소로 접속했을 때, 주소마다 다른 컨텐츠를 보여주는 기능인 라우팅을 직관적으로 할 수 있게 도와줌
2) Html 렌더링
: HTML 코드 관리, HTML 코드를 통해서 백엔드와 연동 (DB에서 Data를 가지고 와서 이를 html 코드에 추가해서 렌더링 = html 코드를 만들어내는 것)에 유용함
02. 응답 실행하기
이번 시간에는 간단한 웹서버를 띄울 것이다.
1) VScode 접속하기
2) Flask 설치하기 : 터미널을 열고, pip install flask 로 설치
3) 파이썬 파일을 만든다
4) 튜토리얼로 가서, 코드를 복사붙여넣기
- google에 flask app run 검색, 빠르게 시작하기 클릭
from flask import Flask
app = Flask(__name__)
@app.route('/')def hello_world():return 'Hello World!'if __name__ == '__main__':app.run()
복사해서 코드로 돌어와서 붙여넣기
5) 실행을 해보니, 밑에 주소가 뜨고 프로그램은 여전히 실행중이다.
그 이유는 우리가 백엔드 프로그램을 만들고 실행할 때의 특징이다.
= 우리가 웹사이트 프로그램이라는 것을 만들 때, 계속해서 실행중인 프로그램을 만드는 것이기 때문이다.
6) 주소입력 http://127.0.0.1:5000/
7) 다시 코드로 돌아와서 이해하기
@app.route('/')
def hello_world():
return 'Hello World!'
.route 함수에 /(슬래시) 하나가 있으면 .route('/'),
밑의 hello_world 함수를 쓰겠다는 의미이고,
이때 hello_world 함수는 문자열 'Hello World!'를 반환한다(return)
8) 그렇다면 다른 결과값을 만들어보자
@app.route('/fc')
def fastcampus():
return 'FastCampus!'
아래의 fastcampus함수를 사용해서 FastCampus!를 반환한다.
9) 코드를 재작성한 뒤에는 ctrl c 를 눌러서 다시 실행해야한다.
: 파이썬 코드를 변경할 경우에는 실행중인 프로그램을 터미널에서 종료 후에 재실행해야 제대로 작동한다.
이처럼 쉽게 내가 원하는 주소를 추가하고 그 주소마다 다른 내용의 결과값을 반영할 수 있게 된다.
11) 조건문 코드 이해
이제 그 밑의 코드를 보면, 조건문이 있다.
if __name__ == '__main__':
app.run()
__name__ 변수가 __main__이면, 실행하라는 조건문이다. (둘이 똑같으면 실행)
= 이는 파이썬을 우리가 실행하는데, 이 파일을 직접 실행했는지 물어보는 것이다.
우리가 패키지를 가져와 그중에 flask를 가져와 실행한 것처럼, 우리가 작성한 코드도 from import로 사용될 수 있다.
즉 그런 경우를 대비하여 가져다 쓰는 경우가 아닌, 직접 실행 중일 때만 이를 실행하라는 의미가 된다.
즉, __name__이라는 값은 app.py와 같은 만든 파일이 실행되는 형태에 따라 이름이 바뀐다.
직접 내가 이 파일을 실행하면 __main__이라는 값이 나오고,
만약 from import로 가져다 쓰면 파일명이 나오게 된다.
이 변수(__name__)는 파이썬에서 내부적으로 만들어져 있는 값인데,
이 값에 따라 실행하거나 실행하지 않거나를 결정하고 싶을 때
if __name__ == '__main__':
이렇게 쓰게 된다.
그러나 우리 코드에서는 늘 직접 파일을 실행하므로, 사실상 무조건 실행되는 코드(웹사이트 출력)이다.
03. 파이썬과 html 만남의 순간 (화면)
: 웹사이트는 html 태그를 사용해서 화면에 보여지게 된다.
코드로 돌아와서 폴더를 만들자!
1) templates라는 폴더를 만든다.
flask의 경우에는 templates라는 폴더를 기본적으로 본인의 html 경로로 생각하므로,
그 경로 안에 맞춰 파일을 넣으면 된다.
TIP🤖 templates
: templates 폴더는 Flask에서 정의해놓은 이름이기 때문에, 오타가 없도록 생성해야 한다.
2) 만든 폴더 안에, html 파일을 생성한다.
hello_world.html
3) 기본 태그를 만들고, 그 안에 <h1>태그를 넣어서 제목을 만들자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>제목입니다!</h1>
</body>
</html>
4) app.py 파일로 가서 작성하기 (함수)
: Hello World 부분을 단순 text 반환이 아니라 html 태그 반환을 해볼 것이다.
이때 사용하는 함수가 있다. 첫번째 줄 맨뒤 Flask 뒤에 render_template 이라는 함수를 가지고 올 것이다.
5) return 뒤 문자열을 지우고 render_template 함수명 입력, 그 뒤에 우리가 만든 파일명을 입력한다.
@app.route('/')
def hello_world():
return render_template('hello_world.html')
이는 @app.route('/') 이 주소로 들어왔을 때, 이젠 text 값이 아닌 render_template ,
즉 우리가 만들어놓은 html 파일을 가져다 반환하라는 의미가 된다.
6) 브라우저로 가서 확인 http://127.0.0.1:5000/
별도의 html 코드를 작성하지 않아도, render_template 함수를 이용해
그 안에 있는 html 파일을 그대로 변환해서 화면에 출력해준다.
1,2주차에 배운 화면을 만드는 방법을 알기에, 만들어서 이를 template 폴더 안에 넣고
Flask 안에서 그 파일을 url주소와 잘 연결해서 반환하면 우리가 원하는 웹사이트를 만들 수 있다.
04. 응답만들기 : API
API를 만들 때 사용하는 방법으로 진행한다.
웹페이지 VS API 이들의 차이는?
: 웹페이지는 결과로 어떤 페이지를 주는 것이고
: API는 결과로 어떤 Data를 전달해준다.
우리는 fc주소에서 data를 반환하는 코드를 작성할 것이다.
1) 필요한 함수 : Flask 안에서, jsonify 함수 사용
from flask import Flask, render_template, jsonify
2) data를 많이 작성하기 위해 list 변수를 하나 만들어 가상의 data 만들어서 진행
2-1) res = []
빈 리스트를 만들어주기
2-2) for i in range(10) :
10개의 data를 만들어줄 것이기에 10 넣기
2-3) 리스트의 내장함수인 append 함수 사용 = 리스트 안에 append(추가)하는 함수
res.append ()
즉, 함수안에 어떤 값을 넣게 되면 그 값이 리스트에 들어간다.
2-4) 이 리스트안에 딕셔너리 값{} 넣어주기
이때 i 값을 활용하여 제목(title)을 만들어주고, str 함수를 이용해 문자열을 만들고
더하기 title이라는 값을 만들어보기
@app.route('/fc')
def fastcampus():
res = []
for i in range(10) :
res.append (
{"title" : str(i) + "title"}
)
= 키가 하나인(title이라는 data 하나인) 리스트 변수를 만들었다.
: 0 title ~ 9 title 까지 10개의 data가 들어있는 변수가 만들어진다.
3) 이제 이 변수를 반환하려는데, 그대로 반환하면 오류가 난다.
why?
웹사이트에 보여줄 수 있는 data 형식이어야 하는데, list는 파이썬에서 쓰는 자료형이므로 오류가 난다.
이를 해결하기위해, 앞의 jsonify라는 함수를 이용해서 가지고 와야 한다.
= 만든 변수가 어떤 것이던 (리스트던간에) jsonify라는 함수로 감싸서 반환하게 되면
우리가 아는 API처럼 동일하게 data를 반환한다.
4) 이제 ctrl + c 했다가 재실행 후, 브라우저로 가서 확인한다.
5) 리스트가 나와야하는데 단일값만 나오는 문제 발생
해결후에 다시해보기
: 띄어쓰기의 실수였다. 조건문 안에 return이 들어가서, 한 번만 반환되었던 것. 이 둘을 동일선상에 두면 된다.
: API에서 사용되는 jsonify 함수를 사용하여 응답 만들기!
화요일 스터디
1) 추가과제 : 파이참
추가 과제를 했을 때 mongo db와 vscode, 파이참을 컴페스와 연결했는데
vscode와 파이참이 둘다 켜져 있다면, 만약 브라우저에서 값을 동시에 수정한다면 오류가 나지 않는지도 궁금했다.
= (오류 안난다고 한다.)
그리고 파이참이 패키지 관리하기에 좋다고 보이는데 그 외의 장점은 별로 느껴지지 않았다.
vscode가 더 확장성이 있다고 들었고 익숙해지기도 했는데 파이참을 없이 vscode만 써서 관리해도 되는지?
: 가능하다. 그런데 자동으로 패키지 파일이 생성되거나 관리되는 것은 파이참이 더 좋기 때문에 코드를 더 깔끔하게 짜고 싶다면 파이참을 사용해보는 것도 좋다. 어차피 둘다 에디터이기 때문에 무엇을 쓰든 상관은 없다.
2) if/esle 와 try/catch
if/else는 에러를 잡을 수 없음 (분기처리) >> 서버가 죽음
try/catch 는 오류난 부분이 catch 쪽으로 보내주면서 오류를 잡음 >> 서버 안죽음
3) WEB과 WAS
웹서버 (정적 데이터처리)
WEB :: Nginx, Apache, Envoy
- 특정 url, ip의 접근을 차단가능
웹 어플리케이션 서버 (동적 데이터처리)
WAS :: Flask(Python), Spring(Java), Express(NodeJS)
- 역할 : 브릿지 (에 특화)
4) 플라스크의 의미?
브릿지이자 뽑아쓰는 것
값을 받아서 서버에도 연결이 되게 해주면서,
프레임워크로 이미 저장되어 있는 것들을 뽑아 쓸 수 있게한다.
5) env가 필요한 이유
: 개인정보 때문에, env에 내 로컬정보를 넣어놓고, db_init에서 정보는 공개하지 않은 상태로 가져오기가 가능하다.
즉 깃허브 등애서 협업을 할때, env를 제외하고 올린 후 env는 직접 갖다주는 것이다. (올리지 않고 갖다주기!)
6) 반응형 css의 핵심
@media
-미디어쿼리 기반.
만약 내가 부트스트랩이나 다른 사람의 코드를 갖다썼는데, 오류가 난다면 얼마나 억울한가
자기가 쓸 코드의 기반에 대해서 잘 알고 사용하는 것이 좋다 (가급적 자기가 만들어쓰면 더 좋지만, 그건 좀 어렵다)
어제 + 오늘의 소감 ✍️
우선은 질문할 것들을 쫙 모아갔는데, 다른 스터디원분들이 도와주셔서 빠르게 해결이 가능했다.
특히, return에 대해서 단순히 바깥으로 나가게 한다고 이해했는데
그보다는 반환하는, 흘려보내는 의미로 이해하는 게 더 와닿는 것 같다.
물론 직접 써보면서 아는게 best of best..
이제 다음 코딩 공부하러 가야한다.
이번주는 일정도 많고 공부도 많기 때문에 늘 화이팅이다.
'[부트캠프] IT 코딩 부트캠프 후기 > [Let's TIL😶🌫️] FastCampus' 카테고리의 다른 글
| [Let's TIL✍️] 코딩 18 : 4 Week _ 모바일 청첩장 (1) 뼈대 & 화면 응답 & 캘린더 (2) | 2022.08.31 |
|---|---|
| [Let's TIL✍️] 코딩 18 : 4 Week _ 서버 만들기 (2) 파일 관리 & Flask 설정하기 (0) | 2022.08.31 |
| [Let's TIL✍️] 코딩 18 : 3 Week_ 자율학습 (VScode & Pycharm) (0) | 2022.08.31 |
| [Let's TIL✍️] 코딩 18 : 3 Week _ 스터디 (0) | 2022.08.30 |
| [Let's TIL✍️] 코딩 18 : 3 Week _ 서버 만들기 (0) | 2022.08.26 |
