1. Flask 시작하기 - 서버만들기 (1)
🔥 sparta → projects → prac 폴더에서 시작!
- 1) 폴더 생성과 가상환경 설치
- 1) 폴더와 파일 생성
👀 prac 폴더 구조- - - prac |— venv |— [app.py](http://app.py) (서버) |— templates |— index.html (클라이언트 파일)
- 1) 폴더와 파일 생성
😎 Flask는 만들 프로젝트의 폴더 구조가 정해져 있어요! 규칙을 지켜주세요!
- 폴더 안에
app.py파일을 생성합니다! - 폴더 안에
templates폴더를 생성합니다! - templates 폴더 안에
index.html파일을 생성합니다!
🤔 아무 이름이나 쓰면 안되나요? → 몇 가지 규칙이 있습니다!
templates폴더는 반드시 고정해야 합니다! Flask의 규칙이에요!app.py는 변경해도 좋습니다만, 라이브러리 이름과 같은 것을 이름으로 사용하면 안돼요!index.html은 변경해도 좋습니다만, 첫 페이지는 일반적으로 index.html을 사용해요!
🔥 준비가 끝났다면 화면 상단 File > Open Folder로 prac 폴더로 이동합니다!
2. 가상환경 venv
😎 우리는 웹을 만들기 위해 사용할 편리한 도구모음, 라이브러리를 사용할 거에요!
-
라이브러리를 담아둘 공구함, 가상환경 기억나시죠?
-
우리가 원하는 라이브러리만 설치해서 관리할 수 있도록 폴더에 하나씩 설치해줄거에요!
1) venv 생성하기
-
화면 상단
Terminal > New Terminal을 클릭! -
📌 터미널에 bash가 아닌 것이 뜬다면?
-
터미널에서 오른쪽의 십자버튼(➕) 옆의 더보기버튼(🔽)을 클릭해주세요!
> 화면 위쪽에 목록이 뜨게되면 bash를 골라주시고 엔터를 눌러주세요!
>
>
> 
>
- `python(맥은 python3) -m venv venv` 를 입력한 뒤 엔터!
> 그러면 venv 폴더가 projects 폴더 내부에 생성되었습니다!
>
>
> 
>
- 4) venv 활성화하기
<aside>
😎 가상환경을 만든 것이 끝이 아닙니다! 활성화 시켜줘야 라이브러리를 컴퓨터가 읽어줘요!
</aside>
[화면 기록 2022-11-28 오후 5.36.12.mov](https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e0a24d99-576b-4666-85f1-f8ee5fa2cd81/%E1%84%92%E1%85%AA%E1%84%86%E1%85%A7%E1%86%AB_%E1%84%80%E1%85%B5%E1%84%85%E1%85%A9%E1%86%A8_2022-11-28_%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE_5.36.12.mov)
- [`app.py`](http://app.py) 파일을 클릭해주세요!
- **VS Code 오른쪽 아래**의 `파이썬 버전`(예: 3.9.6)을 클릭한 뒤, 화면 위쪽에서 **venv가 쓰여있는 파이썬 버전을 클릭해주세요!**
- 터미널에서 오른쪽의 십자버튼(➕)을 클릭해주세요!
> 터미널에서 `(venv)` 라고 뜨게 된다면 가상환경이 활성화 된거에요!
>
>
> 
>
03. Flaks 시작하기 - 서버만들기 (2)
- 2) Flask 패키지 설치하기 😎 가상환경에 Flask 라이브러리를 설치 해 봅시다! - 화면 상단 `Terminal > New Terminal` 을 클릭! (열려 있다면 그대로 진행해줍니다) - 터미널에 `pip install flask` 라고 입력해주고 엔터를 눌러주면! - 해커가 된 것 처럼 코드가 자동으로 막 내려와요! 설치 과정이니까 걱정마세요! > 터미널 아래 부분의 `Successfully installed …` 라고 적혀 있다면 설치 완료! > > >  >
- 3) Flask 기초 : 기본 실행
-
Flask 프레임워크: 서버를 구동시켜주는 편한 코드 모음.
-
웹 서버를 구동하는데 필요한 복잡한 코드들을 쉽게 가져다 쓸 수 있습니다.
👀 프레임워크를 쓰지 않으면 태양초를 빻아서 고추장을 만드는 격! 프레임워크는 3분 요리/소스 세트라고 생각하면 되겠습니다! -
app.py 파일에 아래 코드를 붙여넣어봅니다.
- [코드스니펫] 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)
- [코드스니펫] flask 시작 코드
-
화면 상단
Terminal > New Terminal을 클릭! -
(venv)가 보인다면 가상환경 활성화 상태!
-
터미널에서 python(맥은 python3) app.py 라고 적고 엔터를 눌러보세요!
터미널에서 아래 처럼 보이면 잘 작동한거에요!
-
👀 맥 환경에서 실행이 안된다면?
-
네트워크 5000번 주소(포트)가 이미 사용 중이라고 하네요!app.py 파일로 들어와서 마지막 줄에 port=5000을 5001로 바꿔보세요!
다시 실행! 짠!
-
-
터미널에 나오는 http://localhost:5000 링크 부분에 마우스를 대로
😎 화면에 `This is Home!` 이라는 메시지가 보이시나요? 그렇다면 성공한 것! 👏Ctrl(맥은 Command) 클릭! -
종료하는 방법
👀 터미널 창을 클릭하시고, ctrl + c 을 누르시면 서버를 종료할 수 있습니다.
-
- 4) Flask 기초 : URL 나눠보기 😎 `@app.route('/')` 부분을 수정해서 URL을 나눌 수 있습니다! 간단하죠? - 주의할점! - url 별로 함수명이 같거나, - `route('/')`내의 주소가 같으면 안됩니다! ```python from flask import Flask app = Flask(__name__) @app.route('/') def home(): return 'This is Home!' @app.route('/mypage') def mypage(): return 'This is My Page!' if __name__ == '__main__': app.run('0.0.0.0',port=5000,debug=True) ```
04. Flask 시작하기 - HTML 파일 주기
- 1) Flask 기초 : Flask의 기본 폴더 구조 😎 Flask 서버를 만들 때, 항상, 프로젝트 폴더 안에, **ㄴtemplates 폴더** (html파일을 넣어둡니다) **ㄴapp.py 파일** 이렇게 두 개를 만들어두고 시작하세요. 이제 각 폴더의 역할을 알아봅시다! - 참고!! venv는 **실제로는 보이지만,** **안보인다~**라고 생각하세요! 기억하시죠?
- 2) Flask 기초: HTML 파일 불러오기 😎 **templates 폴더의 역할을 알아보겠습니다.** HTML 파일을 담아두고, 불러오는 역할을 하죠! 1. 간단한 index.html 파일을 templates 안에 만들기 - **[코드스니펫] index.html 예제코드** ```html Document 나는 버튼! ``` 2. html 파일 불러오기 😎 flask 내장함수 render_template를 이용합니다. 바로 이게 프레임워크의 위력! ```python from flask import Flask, render_template app = Flask(__name__) ## URL 별로 함수명이 같거나, ## route('/') 등의 주소가 같으면 안됩니다. @app.route('/') def home(): return render_template('index.html') if __name__ == '__main__': app.run('0.0.0.0', port=5000, debug=True) ```
05. Flask 시작하기 - 본격 API 만들기
1) 들어가기 전에 : GET, POST 요청 타입 리마인드
😎 은행 창구에서 은행원의 역할을 하는 서버! 만들어 봅시다!
- 은행의 창구가 API와 같다는 것을 기억하시나요?
- 같은 예금 창구에서도 개인 고객이냐 기업 고객이냐에 따라 처리하는 것이 다른 것처럼,
- **클라이언트가 요청 할 때에도, "방식"이 존재합니다.**
- HTTP 라는 통신 규약을 따른다는 거 잊지 않으셨죠? 클라이언트는 요청할 때 HTTP request method(요청 메소드)를 통해, 어떤 요청 종류인지 응답하는 서버 쪽에 정보를 알려주는 거에요.
- 여러 방식이 존재하지만, 가장 많이 쓰이는 `GET`, `POST` 방식에 대해서 다루겠습니다!1) GET 요청
- 통상적으로 데이터 조회(Read)를 요청할 때, 사용합니다!
예) 영화 목록 조회
→ 데이터 전달 : URL 뒤에 물음표를 붙여 key=value로 전달
2) POST 요청
- 통상적으로 데이터 생성(Create), 변경(Update), 삭제(Delete) 요청 할 때 사용합니다!
예) 회원가입, 회원탈퇴, 비밀번호 수정
→ 데이터 전달 : 바로 보이지 않는 HTML
2) GET, POST 요청에서 클라이언트의 데이터를 받는 방법
😎 고객이 명세서를 작성하면 은행원이 내용을 봐야겠죠?
- 예를 들어, 클라이언트에서 서버에
title_give란 키 값으로 데이터를 들고왔다고 생각합시다.(주민등록번호 라는 키 값으로 900120- .. 을 가져온 것과 같은 의미) print()코드를 사용해서 들어온 데이터를 터미널에 눈으로 볼 수 있게 찍어봅시다!
[코드스니펫] Jquery 임포트
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>[코드스니펫] GET 요청 API코드
@app.route('/test', methods=['GET'])
def test_get():
title_receive = request.args.get('title_give')
print(title_receive)
return jsonify({'result':'success', 'msg': '이 요청은 GET!'})[코드스니펫] GET 요청 확인 Fetch 코드
fetch("/test").then(res => res.json()).then(data => {
console.log(data)
})[코드스니펫] POST 요청 API코드
@app.route('/test', methods=['POST'])
def test_post():
title_receive = request.form['title_give']
print(title_receive)
return jsonify({'result':'success', 'msg': '이 요청은 POST!'})
[코드스니펫] POST 요청 확인 Fetch코드
let formData = new FormData();
formData.append("title_give", "블랙팬서");
fetch("/test", { method: "POST", body: formData }).then(res => res.json()).then(data => {
console.log(data)
})
Walk on the water!