[Flutter] Android 폰 Flutter로 개발한 앱에서 Local host 에 구축된 API 서버 접속하기 안녕하세요. 클스 입니다 요즘 flutter를 공부하면서 앱 개발을 하고 있습니다. REST API는 macos에 fastapi로 개발했고 포트는 8001로 실행했습니다. 아래 그림과 같이 실제 device(폰)을 mac에 usb로 연결해서 mac에 있는 rest api 서버에 접속해야 합니다. 그리고 rest api 는 VPC를 통해 AWS의 RDS에 연결됩니다. 여러가지 연결방법이 소개되었는데, localtunnel 등은 내부 방화벽에서 막아서 안되네요~ 그래서 찾은것이 adb 의 고유 기능입니다. 요즘엔 에물레이트로 개발을 많이해서 잘 쓰진 않지만, 에물레이트에 카카오톡을 설치하기가 쉽지 않습니다. 연결 해서 테스트 해보기 1) android sdk 설치 및 경로 잡아주기 2) 터미널에서 $ adb reverse tcp:8001 tcp:8001     8001  ==> 이게 나오면 성공 3) fastapi 실행 : reverse tcp port와 같이 맞춰야 합니다.    $ $ APP_ENV=local uvicorn app:app --host "0.0.0.0" --port "8001" --reload  4) 스마트폰에서 크롬을 실행하고     http://127.0.0.1:8001/docs 접속하면 API 명세가 나오면 성공입니다. 이상 클스 였습니다.

[NFC 스티커] 생활을 편리하게 만드세요~ 안녕하세요 클스 입니다. 다양한 공간에서 휴대폰에 특정 앱을 실행하거나 명령을 해야 한다면 ? 1) 차에서 충전을 할 때 티맵 자동실행 2) 책상위에 폰을 올려두면 음악 나오기 3) 침대위에 올려두면 무음 모드 아래 유투브에서 보면 엄청나게 활용도가 많습니다. https://www.youtube.com/watch?v=ajcODPlpms4 쿠팡에서 구매 가능하며, 디자인이 들어간 것과 단순한 스티거 2종 소개 드려요~ "이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다." 구매를 원하시면  이미지를 클릭하시면 됩니다. 1) 디자인이 좀 된 것 2) 맥세이프 호환   3) 단순 스티커 이상으로 생활에 유용한 NFC를 소개해 드렸습니다. 저도 해보니 생각보다 쉬웠고, 차에 붙혀두니 바로 목적이로 안내가 가능해서 자주가는 배드민턴 구장 , 회사, 집 3개를 해뒀어요~ 그럼 즐거운 주말 보내세요~

안녕하세요 클스 입니다. 팀에 하나의 제품을 개발할 때 인력이 약 15명 이상 있을 경우 react, vue, flutter등  선택의 폭이 넓어집니다. 그런데 애매하게 5~8명이 back-end, front-end, db, infra  전부 하면서 web, android, ios 앱을 개발하기엔 쉽지 않습니다. 우리는 무엇을 선택하면 좋을까요?  현재 우리팀은 FastAPI, vuejs 를 기본으로 사용하고 있는데.. vuejs가 아직 react의 방대함 그리고 커뮤니티를 따라가지는 못하는  듯합니다. 확실히 react 보다는 사용하기는 제 경우는 쉬웠습니다. 사설이 길었네요~ 여하튼 이번에는 웹에서 실시간으로 사용자에게 알림(시스템 변경, 작업 완료...)을  실시간으로 전달하기위해 많이 사용하는 websocket과 socketio가 있는데 둘의 확실한 선택 기준은 서비스 환경에서 통신에 문제가 있는가 없는가에 따라 다릅니다. socketio는 통신이 막히면 가능한 방식을 찾아서 연결해서 사용자에게 메시지를 전달합니다. HTTP long polling 방식으로 전달을 합니다. 문제는 주기적으로  long polling를 합니다. 그리고 socketio client를 사용하면 서버가 재시작되면 자동으로 다시 연결해줍니다.  개발자 입장에서는 확실히 좋은 기능입니다.  그외 방기능, 브로드캐스팅, 속삭임등등 일반 채팅방을 쉽게 구현할 수 있습니다. 또한 일반적으로 kafka, redis 와 다양한 mq 서버들과 연동이 가능합니다. 1. 목표 간단한 채팅방이 가능한 채팅 기능을 만들어 본다 fastapi에서 socketio를 많이 사용을 안 하는지? 업데이트가 잘 안되고 있어서 github등의 예제로는 404 Not Found, 403 등의 오류가 나서 접속이 안되었다 => 이것 때문에 쓴 글이기도 하다 2. 사용 socket.io 기반으로 python-socketio를 fast...

pydantic migration v1.x to v2.x 오류 해결 안녕하세요. 클스 입니다. FastAPI를 이용해서 kakao 로그인을 구현하고자 했습니다. poetry add 'pydantic[ 'email' ]' 설치를 했습니다. 그랬더니 v1.x --> v2.2로 업그레이드 되면서 기존에 동작하던 configs.py 에서 아래와 같은 오류가 발생했습니다. pydantic.errors.PydanticImportError: `BaseSettings` has been moved to the `pydantic-settings` 해결[SOLVED] [원인] from pydantic import BaseSettings 이 v2.x가 되면서 pydantic-settings로 이동되었다는겁니다. [해결] $ poetry self update  [선택사항] $ poetry add 'pydantic[email]'    $ poetry add 'pydantic-settings' 설치 합니다. $ poetry update  [선택사항] configs.py 소스에서 아래와 같이 수정하면 됩니다. from asyncio import streams # from pydantic import BaseSettings, Field # DELETE from pydantic_settings import BaseSettings # NEW from pydantic import Field class DefaultSettings ( BaseSettings ): APP_ENV: str APP_NAME: str APP_DESCRIPTION: str APP_VERSION: str APP_BUILD_NO: int 그리고 pydantic에서 local.env 파일을 설정할때 문자, 숫자에 대한 강력한 validation을 합니다. [local.env 기존]에는 문자든 숫자든 상관없이 알아서 해줬...

