웹 페이지를 구성하기 위해선
1. 백엔드
2. 프론트엔드
크게 2가지를 구성해야 합니다.
현재 백엔드는 Fastapi가 거의 해결된 상황! (데이터 관리 같은부분은 필요 없기에..)
어떤 식으로 주소가 결정이 되고, 페이지로 이동 할 수 있는지만 파악하고,
프론트엔드와 웹 상의 추가 기능들만 추가 해주면 될 것 같습니다.
링크 & 페이지 이동
이전글에서
아래처럼 구성해서 "https://127.0.0.0.1:9080/" 로 이동했었습니다.
@app.get("/")
def read_root():
return {"Hello": "World"}
위에서 보이는 것 처럼 아래 FastApi + get/post를 이용해서 링크를 할당 해줄 수 있습니다.
@app.get("/")
@app.post("/")
Uvicorn이 실행되고 있는 ip + port 와 get/post를 통해 할당한 주소를 연결해주면 연결 끝!
이제는 정말 프론트앤드 부분을 구성해 주러 갑시다.
**get과 post?
작은 웹의 경우 그렇게 중요한 문제는 아니지만 나온김에 공부!
HTTP 프로토콜에서 GET과 POST는 두 가지 주요한 요청 메서드입니다. 하지만 둘의 차이는 명확한데
- GET의 경우 데이터 전송방식이 "http://www.ex.com/num?name1=value1" 처럼 URL의 매개변수에 데이터를 첨부하여 서버로 전송하는 특징을 가집니다.
- Post의 경우는 반대로 URL에 값을 포함하지 않고 내부 body부분에 포함하여 전송하는 특징을 가집니다.
위의 특징을 토대로 장단점이 될만한 점을 정리하면
GET
- URL에 포함할 수 있는 데이터에는 제한이 있다.
- 데이터가 노출되므로 보안에 취약하다
POST
- 데이터가 내부에 포함되어있어 보안에 유리하다
- 데이터 양에 제한이 없다.
....? 여기까지만 알았을때 GET을 왜 사용하는가? 에 대한 의문이 생기게됩니다.
GET의 장점은 URL상의 노출되어있는 데이터에 대한 활용도에서 알 수 있습니다.
웹에는 캐시라는 개념이 있습니다.
이전에 접속했던 정보가 있다면 이 정보를 토대로 이후 접속시 빠르게 재접속 가능하게끔 하는 개념입니다.
GET 방식을 사용하면 URL링크를 저장해 두었다가 재접속시, 속도에 대한 성능을 최대치로 향상 시킬수 있다는점
(Post의 경우 데이터부터 읽어와야하기에 차이가 생각보다 큼)
결론!
GET의 경우 정보를 "조회" 하는 역할에서 활용가능하고,
POST의 경우는 데이터를 가지고 "처리/반환" 할때 효율적으로 사용가능하다는 부분에서
둘다 유용하게 사용할 수 있습니다!
- - 좀 길었네요 - -
다시 본론으로 돌아가서 프론트앤드 부분으로!
웹페이지 구성
현재 바로 연결을 하게 되면
위 처럼 일반적인 return 값을 받게되며, 새하얀 화면에 값만 출력되기 때문에
페이지를 구성할 html 템플릿을 만들어 주어야합니다.
여기서 부터는 파일 위치도 중요하게 봐주세요!
routers에 각종 get/post를 위치 시킬 예정
templates에는 html파일들
그리고 외부에 실행을 위한 app.py로 구성해주세요
그리고 html부터 정말 간단하게 구성해준 뒤
<Share_Dir.html>
<!DOCTYPE html>
<html lang="ko">
<!------------------------- 디렉토리 관리페이지 ---------------->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>디렉토리 페이지</title>
</head>
<body>
<h1>디렉토리 GUI</h1>
<button>버튼</button>
</body>
</html>
아래처럼 프론트 템플릿을 연결해 주어야합니다.
<Share_Dir.py>
from fastapi import FastAPI, APIRouter, Request
from fastapi.templating import Jinja2Templates
import os
router = APIRouter()
app = FastAPI()
templates = Jinja2Templates(directory="templates")
@router.get("/Share", response_class=HTMLResponse)
async def DirPage(request: Request):
return templates.TemplateResponse("Share_Dir.html", context={"request": request})
그리고 app.py에 router추가
(router.get("/Share" ~~ 부분을 app.py에 추가해도 되지만 추가할 함수 들을 한곳에 묶어 관리하기 위해)
<app.py>
from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles
from routers import Share_Dir
app = FastAPI()
app.mount("/static", StaticFiles(directory="static"), name="static")
app.include_router(Share_Dir.router)
if __name__ == "__main__":
import uvicorn
uvicorn.run("app:app", host="0.0.0.0", port=9080, reload=True)
여기까지 끝!
이제 기능을 수행할 수 있는 웹 페이지로 이동할 수 있습니다!
웹페이지 기능
이제 간단하게 버튼에 기능을 추가해 보겠습니다.
먼저 간단하게 text를 반환하는 함수를 하나 만들어 줍시다.
<Share_Dir.py>
...
@router.post("/dir/test") # 테스트
async def test():
print("시작!")
text='test시작'
return text
...
그리고 템플릿의 기존 코드에서 아래처럼 변경!
<Share_Dir.html>
....
<body>
<h1 id="title">디렉토리 GUI</h1>
<button id="FirstBtn">버튼</button>
</body>
<script>
const title=document.getElementById('title');
const btn = document.getElementById('FirstBtn');
btn.addEventListener('click', async () => { // 삭제 실행버튼
const response=await fetch(`/dir/test`, {method: "POST"});
const result = await response.text();
console.log(result)
title.textContent=result;
});
....
id를 통해서 요소들을 받아와주고
const title=document.getElementById('title');
const btn = document.getElementById('FirstBtn');
addEventListener를 통해 기능을 추가해줍시다!
"btn.addEventListener"
버튼 실행 함수안에는
이전에 만들어 주었던 test함수를 ` / dir / test ` 형식으로 실행 시켜 줍시다.
그리고 결과를 response에 저장하고 그 결과를 text로 변경해주면 끝!
const response=await fetch(`/dir/test`, {method: "POST"});
const result = await response.text();
title.textContent=result;
버튼을 누르게 되면 아래처럼 tiltle의 text가 바뀌게 됩니다!
이번엔 여기까지가 끝!
다음 글 부터는 python 함수들로 구성하여 특정 디렉토리 관리 할 수 있는 웹페이지를 만들 계획입니다.
이번 프로젝트의 최종 목표!
1. 디렉토리 관리
2. 학습데이터 관리
3. 영상/이미지 변환
.....
등등 을 위한 페이지 구성 까지 진행해 보겠습니다.
틀린 점이 있다면 댓 달아주세요!
'공부공부 > 2023 쌓여가는 나의 지식~' 카테고리의 다른 글
| 블렌더를 이용해 간단한 3D 모델 만들기 (0) | 2023.12.09 |
|---|---|
| (FastApi & Tree view)를 이용한 디렉토리 관리 웹 페이지 구축 (1) - GUI 관련 (0) | 2023.12.08 |
| Fastapi를 이용한 웹페이지 구성 (1) - 설치 및 사용 (1) | 2023.12.06 |
| Mediapipe를 이용한 손 인식 (1) | 2023.11.01 |
| 리눅스(Linux) 데이터 베이스(Mysql) 사용해보기 (0) | 2023.10.26 |
댓글