WebSurf

[FastAPI] Fast API 시작하기

설치 pip install fastapi pip install "uvicorn[standard]" 아래에 있는 uvicorn은 Fast API를 웹 서버에 올려주는 역할을 한다. 만약 CLI앱을 구현하고자 한다면 Typer를 설치하자. https://typer.tiangolo.com/ Typer Typer, build great CLIs. Easy to code. Based on Python type hints. typer.tiangolo.com 구현 main.py 파이썬 파일을 만들어보자. from fastapi import FastAPI app = FastAPI() @app.get("/") def read_root(): return {"Hello": "World"} 이러면 엔드포인트에대한 구현은 끝났..

[React - Trouble Shooting] state 값이 변경되지 않는 문제

이번 포스트에서는 state와 setState는 간단하게만 보고 넘어가자. 배경 지식 state state 값은 setState()를 통해서만 변경이 가능하다. setState useState로 만든 useState는 비동기적 특성을 갖는다!! 문제점 useEffect 훅 안에서 이벤트 리스너가 실행되면서 state 값이 변했다. 이 state 값이 의존성배열에 들어가있는 다른 useEffect 훅을 실행시켜 state 값을 확인해보면 값이 잘 나온다. 하지만 이벤트 리스너의 처리가 모두 끝나지 않았고, 변한 state 값을 통해 다른 로직이 실행되도록 구현되어 있었다. 여기서 문제가 발생한다!! 원인 앞서 말했듯이 React의 setState는 비동기적으로 실행된다. 정확히는 현재 setState는 이..

[Cloud] PuTTY를 사용하여 Windows에서 Ubuntu 인스턴스 연결하기 (AWS EC2)

AWS EC2를 로컬에서 접속하여 사용하기 위해 PuTTY를 사용해보자! AWS EC2 생성할 때 키는 ppk로 받자!!! PuTTY 설치 먼저 PuTTY를 설치한다. https://www.chiark.greenend.org.uk/~sgtatham/putty/ PuTTY: a free SSH and Telnet client PuTTY: a free SSH and Telnet client Home | FAQ | Feedback | Licence | Updates | Mirrors | Keys | Links | Team Download: Stable · Pre-release · Snapshot | Docs | Changes | Wishlist PuTTY is a free implementation of SS..

[Trouble Shooting] 미디어 스트림 오류 ->> TypeError: Cannot read properties of undefined (reading 'getUserMedia')

AWS S3에 React 클라이언트를 배포하고 테스트를 진행했다. const constraints = { audio: true, video: true }; navigator.mediaDevices.getUserMedia(constraints) .then((stream) => { setLocalStream(stream); }) .catch((error) => { console.error(error); }); 미디어 스트림 데이터를 localStream 에 저장하는 코드에서 오류가 생겼다. 미디어 스트림에 접근할 수 없었고, 이를 해결하기 위해서는 https로 ssl 인증서를 발급받아 적용시키는 법이 있었다. 하지만 이거슨.... 이 프로젝트의 목적은 상용화가 아니기 때문에 다음 방법을 사용했다. 해결 방법..

[Trouble Shooting] CORS 에러 ->> The request client is not a secure context and the resource is in more-private address space `private`.

React 클라이언트를 AWS S3에 배포하면서 로컬 상황에서는 없었던 CORS 오류가 생겼다. 서버에 CORS 허용 헤더를 넣었지만 생기는 오류이다. 브라우저 설정을 통해 해결할 수 있다. ( 크롬 ) chrome://flags/#block-insecure-private-network-requests 이 설정을 disabled 해준다.

[conda] environment.yaml 파일 뽑아내기?!

간단하다! 사용하던 환경에 activate 해준다. conda activate 가상환경이름 그 후 conda env export > environment.yaml 혹은 conda env export --no-builds | grep -v “prefix” > environment.yml 이렇게 입력한다면 본인의 conda 환경에서의 의존성들이 environment.yaml 파일로 나오게 된다!

[React - Trouble Shooting] 불필요한 렌더링으로 인한 문제

하나의 페이지에 속해있는 컴포넌트에서 서버에 소켓 통신을 보내는 코드를 구현했다. 하지만 서버에 한 번의 소켓 연결이 이루어지는 것이 아니라 여러번의 연결이 이루어졌다. 불필요한 렌더링이 일어난 것이다. 이렇게 연결이 여러번 이루어지면서 서버에서는 여러 클라이언트가 연결되었다는 것으로 인식한다. 어떻게 해결할 수 있을까? 렌더링 자체를 제어할 수 있는 방법도 있지만 이번에는 그런 방법이 아니다. useEffect 훅을 사용할 수 있다. useEffect(() => { // 부수 효과 작업을 수행하는 콜백 함수 // ... return () => { // 정리(clean-up) 함수 // 컴포넌트가 언마운트되거나 의존성이 변경될 때 호출됨 // ... }; }, [/* 의존성 배열 */]); 의존성 배열 ..

[AI - Trouble Shooting] KeyError: 'Non-exist config key: DATASET.VOCABULARY.EXCLUDE_TOKENS'

배경 AI-HUB의 한국 수어 영상 데이터셋을 통해 학습된 KSL Model을 지금 진행 중인 프로젝트에 적용하여 API로 구현하기 위해서 해당 모델을 실행하기 위해 코랩 환경에서 의존성 설정을 모두 마치고 실행을 했다. 이런 오류가 발생해서 이유를 찾아보니 config 파일에서 데이터셋의 키 값의 오류라고 판단되었다. 해당 config 파일을 살펴보니 DATASET: DATA_ROOT: "/home/storage/sde_2T" TRAIN: IMG_PREFIX: "NIA_sen" ANN_FILE: "KSL_TRAIN_QD_final.csv" VAL: IMG_PREFIX: "NIA_sen" ANN_FILE: "KSL_VAL_QD_final.csv" WORKER_PER_GPU: 16 TRANSFORM: RE..