#stt

웹소켓 + Stomp로 채팅 기능을 구현하며

RabbitMQ를 도입하였습니다. 도입의 이유는 스프링 내장 메시지 브로커를 이용하게 되면 인메모리 기반의 동작 방식으로 인해 서버 문제 발생 시 메시지가 유실되거나 확장에도 제한이 있다고 판단하여 도입하였습니다. 현직자 분들이 보기에 이 이유가 적합한 근거가 될까요? 추가로 JMeter로 RabbitMQ를 사용했을 때와 사용하지 않았을 때의 성능을 비교했는데 사용자 100명 기준 성능도 사용하지 않았을 때가 우세했고, RabbitMQ를 사용했을 때는 오히려 아래와 같은 오류가 가끔 발생하며 메시지또한 약 90퍼센트 정도만 저장된걸 확인할 수 있었습니다. 무엇이 문제이며 해결 방안이 있을까요?? java.net.SocketException: Connection reset at java.base/sun.nio.ch.SocketChannelImpl.throwConnectionReset(SocketChannelImpl.java:394) ~[na:na] at java.base/sun.nio.ch.SocketChannelImpl.read(SocketChannelImpl.java:426) ~[na:na] at io.netty.buffer.PooledByteBuf.setBytes(PooledByteBuf.java:255) ~[netty-buffer-4.1.114.Final.jar:4.1.114.Final] at io.netty.buffer.AbstractByteBuf.writeBytes(AbstractByteBuf.java:1132) ~[netty-buffer-4.1.114.Final.jar:4.1.114.Final] at io.netty.channel.socket.nio.NioSocketChannel.doReadBytes(NioSocketChannel.java:356) ~[netty-transport-4.1.114.Final.jar:4.1.114.Final] at io.netty.channel.nio.AbstractNioByteChannel$NioByteUnsafe.read(AbstractNioByteChannel.java:151) ~[netty-transport-4.1.114.Final.jar:4.1.114.Final] at io.netty.channel.nio.NioEventLoop.processSelectedKey(NioEventLoop.java:788) ~[netty-transport-4.1.114.Final.jar:4.1.114.Final] at io.netty.channel.nio.NioEventLoop.processSelectedKeysOptimized(NioEventLoop.java:724) ~[netty-transport-4.1.114.Final.jar:4.1.114.Final] at io.netty.channel.nio.NioEventLoop.processSelectedKeys(NioEventLoop.java:650) ~[netty-transport-4.1.114.Final.jar:4.1.114.Final] at io.netty.channel.nio.NioEventLoop.run(NioEventLoop.java:562) ~[netty-transport-4.1.114.Final.jar:4.1.114.Final] at io.netty.util.concurrent.SingleThreadEventExecutor$4.run(SingleThreadEventExecutor.java:997) ~[netty-common-4.1.114.Final.jar:4.1.114.Final] at io.netty.util.internal.ThreadExecutorMap$2.run(ThreadExecutorMap.java:74) ~[netty-common-4.1.114.Final.jar:4.1.114.Final] at io.netty.util.concurrent.FastThreadLocalRunnable.run(FastThreadLocalRunnable.java:30) ~[netty-common-4.1.114.Final.jar:4.1.114.Final] at java.base/java.lang.Thread.run(Thread.java:842) ~[na:na]

다국어 변역 api사용 저장시 느린 속도 문제

DB에 정보 저장하는데요 ranslationResponse response = restTemplate.postForObject(TRANSLATION_ENDPOINT, request, TranslationResponse.class); api를 통해 영어 중국어 일본어로 변역해서 변역 내용 같이 DB에 저장 하려고 합니다. 그런데 저장할 때 문장이 길어지면 변역 시간이 느려저서 사용자쪽에서 많이 기다려야 하는 상황입니다. 기본 내용만 저장하고 파이널리문에서 번역해서 다시 저장하는 방법을 생각 해서 적용 해보았는데 브라우저에서 결과 받는 속도는 같았습니다.ㅠ 그렇다고 브라우저에서 ok 결과를 받은 후 번역을 비동기로 호출하는 것도 불필요한 비용 발생일 것 같고요 창을 먼저 꺼버리자니 오류 처리 못할 것 같구요 저장중 이라는 알림으로 처리 해야하는건지 사용자 입장에서 개선 하고 싶은데 방법을 잘 모르겠습니다. 혹시 해결방안 알고 계신분이 계시다면 조언 부탁드립니다.

파이썬 플루터 연동 관련 질문입니다

