NeXT (8) 썸네일형 리스트형 [DISMU] Discord 노래봇의 새로운 기준, AI 노래 플랫폼의 가능성 (프로젝트 소개, 시장 분석) [DISMU] WebSocket을 활용한 공용 플레이리스트 구현 (nest, next) [DISMU] WebSocket을 활용한 공용 플레이리스트 구현 (nest, next)👋 소개안녕하세요! 대학생 개발자 주이어입니다!오늘은 글을 진짜 오랜만에 올리게 되었는데요. 최근에 여러 프로젝트를 제작하면서 개인 공부에 집중하다 보니 블로그 작성하는 주기가 조금blog.juyear.dev이전 글 읽으러 가기! 👋 소개안녕하세요! 대학생 개발자 주이어입니다.오늘은 제가 최근에 제작하여 내부 테스트를 진행중인 DISMU 프로젝트에 대해서 간단히 소개하고 기능 및 사용 기술도 같이 소개해 드리려고 합니다. 그럼 바로 시작하도록 하겠습니다.🛠️ 기술 스택Frontend : Next.js, ts, html, css-.. [DISMU] WebSocket을 활용한 공용 플레이리스트 구현 (nest, next) 👋 소개안녕하세요! 대학생 개발자 주이어입니다!오늘은 글을 진짜 오랜만에 올리게 되었는데요. 최근에 여러 프로젝트를 제작하면서 개인 공부에 집중하다 보니 블로그 작성하는 주기가 조금 길어지게 되었습니다. 그래서 오늘은 제가 최근에 진행중인 DISMU 프로젝트에 대해서 간단하게 소개하고,프로젝트를 제작하면서 사용된 기능중 하나인 "websocket을 활용한 공용 플레이리스트"에 대해서 정리해보려고 합니다. 그럼 바로 시작하도록 하겠습니다.💻 프로젝트 소개제가 현재 진행하고 있는 DISMU 프로젝트는 discord와 music을 합친 단어로, 디스코드 노래봇과 관련된 프로젝트입니다.디스코드를 사용하신다면 아마 한 번 쯤은 노래봇을 사용해보지 않았을까 싶은데요.물론 노래봇이 디스코드의 핵심 기능은 아니지.. [SANGMYUNG AI] 응답 속도 개선을 위한 스트리밍 설계, Next -> Nest -> Python 실시간 렌더링 [Python] 멀티프로세싱으로 처리 속도 올리기 (multiprocessing)이전 글 읽으러 가기! 👋 소개안녕하세요! 대학생 개발자 주이어입니다! 저는 현재 진행 중인 프로젝트에서 단순히 GPT API를 호출해 답변을 받는 구조로 챗봇을 제작하고 있었습니다.하지만 서버 배포 후 테스트 과정에서 무료 vm의 낮은 성능과 콜드스타트 등의 문제 때문에 답변을 기다리는 시간이 너무 길어졌고,이는 사용자 경험을 현저히 떨어뜨리는 문제가 될 것이라고 생각했습니다. 저번 TRAIVEL 프로젝트에서도 비슷한 문제가 있었지만 Next -> Express로 한 단계 통신이었기에 큰 문제가 되지 않았습니다.하지만 이번의 경우 RAG 방식을 사용한 Next -> Nest -> Python으로 두 단계 이상의 통신이었고.. [TRAIVEL] 한국어 전문 여행 일정 생성 AI, TRAIVEL v1.0 출시 [TRAIVEL] 개인 맞춤형 여행 일정 생성 플랫폼 TRAIVEL [TRAIVEL] 개인 맞춤형 여행 일정 생성 플랫폼 TRAIVEL🚩 소개안녕하세요. 대학생 개발자 주이어입니다!오늘은 제가 이번에 진행하는 프로젝트에 대해서 비즈니스 & 마케팅 중심으로 글을 작성해보려고 합니다.흔히 "Product Launch" 라고 불리는 스타blog.juyear.dev이전 글 읽으러 가기! 🚩 소개안녕하세요. 대학생 개발자 주이어입니다!오늘은 약 한달 전에 소개드렸던 "자연어 입력 기반 여행 일정 생성 AI", TRAIVEL 서비스가 드디어 MVP 개발이 끝나고 v1.0으로 정식 출시되었습니다! 🎉이번 글에서는 TRAIVEL의 주요 기능들을 간단하게 소개하고, 앞으로의 계획 함께 링크를 첨부해드릴 예정입니다... [React] react-loading-skeleton 적용 및 응용 (skeleton UI) [React] 선반영, 후처리 유저 경험 및 성능 향상 - 낙관적 UI 업데이트 (Optimistic UI Update) [React] 선반영, 후처리 유저 경험 및 성능 향상 - 낙관적 UI 업데이트 (Optimistic UI Update)[React] AbortController와 zustand로 전역 fetch 취소 구현하기 (feat. 카카오 테크) [React] AbortController와 zustand로 전역 fetch 취소 구현하기 (feat. 카카오 테크)[Express] 레이어드 아키텍쳐 구현하기 (Layered Architeblog.juyear.dev이전 글 읽으러 가기! 👋 소개안녕하세요! 대학생 개발자 주이어입니다!오늘은 skeleton UI에 대해서 간단하게 소개하고, reac.. [React] AbortController와 zustand로 전역 fetch 취소 구현하기 (feat. 카카오 테크) [Express] 레이어드 아키텍쳐 구현하기 (Layered Architecture) [Express] 레이어드 아키텍쳐 구현하기 (Layered Architecture)🚩 소개안녕하세요! 대학생 개발자 주이어입니다!오늘은 레이어드 아키텍쳐 구조화 방법을 사용하여 Express 폴더를 정리해보려고 합니다! 레이어드 아키텍쳐는 실무에서 자주 사용되는 백엔드blog.juyear.dev추천 글 읽으러 가기!🚩 소개안녕하세요! 대학생 개발자 주이어입니다!오늘은 AbortController와 zustand를 사용하여 전역으로 fetch 요청을 관리하는 방법에 대해서 정리해 보려고 합니다! 순서는 fetch 요청을 취소해야 하는 이유, Promise에 취소기능이 없는 이유, AbortController에 대해서.. [Next] usepathname으로 조건부 데이터 처리 적용하는 법 (Conditional Logic) 🚩 소개안녕하세요! 대학생 개발자 주이어입니다!오늘 소개드릴 내용은 하나의 컴포넌트를 여러 페이지에서 다르게 처리하는 방법에 대해서 정리해보려고 합니다. 보통 이런 방법은 props나 context 기반으로 구현하는 경우가 많은데,제가 이번에 구현할 방법은 path-based 즉, 경로 기반으로 구현해보려고 합니다. 이 방법을 사용하게 된 이유는, 현재 진행 중인 프로젝트에서 UI는 거의 동일하지만, 데이터 처리와 같이 기능적인 부분이 조금씩 다른 경우가 있었기 때문입니다. 그래서 "새로운 컴포넌트를 굳이 만들지 않고, 기존 컴포넌트를 재사용할 수는 없을까?" 라는 생각이 들어 이 방법을 도입하게 되었습니다. 🔗 path-basedimport { useRouter, usePathname } from .. [Next] v15 useSearchParams without Suspense 오류 해결 🚩 소개안녕하세요! 대학생 개발자 주이어입니다!오늘은 Next.js v15에서 발생할 수 있는 오류 중 하나인 useSearchParams without Suspense에 대해서 알아보려고 합니다. 저도 프로젝트를 진행하던 도중에 이 오류가 발생하게 되었는데, 미리 이 오류에 대해서 알고 있지 않으면 나중에 많은 수정을 거쳐야 할 수 있기 때문에 이렇게 공유를 해보려고 합니다. ❓ 발생하는 이유는?이 오류가 발생하는 이유는 오류 이름에서 알 수 있듯이 useSearchParams를 Suspense 없이 사용했을 때 발생하는 오류 입니다.next를 사용해보신 분이라면 아시겠지만, Suspense는 기본적으로 컴포넌트나 함수의 동적 처리를 기다리고, 기다리는 동안 fallback 함수 등을 사용하여 로딩을.. 이전 1 다음
