[Full-Stack] 풀스택 프로젝트 개발 일지(1)

YunKwang-You·2024년 5월 6일
1
post-custom-banner

회사 내에서 신규 프로젝트를 시작하게 되었다. 그 중에서도 나는 해당 서비스를 보기 쉽게 List-Up하고, 자유롭게 편집할 수 있는 Web을 만들게 되었다.

이전에 Toy Project로 수행했던 Flask Web의 경우에는 Login과 같은 사용자 Auth/인증 등에 크게 관여를 하지 않았었는데, 이번 프로젝트의 경우 아래와 같은 특성때문에 인증을 고려하여 개발을 시작하게 되었다.

[금번 프로젝트의 특성]

  1. 개인화된 UI와 File 공간이 필요하다.
    • client 정보에 따라 자신만의 화면을 볼 수 있어야 하며, 편집하는 공간에서는 자신의 파일을 저장하고, 나중에 다시 로그인 했을 때 자신이 만든 파일을 볼 수 있어야 한다.
  2. Data를 수집하여 한 공간에 모으려는 의도가 있기에, Web Application 내 보안이 매우 중요하다.
  3. Client의 단말 특성에 따라 제약 조건이나 정책을 설정할 필요가 없다.
    • 모든 Client가 PC Web 직접 접속으로 정책 설정 불필요하다.

이번 프로젝트는 비동기 Web 구축을 위해 Python Fast API로 진행하게 되었는데, 맨 땅의 헤딩 하기로 하고 Chat GPT 3.5에게 Login 관련 몇가지 함수를 짜달라고 요청했으나, 결과는 그닥 좋진 않았다.

@app.post("/token")
async def login_for_access_token(form_data: OAuth2PasswordRequestForm = Depends()):
    user = await authenticate_user(form_data.username, form_data.password)
    if not user:
        raise HTTPException(
            status_code=401,
            detail="Incorrect email or password",
            headers={"WWW-Authenticate": "Bearer"},
        )
    # 토큰 발급 코드는 여기에 추가
    return {"access_token": user.email, "token_type": "bearer"}

대략 login form에 입력한 user와 password가 있으면 access token을 발급하는 함수 정도로 보이는데, 솔직히 이 코드를 상용에 적용하는것도 웃기고..ㅋㅋ main.py에 모든 라우팅을 박아두는 것도 어설퍼보여서 구조화된 코드를 찾기 시작했다.

  1. 당연하게도 FastAPI를 통해 Full-Stack 개발이 쉽도록 GitHub에 올라와있는 저명한 Code가 있다. 이 Code를 왠만하면 Clone 해서 사용하고 싶었으나, Frame이 갖춰진 상태에서 내가 어떻게 라우팅을 추가하고 사용할 수 있는지 잘 모르겠어서 포기했다. 특히, Front-End가 React로 구성되어 있는데, 본인은 이런 구성에 대해서 전혀 모른다.. BootStrap 밖에는 못다루기 때문에..
    Link : https://github.com/tiangolo/full-stack-fastapi-template

  2. Youtube를 뒤지기 시작했다. FastAPI Login 구현이라는 내용으로 검색했고, 3년 전 올라온 Posting 중 '코딩알려주는라이언-코알라'의 FastAPI Backend 구축 영상을 보고 따라하게 되었다.(거의 배낀 것에 불과하다.) 이 강좌의 좋은 점은 FastAPI 내 구조를 왜 이렇게 가져야 하고 이런 이유들에 대해서 설명을 잘 해주신다. 그리고 추후에 라우팅을 추가할 때 어떻게 해야하는지에 대한 과정들도 설명이 잘 되어 있다.
    Link : https://youtu.be/ktGVFmfGiGM?si=RM0xx3k7K-I05_fz

현재 2번 코알라 선생님의 Youtube를 통해 Web 구축을 하고 있고, 거의 Code를 배껴서 사용하고 있어서, 나중에 유지보수를 할 때 문제가 발생하면 잘 고칠 수 있을지는 모르겠지만 일단 진행해보자.
model이나 file을 import하는 방법이 내가 원래 사용했던 방법이 아니라서, 부자연스럽긴 하지만 빠르게 익숙해져 보자 : )


도움이 되길 바랍니다. : )

profile
Network Infra Engineer
post-custom-banner

0개의 댓글