안녕하세요 제가 창업을 위해 앱 개발을 하고싶은데 기존에 파이썬을 배웠어서 파이썬으로는 어느 정도 만들어놨어요 STT와 관련된 앱이여서 speech recognition에 google을 사용해서 구현해둔 상태입니다 앱 개발은 처음이라 플루터로 빠르게 앱 개발을 진행하려고 하는데 궁금한 부분이 생겼습니다 1. 파이썬으로 만든 것을 버리고 google ml kit 혹은 firebase 커스텀 ML 등을 사용해서 다시 만든다 2. 파이썬으로 서버를 만들고 플러터에서 api로 실행시킬 수 있도록 한다 1번과 2번 중에서 어떤 방법이 더 효율적인지 혹은 다른 방법을 써야하는 것인지 추후에 추가적인 부분을 개발한다고 할 때 어떤 방법이 더 좋을지 궁금합니다..! 추가로 2번의 경우는 인터넷에서 가능하다는 말을 봤는데 플루터랑 파이썬이랑 연동이 애초에 좋은 편은 아니라는 말도 봤어서 어떻게 하는 것이 좋을지 잘 모르겠습니다ㅜㅜ

제가 하고있는일이 ”프론트엔드“일까요?

제가 하고있는일이 프론트엔드인가 헷갈립니다. 프론트엔드는 아닌것 같습니다. 저는 프론트엔드 개발자를 지망했으며, react-query, axios등등 서버와의 통신을 하여 웹페이지를 만드는 공부를 하였습니다. 저는지금 코딩교육업체에서 일하고있고. 제가 참여하는 프로젝트는 스크래치(블록코딩)의 소스코드를 이용해 새로운 블록을 만들어 회사의 로봇을 움직이게 하거나 스크래치 gui를 확장, 개선하는 업무를 하고있습니다. 스크래치는 크게 scratch-gui(스크래치의 gui, 구버전의 react사용), scratch-vm(virtual machine, 스트래치에서 사용되는 블록을 정의하고 새로운 블록을 선언하거나, 블록들을 실행가능하게끔 ASTtree로 만들어 실행시키는 프로그램 nodejs임) 두개의 오픈소스 프로젝트로 구성이 되어있고, 제가 참여하는 프로젝트는 이 두개의 프로젝트를 회사에 맞게 확장, 수정시킨 프로젝트에서 작업하고 있습니다. 아직 한달이 채 되지도 않은시점에서 의문이 들었습니다. scratch-gui 가 react, redux를 사용하지만 HTTP통신을 하지도 않는데 이런 업무를 프론트엔드 개발자라고 할수있는가? 입니다. 다른회사들의 요구기술스택을 보면 제가 다니는 회사와의 기술스택과는 많이 동떨어진 느낌입니다. 물론 찾다보면 비슷한 기술스택을 가진 회사도 있겠지요... 하지만 인생의 첫 커리어인데, 꼬여버리지 않을까 걱정입니다.

mvc api 호출 시 thread 상태에 대해서 궁금한 점이 있습니다..

스프링에서 api를 호출할 때 어떤 일이 발생하는지 RestTemplate 사용하여 테스트를 해보았습니다. 제 예상으로는 api를 호출하게 되면 io 작업이 발생하여 컨텍스트 스위칭 작업이 발생하여 호출한 쓰레드는 응답이 올 때 까지 blocking 상태를 유지할 것이라 판단하였습니다. 하지만 VisualVM을 사용하여 모니터링 해본 결과 park 상태로 유지되던 쓰레드가 running상태로 바뀌며 해당 api의 응답이 올 때까지 running상태로 유지되고 있음을 확인하였습니다. (응답 속도가 빨라 5초간 sleep 후 응답하는 api를 호출) 실제로 block이 일어나지 않은 것인지 아니면 실제로 컨텍스트 스위칭이 발생한 것은 커널레벨 쓰레드 쪽이라 visualVM이 이를 캐치하지 못한것인지.. (하지만 자바에서는 유저레벨 쓰레드와 1대1 매칭이 된다고 알고 있는데.. 유저 레벨 쓰레드에도 영향이 있을 것이라 생각합니다.) 머리 속이 너무 혼란스럽네요ㅜㅜ 어떤 부분을 공부하면 될지 키워드라도 알려주실 수 있나요?

커스텀 훅의 설계가 맞는 방식인지 궁금합니다.

현재 요청사항 관련한 페이지를 제작 하고 있습니다. useRequest 라는 훅을 만들어서 비즈니스 로직을 분리시켜주려고 합니다. 요청사항을 불러오는데에 있어서 다음과 같은 사항이 바뀌면 요청사항 리스트들이 바뀌는데요. 1. 페이지 ( 페이지는 검색을 할때 start 값을 결정해줍니다.) 2. 요청 타입 (all, install, as ...) 3. 날짜로도 검색 가능 (start, end) 4. 회사명 5. 회사번호 여기서 저는 useEffect 안에서 요청사항을 처음 불러오고 의존성 배열로 page, 타입, 날짜, 유저정보 를 넣어 이것이 바뀔때마다 요청사항 리스트들이 바뀌고 이것을 리턴해주는 방식으로 작성하였습니다. 제가 고민이되는 부분은 page나 요청 타입과 관련한 상태들을 useRequest 훅안에서 관리하는것이 틀리다고 생각하는데 그렇다면 useRequest(page, requestType) 이런식으로 관련된 상태들을 커스텀훅을 선언할때 모두 넣어주는것이 맞을까요? 다른 커스텀 훅 사례들을 보면 저처럼 많은 인자들을 넘겨주는 경우는 못 본거같아서 제가 작성하는 방식이 맞는지 궁금합니다. 아래 첨부한 코드는 처음에 page, 요청 타입등등을 useRequest 안에서 관리한 경우입니다,, 위에 말씀드린 부분과 아래 첨부한 코드 저는 둘다 잘못된거같은데,, 어떻게 설계해야할지 조언 부탁드립니다.