안녕하세요. 클스 입니다. 오늘은 FastAPI에 여러개 worker를 실행하는 것을 해보려고 합니다. 많은 요청을 처리하기 위해서 worker를 해주면 좋습니다. worker의 계산은   2 x number_of_cores +1 이 적절하다고 합니다. 좀더 정확하게 산출해보려면 아래와 같이 계산하면 됩니다. number_of_workers = number_of_cores x num_of_threads_per_core + 1 MacOS의 터미널에서 $ sysctl -n hw.packages ==> MacOS에 장착된 cpu socket 수 $ sysctl hw.physicalcpu hw.logicalcpu ==> cpu의 core 수, 총 thread 수    num_of_threads_per_core(core당 thread 수) = hw.logicalcpu / hw.physicalcpu $ sysctl -n hw.ncpu 혹은 ==> core 수 $ sysctl -n machdep.cpu.thread_count ==> core 수 uvicorn과 hypercorn으로 실행하는데 --reload 옵션이 있으면 --workers는 무시되고 1개만 뜹니다. 그리고 reload process가 1개 실행 됩니다. 참고로 FastAPI 공식 문서 에서는 worker를 띄울때는 uvicorn 보다는 gunicorn을 사용하는게 좋다고 합니다. 그래서 저는 hypercorn을 많이 사용합니다. # uvicorn ```sh $ APP_ENV=dev uvicorn app:app --host "0.0.0.0" --port "8001" --reload $ APP_ENV=dev uvicorn app:app --host "0.0.0.0" --port "8001" --workers 4 ``` # hypercorn ```sh $ APP_ENV=dev hypercorn app:app --...

안녕하세요. 클스 입니다. 기존 프로젝트에서 vue3 + quasar 를 사용했는데, quasar가 기본적으로 yarn 기반 입니다. 그런데 친철하게도 pnpm도 지원합니다. 처음부터 quasar 프로젝트 생성시 pnpm 으로 하면됩니다. 아직 경험적 지원이라고 하네요~ $ pnpm create quasar # experimental support install pnpm $ brew install pnpm $ pnpm --version vi ~/.npmrc 수정 strict-ssl=false save=true save-exact=true shamefully-hoist=true 소스에서 패키지 설치 $ pnpm install $ pnpm outdated ==> 설치 버전과 최신버전 비교 그냥 업데이트 $ pnpm update 최신 업데이트 $ pnpm update -L 패키지 확인 pnpm-lock.yaml 소스 실행 $ pnpm dev ==> 에러 발생 [vite] Internal server error: No ESLint configuration found in /Users/demo/front-end/user_web/.quasar * 해결 방법 프로젝트 root에 .eslintrc.cjs 파일이 있음 rules: { ... } 에 아래와 같이 추가 '@typescript-eslint/no-unused-vars': 'warn', rules: { ... 'no-unused-vars': 'off', '@typescript-eslint/no-unused-vars': 'warn', }, * 환경변수 dotENV을 적용하여 실행하기 $ ENVIRONMENT=local pnpm dev 패키지 오래된것도 한번에 확인하고, 최신 버전도 한번에 설치해주고... 여러가지 장점도 있겠지만, 아직은 잘 모르겠습니다.  장점은 댓글로 달아주시면...

안녕하세요. 클스 입니다. vue에서 변수에 component 객체를 넣었더니, Vue.warn 이 떴다.  component 객체는 많은 정보를 담고 있어서, watch를 하게되면 엄청난 부하가 발생한다. 그래서 친절하게 markRaw를 사용하라고 알려준다. import { markRaw } from 'vue' ; export default { data() { return { layout: null , }; }, watch: { $route: { immediate: true , handler() { this .layout = markRaw( this .$route.meta.layout || DefaultLayout); }, }, }, }; Vue.js에서  markRaw  함수는 객체를 "원시"로 표시하는 데 사용되며, 이는 Vue 반응성 시스템에서 관찰되지 않음을 의미합니다. 특정 성능 문제가 있거나 특정 객체에 대해 Vue의 반응성 시스템을 선택 해제해야 하는 경우에만 사용하십시오. markRaw  함수는 다음과 같이 사용됩니다. const obj = { a: 1, b: 2, }; const rawObj = markRaw(obj); 이제  rawObj 는 반응성이 없습니다. 즉,  rawObj 의 속성이 변경되면 Vue는 렌더링을 다시 트리거하지 않습니다. markRaw  함수는 특정 성능 문제를 해결하는 데 유용합니다. 예를 들어, 매우 큰 객체를 반응성 객체로 선언하면 Vue는 객체의 모든 속성을 추적해야 합니다. 이는 성능 저하의 원인이 될 수 있습니다. 이 경우  markRaw  함수를 사용하여 객체를 반응성으로 선언하지 않고 렌더링을 다시 트리거하지 않도...