input 값을 FastAPI의 py 파일로 넘겨서 형태소 분석을 '제.발' 해보자.

FreeZeeSun·2023년 12월 3일

FastAPI

NLP 프로젝트(2023.inisw)

목록 보기

7/15

오늘의 목표 🌷

input 값으로 받은 텍스트를 Svelte -> FastAPI 를 거쳐서, py 파일에서 형태소 분석을 완료하여 다시 javascript 로 받아서 popup.html 에 보여주는것.

어제까지 (사실은 오늘 새벽까지..) 구조에 대한 이해를 했다.

참고 사이트 : https://wikidocs.net/175950
이제 디렉터리를 구성하는 파일에 대해 알아볼거다.
우선, 대략 프로젝트 디렉토리 구성은 아래와 같다고 한다.

내가 알아야 할 것 :

익스텐션을 구성하는 디렉토리와 fastAPI 의 파이썬 파일과 어떻게 연결할 수 있는가?

Fetch API

https://ko.javascript.info/fetch
https://developer.mozilla.org/ko/docs/Web/API/Fetch_API/Using_Fetch

튜토리얼

ORM 라이브러리 설치
(myapi) c:/projects/myapi> pip install sqlalchemy
sqlAlchemy : https://docs.sqlalchemy.org/en/13/core/type_basics.html

database.py 생성하기
models.py 생성하기
Question , Answer 클래스 만들기
alembic 설치
(myapi) c:/projects/myapi> pip install alembic
alembic은 SQLAlchemy로 작성한 모델을 기반으로 데이터베이스를 쉽게 관리할 수 있게 도와주는 도구이다.
alembic 초기화
(myapi) c:/projects/myapi> alembic init migrations
alembic.ini 파일 수정

-> 수정 후
env.py 에 코드 추가 및 수정
import models 추가.

-> 수정 후
리비전 파일 생성하기
터미널 > alembic init migrations
리비전 파일 생성 확인

리비전 파일이란?
리비전 파일 실행하기
터미널 > alembic upgrade head
생성된 테이블 확인 위해 DB Browser for SQLite 설치하기
(하..^^ 산너머산이구만)
https://sqlitebrowser.org/dl/
DB 브라우저에서 myapi.db 열기
모델 테스트하기
터미널 > python 실행
Question 모델 객체 생성
데이터베이스에 데이터 저장하기 - SessionLocal
데이터 생성 확인
데이터 전체 조회하기
db.query(Question).all()
데이터 일부 조회하기
db.query(Question).filter(Question.id==1).all()
또는
db.query(Question).filter(Question.subject.like('%FastAPI%')).all()
데이터 수정하기
데이터 삭제하기
답변 데이터 객체 만들고 데이터 저장하기

서버 실행하기
router 파일 만들기
projects/myapi/domain/question/question_router.py
router 객체를 FastAPI 앱에 등록하기. main.py
app.include_router(question_router.router)
의존성 주입 Dependency Injection. database.py
어떤 패턴이 반복될때, 자동화하는 방법.

question_router.py 에 with 구문으로 추가해주기.
Depends 사용하기
database.py 에서 import contextlib 과 @contextlib.contextmanager 어노테이션 제거해야함. 안하면 2중으로 적용되어 오류 발생.
Pydantic 스키마 작성하기
Pydantic 이란?
출력 부분에 대한 추가적인 코딩이 필요한데, 이때 FastAPI의 입출력 스펙을 정의하고 그 값을 검증하기 위해 사용하는 라이브러리이다.

question_shema.py 파일 생성.

라우터에 Pydantic 적용하기. question_router.py
CRUD 코드 따로 분리해서 작성하기. question_crud.py
왜냐하면 서로 다른 라우터에서 데이터를 처리하는 부분이 동일하여 중복될수 있기 때문이다.
router 함수 수정해주기. question_router.py
question_crud.py 의 get_question_list 함수를 사용할 수 있도록!

하... 근데 잠시... 지금까지 배우는 방식은 동기방식이라고 한다.... 비동기 방식은 공부할때는 처음부터 보는게 좋지 않다고.... 난 시간이 없는데... 바로 비동기 방식으로 뛰어넘을까?
점점 하다보니 Java 배울 때가 기억난다. 서블릿&JSP 부터 스프링 하던 그 시절.. 처음 핑퐁하던 개념이 너무 익숙치 않고, 구조에 대한 감이 안잡혀서 고생했는데, 그 때 열심히 공부해놓은 보람이 있는 듯하다. 동기 방식과 비동기 방식의 구조이해가 순조롭게 되고 있는 중이다.

프론트로 넘어와서 화면 준비하기

잘 되네.. ㅎ

여기서 잠깐, Svelte 필수 문법 알아보기

<분기문>
파이썬의 if, elif, else 문과 유사

{#if 조건문1}
    <p>조건문1에 해당하면 실행</p>
{:else if 조건문2}
    <p>조건문2에 해당하면 실행</p>
{:else}
    <p>조건문1, 2 모두 해당하지 않으면 실행</p>
{/if}

<반복문>
파이썬의 for 문과 유사

{#each list as item, index}
    <p>순서: {index} </p>
    <p>{item}</p>
{/each}

<객체 표시>

{객체}
{객체.속성}

너무 지친나머지.. input 값을 받기 위해 아둥바둥

성공했다....🥹
물론, 디테일한 코드는 수정할게 많지만...
그래도 이렇게 데이터 넘어온게 어디야!!!!! ㅠㅠㅠㅠ

형태소분석만 하고.. 자자...

< Jpype > 설치

가상환경에 그냥 pip install JPype1 을 치니까 성공적으로 다운로드가 되었다.

< Konlpy > 설치

무사히... 성공 ... !!!!

테스트로 Okt 형태소분석기를 써봤다.

자바스크립트로 받은 데이터를 해봤다.

된다..!!!! 성공...!!!ㅠㅠㅠ
이제 이걸 다시 자바스크립트로 잘 보내보자.

하... 에러범벅이다..
어떻게 해야할까.
분명히 CORS 문제를 해결했다고 생각했는데... ㅠㅠ

CORS 솔루션

# CORS 문제 해결하는 코드 (이게 없으면, 자꾸 화면에 undefined 가 뜨고, 콘솔창이 에러범벅이 된다.)
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"], # 모든 출처를 허용하려면 "*"을 사용합니다. 필요에 따라 출처를 지정할 수도 있습니다.
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)