Next.js SSR + react-query 조합에서의 serializing 에러

안녕하세요! Next.js SSR + react-query 조합을 사용하려고 하는데요, page 컴포넌트 내 getServerSideProps 함수에서 prefetching을 받아온 후에 serializing 에러가 발생합니다. (Next.js는 13버젼입니다.) 에러 내용은 다음과 같습니다. Error: Error serializing `.dehydratedState.queries[0].state.data.headers` returned from `getServerSideProps` in "/top". Reason: `object` ("[object AxiosHeaders]") cannot be serialized as JSON. Please only return JSON serializable data types. 해당 에러 내용으로 구글링을 해보니, 대부분 getServerSideProps 함수 반환 코드에서 return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; 와 같이 dehydrate(queryClient)값을 JSON화 -> Object화를 하라고 하는데요, 이와 같이 사용해도 또 다시 아래와 같은 에러가 납니다. TypeError: Converting circular structure to JSON --> starting at object with constructor 'ClientRequest' | property 'socket' -> object with constructor 'Socket' --- property '_httpMessage' closes the circle Backend API는 Express.js를 사용하고 있으며, res.status(200).json({ data: ~ })와 같은 방식으로 응답을 주고 있습니다. 어떻게 해결할 수 있을까요? 코드 첨부가 안되네요, 아래는 page 컴포넌트가 위치한 파일의 전체 코드입니다. import type { ReactElement } from 'react'; import { dehydrate, QueryClient, useQuery } from '@tanstack/react-query'; import { format } from 'date-fns'; import TopMusicContainer from '~containers/TopMusicContainer'; import Layout from '~layouts/Layout'; import type { NextPageWithLayout } from '~pages/_app'; import TopMusicService from '~services/topMusicService'; import * as MusicType from '~types/musicType'; export async function getServerSideProps() { const queryClient = new QueryClient(); await queryClient.prefetchQuery(['fetchTopMusic'], () => { const params: MusicType.ListRequestType = { filter: 'title', keyword: '', page: 1, limit: 25, time: format(new Date(), 'yyyyMMddHH'), }; return TopMusicService.list(params); }); return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; } const Top: NextPageWithLayout = (): JSX.Element => { const { data, isLoading } = useQuery({ queryKey: ['fetchTopMusic'], queryFn: () => { const params: MusicType.ListRequestType = { filter: 'title', keyword: '', page: 1, limit: 25, time: format(new Date(), 'yyyyMMddHH'), }; return TopMusicService.list(params); }, }); return ( <section> <TopMusicContainer /> </section> ); }; Top.getLayout = function getLayout(page: ReactElement) { return <Layout>{page}</Layout>; }; export default Top;

react axios 로 api호출시 recoil value 전달 실패

회원가입 마지막 단계 페이지인 관심태그 페이지입니다. 이미 nickName, email, phoneNum, pwd, subGroup, workYear는 recoil의 userState에 저장된 상태입니다. 다음 코드를 실행하면 api 호출에는 성공하는데, isSuccess가 false가 되면서 '이메일을 입력해주세요'라는 message가 뜨고 회원가입 실패 alert 창이 뜹니다. 아무래도 recoil value의 전달에 실패한 것 같은데 왜 그럴까요? 참고로 api 주소는 가짜로 적었습니다. function InterestTag() { const [user, setUser] = useRecoilState(userState); const [interestIdx, setInterestIdx] = useRecoilState(userState); const [buttonColor, setButtonColor] = useState("f1f4f7"); const nickName = useRecoilValue(userState).nickName; const email = useRecoilValue(userState).email; const phoneNum = useRecoilValue(userState).phoneNum; const pwd = useRecoilValue(userState).pwd; const subGroup = useRecoilValue(userState).subGroup; const workYear = useRecoilValue(userState).workYear; const handleTagClick = (interestIdx) => { setInterestIdx(interestIdx); setUser({ ...user, interestIdx: interestIdx, isLogin: true, }); setButtonColor("#36f"); }; console.log(interestIdx); const navigate = useNavigate(); const handleSubmit = () => { axios .post("https://abcd.shop/users", { data: { nickName: nickName, email: email, phoneNum: phoneNum, pwd: pwd, subGroup: subGroup, workYear: workYear, interestIdx: interestIdx, }, }) .then((response) => { console.log(response.data); if (response.data.isSuccess === true) { alert("회원가입 성공"); navigate("/"); } else { alert("회원가입 실패"); } }); };