대회 프로젝트를 진행하는데, 프론트엔드를 할 사람이 없었다.이번 프로젝트는 한명이 빠지는 바람에 할 사람이 없다. 심지어 JS 자체를 모르는 분도 있다.게다가 제 6회 KDT 해커톤 본선까지 진출해버리면서 구현 작업을 더 디테일하게 해야했다.따라서 필자가 AI 백엔드 기본 구현, 작업 검수에 이어서 프론트엔드까지 전부 구현하고 맡게 되었다. 그러면서 1년 전 기억을 되살려내면서 꾸역꾸역 만들어낸 React 코드이다. 그 중에서도 오늘은 새롭게 알게 된 페이지 전환 애니메이션에 대해서 알아보려고 한다.일단 간단하게 설명하자면 React-trainsition-group이라는 걸 쓴다. 개인적으로 framer는 뚝뚝 끊기는 느낌이 있어서 이게 더 낫다고 판단하여 쓰게 되었다. 코드는 아래와 같다.import ..
[SpringBoot] 스프링 부트 3 구조 이해하기
이제 본격적으로 스프링 부트 애플리케이션을 만들어 봅시다. 전체적인 구조구조는 기본적으로 이렇게 됩니다. 웹 브라우저가 /test라는 get을 요청하면,TestController 클래스는 외부 요청을 분기하여 적절한 작업을 처리하고 값을 다시 반환(TestService)합니다.이는 여느 API의 Request / Response 작업과 같습니다. 그와 붙어있는 TestService 클래스는 데이터베이스 조직이나 비즈니스 로직을 메서드 기반으로 처리하게 됩니다.이것은 요청이 어떤 요청인지 판단하고, 그 요청에 맞는 작업을 실행하는 작업입니다. 이때 만약 Member 클래스가 있다면, MemberRepository 인터페이스가 실제 테이블과 매핑합니다.여기서 매핑된다는 건 객체와 테이블 간 연결되어 실제 데..
[실험] Django vs FastAPI 부하 테스트
STT나 TTS는 제외하고, 단순히 백엔드만의 부하 테스트를 간편하기 위해 Locust로 진행했다.우리 서비스의 동시 사용자 수는 대략 최대 50~100명으로 예상하고 진행했다.# locustfile.pyfrom locust import HttpUser, task, betweenimport jsonimport uuidclass SpeechProcessingUser(HttpUser): # 사용자가 요청 사이에 대기하는 시간 (초 단위) wait_time = between(1, 3) @task def send_speech_text(self): # 무작위 세션 ID 생성 session_id = str(uuid.uuid4()) # 테스트에..
STT API + LangChain Agent + TTS API모든 과정 Edge Function 사용 전체 Html + FastAPI전체 처리 시간: 1018.7060546875 mshtml_test/:354 tts 시간: 2460.004150390625 msfavicon.ico:1 GET http://127.0.0.1:5500/favicon.ico 404 (Not Found)Understand this errorAIhtml_test/:517 전체 처리 시간: 1000.872802734375 mshtml_test/:354 tts 시간: 3073.755859375 mshtml_test/:517 전체 처리 시간: 1459.635009765625 mshtml_test..
쿠키 삭제 - 안됨방화벽 -안됨브라우저 안됨나한테 카메라는 보임등등 별거 별거 다 해봐도 안될 때의 방법 버그가 어디에서 발생하고 있는지를 좁혀가야 한다.스마트폰에 인터넷 직접 연결했을 때는 작동함 → 인터넷 자체는 문제없음컴퓨터 카메라 앱은 작동함 → 카메라 하드웨어/드라이버 정상모든 브라우저에서 안됨 → 특정 브라우저 문제 아님방화벽을 꺼도 안됨 → Windows 방화벽 문제 아님 안전모드 부팅 후 네트워크 캐시 초기화netsh winsock resetnetsh int ip resetipconfig /releaseipconfig /renewipconfig /flushdns 시스템 파일 검사sfc /scannowDISM /Online /Cleanup-Image /RestoreHealth 그 후 재부팅..
Edge Function이라는 기술이 있다. 이 기술은 서버에 무언가 데이터를 저장할 필요가 없을 때, API콜을 프론트엔드와 가까운 쪽으로 만들어서 바로 실행하여 레이턴시를 줄이는 기술이다. 현재 STT - Backend - TTS의 프로젝트를 진행하는데, ChatGPT TTS를 실행할 일이 생겼다.그러나 만약 백엔드에서 TTS를 실행하면, 프론트엔드에 넘겨 줄 때 텍스트 파일이 아닌 오디오 파일로 변환해야 하며, 이는 그만큼의 오버헤드와 레이턴시를 증가시키게 된다. 얼마만큼 차이가 나냐고?그래서 한번 실험해봤다. 결론부터 먼저 보고 가자.Edge Function 적용전체 처리 시간: 1068.966064453125 ms전체 처리 시간: 1832.30712890625 ms전체 처리 시간: 2110.33..