전체 글 206

긴 처리시간을 필요로 하는 서비스 설계 고찰

앞에서는 Rest API Request 에 대해 Response 까지 기다리는 설계에 대해 고찰해 보았다. 이는 결과가 빠른시간내에 처리되는 경우에 적합한 설계이지만 만약 긴 처리시간을 요구하는 Request 에 대해서는 다른 설계를 고찰해야 한다. 예를들면 책 1권의 Word 화일을 일정의 문자수를 분리를 하여 OpenAI 의 GPT Api 에 프롬프트와 함께 Request 한다고 하면 긴 처리가 끝날 때까지 결과를 마냥 기다릴 수는 없을 것이다. 이럴 경우에 아래와 같은 설계를 제안할 수 있다.

ai 모델 서비스 설계 고찰

개의 종을 학습시킨 모델을 생성하여 웹서비스를 하고자 한다고 하면, 아래와 같이 접속때 마다 Flask의 Rest API Request 처리 안에서 대응하고자 한다면 매번 모델을 로딩하는 결과를 초래한다. 대안으로써는 별도 추론 쓰레드를 생성하여 모델을 한번만 로딩하고 브로커(redis)를 사용하여 Rest API Request 와 추론쓰레드간의 중계역할을 해주도록 한다. 다음 칼럼에서는 위의 설계를 코드로 실현해 보도록 하자.

(React) const, var, let

keyword scope const 전체 var 와 같으나 한번 값이 할당되면 바꾸지 못함 var function 내 서브블럭내에서 다시 같은 이름의 변수를 할당하여도 똑같은 변수를 가르킨다. let 블럭( { } ) 내 블럭내에 선언하면 블럭을 빠져나오면 사라짐 // case 1 function varScoping() { var x = 1; if (true) { var x = 2; console.log(x); // will print 2 } console.log(x); // will print 2 } // case 2 function letScoping() { let x = 1; if (true) { let x = 2; console.log(x); // will print 2 } console.log(..

(React) Parent 와 Child 컴포넌트간의 값 전달, 변경, 반영시키기

Child 를 품고 있는 Parent 컴포넌트에서 Child에 값을 전달하면 Child 안에서 값을 변경한 후, 변경한 값이 Parent 에도 동기가 되도록 할 필요가 있을 경우.예를 들면, Parent 가 서버에서 값을 가져와서 다이얼로그를 띄워 값을 변경하여 그 값이 Parent에 반영시킬 경우. Parentconst ParentComp = () => {   const [values, setValues] = useState({"key1": "value1", "key2": "value2"});      useEffect(() => {      // 서버에서 값을 가져온다면       // rest api get -> setValue( ... )    }, []);      return (     cha..

(React) env 설정 ( 글로벌 변수)

env 설정의 활용 ReactJS 프로젝트 내에서 사용할 글로벌 변수의 정의 github 에 프로젝트를 업로드하고자 하는 경우 -> .env 화일에 저장후 .gitignore 를 통해서 업로드에서 배제 인스톨 npm i --save-dev dotenv .env 화일을 프로젝트의 root 디렉토리에 생성 (src 폴더 NG) .env 화일내에 아래 샘플과 같이 정의 ( 반드시 REACT_APP_ 로 시작해야 하고, 값에는 쿼테이션 불필요 ) REACT_APP_BASE_URL=http://localhost:8000 REACT_APP_API_KEY=YOUR-API-KEY 프로젝트내 사용법 1. 변수명을 재정의한 (예) variables.js 파일을 생성하여 export 선언 export const BASE_U..

flask 를 쓸까? django 를 쓸까?

파이선 환경의 framework 로서는 flask 와 django 가 있다. 둘 다 개발해본 경험자로서 어떤것을 사용할까에 개인적인 소견을 말하고자 한다. django 의 장점으로서는 보안문제와 template 을 사용할 수 있다는게 장점일 것 같다. 하지만 설정방법과 사용법이 어렵고 template 은 frontend용 JavaScript framework(React, Angular, Vue) 가 있기 때문에 그다지 사용할 필요가 없는 것 같다. 반면 flask 는 간단히 개발할 수 있기때문에 앞으로 flask 개발에 대해 설명하고자 한다. flask, django 는 어플리케이션 framework 이기 때문에 멀티 접속을 지원하지 않는다. 즉 동시에 여러 접속이 존재하게 되면 먼저 온 순서에 따라 순..

Windows 노트북에 Ubuntu Linux 설치 부팅

Cloud 환경을 비롯해 backend의 서버로서 Ubuntu Linux 에 익숙할 것이다. 개발환경으로 많이들 Mac Book을 사용하지만 따로 구매하기에도 부담일 수 있다. 그래서 간단히 가지고 있는 노트북을 Windows OS환경을 전혀 건들이지 않으면서 사용목적에 따라 간단히 Windows / Ubuntu 선택적으로 부팅하는 방법을 설명하겠다. (결코 멀티부팅을 설정하는게 아님.) 준비물) USB 메모리 ( Ubuntu bootable image 생성용 )마이크로 SD 슬롯이 있는 노트북 ( 자신의 경우 LG Gram )마이크로 SD 카드 128기가, 아니면 256기가. 1. Windows 에서 Ubuntu bootable USB stick 만들기    https://ubuntu.com/tutor..

잡동사니 2023.11.29

cv::Mat 이모저모

본론으로 들어가지 전에 C++ 기초가 부족하시는 분들이 있을 것 같아서 왜 앞에 cv:: 를 붙이나요? 라고 하면 opencv 의 라이브러리(dll)를 생성할 때 namespace cv { 코드 } 형식으로 만들었기 때문에 명시적으로 cv:: 를 적어주는 것이다. 만약 자신의 코드화일의 선언부에 using namespce cv; 를 선언해 주면 cv:: 를 생략해 줘도 상관없다. 하지만 라이브러리 간에 똑같은 함수를 사용하는 경우가 있고 코드를 알기 쉽게 하기 위해서 개인적으로는 cv:: 를 붙여서 코딩하는 것을 선호한다. 단순히 선언만 -> 이미지 공간은 할당되지 않고 클래스 변수만 스택에 저장 cv::Mat image; 이미지 공간 할당 넓이, 높이, 픽셀타입, (옵션)초기값 을 지정한 경우 - (1..

opencv 2023.11.29

(React) Axios (vs Fetch)

Axios 와 Fetch 의 간단한 차이점은 아래와 같다.Fetch 는 별도 인스톨 없이 사용가능하나 Axios 는 별도 인스톨 해야 한다.   npm install axiosFetch 는 브라우저 일부에서 지원하지 않고, 반면 Axios 는 모든 브라우저에서 지원한다.Axios 가 사용하기 쉽다.Axios 는 자동으로 JSON 데이터를 변환시켜 주지만, Fetch 는 .json() 을 사용해 변환한다.fetch('https://myapi.com/') .then(response => response.json()) .then(console.log);axios.get('https://myapi.com/') .then(response => console.log(response.data));Axios 는 .ca..