FastAPI로 정적파일 mount하기

나는 wordle 게임을 js, html, css만으로 만들었었는데 이걸 fastAPI와 연결하고 싶었다.

초기 코드 haeji1124/wordle at v.0.0.0

이럴 경우 아래와 같이 코드 수정 후 static 폴더에 css, js, html 를 넣어주면 된다.

 

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles

app = FastAPI()

app.mount("/", StaticFiles(directory="static", html=True), name="static")

 

 

그러면 이제 서버에서 정답을 보내주고 그걸 토대로 검사한다고 치자

from fastapi import FastAPI
from fastapi.staticfiles import StaticFiles

app = FastAPI()

app.mount("/", StaticFiles(directory="static", html=True), name="static")

answer = 'TRAIN'

@app.get('/answer')
def get_answer():
    return {'answer' : answer}

 

const handleEnterKey = async() => {
        const 응답 = await fetch('/answer');
        const 정답_객체 = await 응답.json();
        const 정답 = 정답_객체.answer;

        if (index === 5){
            let 맞은_갯수 = 0
            // 정답 확인
            for (let i = 0 ; i < 5; i++){
                const block = document.querySelector(`.board-block[data-index='${attempts}${i}']`);
                block.style.color = "white";
                if (block.innerText === 정답[i]) {
                    block.style.background = '#6AAA64'
                    맞은_갯수 += 1
                }
                else if (정답.includes(block.innerText)) block.style.background = "#C9B458"
                else block.style.background = "#787C7E"
            }
            if (맞은_갯수 === 5) gameover();
            else nextLine();
        }
        else{
            // 5글자 모두 입력하세요
        }
    }

 

수정 후 shift + F5 로 캐쉬데이터를 무시하고 완전 새로고침을 해준다.