Cursor IDE 관련 설명 포스팅
2024.01.16 - [파이썬] - 파이썬으로 ChatGPT와 대화하는 모바일 앱 만들어보기 1 [Python, OpenAI, Kivy, Cursor IDE]
OpenAI를 이용한 코드에 대한 간략한 내용 참고 포스팅
2024.01.19 - [파이썬] - 파이썬으로 ChatGPT와 대화하는 모바일 앱 만들어보기 2 [Python, OpenAI, Kivy, Cursor IDE]
Kivy를 이용한 포스팅은 그냥 혼자 해보는 사이드 프로젝트인데, 어쩌다보니 Python과 Flask를 이용해 웹페이지를 구축해야 할 일이 생겨 해당 포스팅을 먼저 진행해보려고 한다.
터미널에 실행하는 명령어일 경우
> 명령어
로 작성함.
우선 프로젝트 구조는 아래와 같다.
Flask는 기본적으로 static이라는 상위폴더를 기준으로 하위에 있는 css, images, js를 불러오고 templates를 기준으로 html파일들을 불러온다. (보통 static폴더는 정적자원폴더로써 폰트나 로고이미지같은 파일들을 저장한다.)
그러므로 경로를 따로 커스터마이징할 게 아니라면 큰 뼈대는 아래와 같아야 한다. (└은 폴더의 깊이를 뜻함)
프로젝트폴더
└static폴더
└templates폴더
└파이썬코드파일1
└파이썬코드파일2
└.env
https://flask.palletsprojects.com/en/3.0.x/installation/
Flask의 도큐먼트다. 이해가 어렵다면 아래 순서대로 따라해보자. 참고로 이전 포스팅들을 보고 똑같이 해줬더라도 가상환경에서는 라이브러리를 새로 설치해주어야 한다.
1. 프로젝트 폴더 생성
> mkdir {프로젝트명}
> cd {프로젝트명}
2. 가상서버 세팅
> python -m pip install --upgrade pip setuptools virtualenv
> python -m venv {만들고 싶은 가상폴더명}
3. 가상서버 실행
> {만든 가상폴더명}\Scripts\activate
4. 터미널에서 우선 Flask와 필요한 몇 몇 라이브러리를 설치하자.
pip 업그레이드
> python -m pip install --upgrade pip
Flask 설치
> pip install Flask
(아래는 설치가 안 되어 있다면 설치)
> pip install openai
> pip install python-dotenv
https://flask.palletsprojects.com/en/3.0.x/quickstart/
Flask의 빠른 시작 가이드다. 이해가 어렵다면 아래 순서대로 따라해보자.
우선 프로젝트폴더에 main.py 파일을 생성하고 아래 코드를 붙여넣고 실행한다
기본 코드
from flask import Flask
app = Flask(__name__)
@app.route("/")
def hello_world():
return "<p>Hello, World!</p>"
이제 내 컴퓨터 주소창에 http://127.0.0.1:5000 혹은 http://localhost:5000 을 입력해보면 아래처럼 문자열이 나온다.
return "<p>Hello, World!</p>"를 return "<p>Hello, World!</p><p>Bye, World!</p>"처럼 바꾸고 저장한 뒤 브라우저에서 새로고침하면 이렇게 나온다.
이제 태그 문자열을 return하는 게 아니라 html파일을 리턴하도록 수정해보자.
{ 프로젝트폴더 }/templates/ 폴더에 index.html이라는 파일을 하나 추가해 아래 마크업을 붙여넣는다.
기본 마크업
<!DOCTYPE html>
<html lang="ko">
<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>Example</title>
</head>
<body>
<p>Hello, HTML World!</p>
</body>
</html>
그리고 main.py에서 hello_world() 함수에 return값을 render_template('index.html')로 바꿔준 뒤 저장하고 브라우저에서 새로고침을 해보자.
그러면 짜잔~ html 파일이 보인다.
이번엔 서버에서 html파일에 데이터를 넘겨 화면에 한 번 뿌려보자.
@app.route("/")
def index():
return render_template('index.html', data="데이터입니다.")<!DOCTYPE html>
<html lang="ko">
<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>Example</title>
</head>
<body>
<p>Hello, HTML World!</p>
<p>{{ data }}</p>
</body>
</html>
그러면 아래처럼 데이터가 잘 나온다.
다음 포스팅에서는 기본적인 데이터 입력 폼을 만들고 서버에 전송해 새로운 페이지로 이동하여 그 데이터를 뿌려주고, 꾸며보도록 하자
다음 포스팅
2024.01.30 - [파이썬] - Flask를 이용해 ChatGPT를 이용한 챗봇이 있는 웹페이지 만들어보기 2 [Python, OpenAI, Flask, Cursor IDE]
