[Hambook-stocks] Staticfiles

김민찬·2025년 2월 20일

Hanmbook-stocks

목록 보기
1/7

궁금했던 것 : staticfiles 의 역할

Staticfiles -> 서버에서 수정없이 그대로 클라이언트로 제공되는 파일
(html, javascript, css, 이미지, 폰트가 포함됨)


궁금했던 것 : mount


# main.py

app.mount("/front/assets", StaticFiles(directory="front/assets"), name="assets")
app.mount("/front/vendor", StaticFiles(directory="front/vendor"), name="vendor")
app.mount("/front2/assets", StaticFiles(directory="front2/assets"), name="assets")

우리가 짠 코드는 fastapi를 실행시키면
http://127.0.0.1:8000 로 이동을 한다.

# set_page_routers.py

@router.get("/", response_class=RedirectResponse)
async def root():
    return RedirectResponse(url="/front/index")

이 코드는 http://127.0.0.1:8000/ -> http://127.0.0.1:8000/front/index 로 리다이렉트를 시켜주는 코드이다.


front 폴더 하위에 index.html이 있는 모습.

따라서 저 html코드를 브라우저로 보낸 후, 브라우저는 html코드를 읽어서 화면을 띄워준다.

이때, 브라우저가 html코드를 읽을때 JavaScript, CSS, image, font를 마주친다. 이들은, html코드에서 링크되어 있는데
브라우저입장에서는 JavaScript, CSS, image, font 를 불러올 수가 없다.

따라서 fastapi에게 요청을 보내게된다.

이때, fastapi가 브라우저로부터 받은 요청에 대한 응답으로 짜놓은게 mount코드이다.


궁금한점 : mount코드가 구체적으로 어떻게 돌아가냐?

app.mounrt() 의 인자에는 크게 2가지가 있음
app.mount(Path, app)

Path -> 브라우저가 요청하는 url 경로
app -> 정적파일 제공 객체

  1. Path
    브라우저는 html 코드를 읽다가,

    이러한 url을 읽게된다.
    이때 개발자는 위의 구체적인url을 포함하고 있는 더 큰 범위의 url을 첫번째 인자로 명시해준다.
    예를 들면,

    첫번째 인자가 /front/vendor 인 모습.
    /front/vendor 에 속하는 모든 url은 이제 이 코드를 통한다.
  1. app
    StaticFiles에서는 첫번째 인자인 Path 로 받은 파일이 실제 어느 디렉토리에 있는지 main.py 기준으로 명시를 해준다.
    이후에, 해당 디렉토리의 하위파일들을 모두 브라우저의 요청에 대한 응답으로 보내준다.

이러한 과정을 거쳐서, 브라우저에 동적파일들이 나타나게 된다.

profile
동까스

0개의 댓글