[프론트엔드] 제 6회 KDT 해커톤 구현 - 기능들과 회고
KDT 대회 본선이 끝났다.결과는 우수상. 200팀 참가 중 최종 4위가 된 셈이다.솔직히 말하자면 고생은 많이 했지만, 이 정도로도 굉장히 만족할만한 결과였다. 무엇보다 우리 위에 대상 1팀, 최우수상 2팀으로 총 3팀 밖에 없었는데, 그분들도 굉장히 공을 많이 들인게 보여서 솔직히 그럴만 했다고 생각한다. 그러나 반성을 안 할 수는 없는 법이다.프로젝트를 하면서 백엔드 뿐만 아니라, UI / UX에 대해서 프론트쪽에서 기능을 추가한 것들이 매우 많았다.특히나 React를 다루면서 Html과는 다른 State에 대한 개념을 잘 다루게 되었고, 그러면서 동적 웹페이지에 대한 개념이 많이 늘어난 것 같다. 그래서 오늘은 프로젝트를 하며 추가했던 기능들 중 프론트엔드 편에 대해 정리해보고, 다음에는 백엔드 ..
WebSocket을 연결하면 단일 요청에 비해 연결 횟수가 줄어들어서 http에 비해서 빨라진다는 건 대부분 알고 있을 것이다.그러면 얼마나 빨라지는지 우리 서비스에서 실험해봤다. TTS edge function과 React를 웹소켓으로 연결했을 경우Response from backend: {response: '안녕하세요! 만나서 정말 반가워요. 요즘 어떻게 지내고 계신가요?'}useSpeechRecognition.js:126 tts2: 3860.410888671875 msuseSpeechRecognition.js:163 Response from backend: {response: '알겠어요! 그럼 계속 이야기 나눠볼까요? 요즘 어떤 일들이 있으셨나요?'}useSpeechRecognition.js:126..
대회 프로젝트를 진행하는데, 프론트엔드를 할 사람이 없었다.이번 프로젝트는 한명이 빠지는 바람에 할 사람이 없다. 심지어 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..