1. 세팅- Clerk: clerk 공식 문서 -> 저는 react로 구현중이므로 react 부분을 참고하였습니다 Welcome to Clerk Docs | ClerkAdd complete user management to your application in minutes.clerk.com- prisma: prisma 공식 문서 -> 저는 mongoDB를 이용중이므로 mongoDB 부분을 참고하였습니다. Prisma | Next-generation ORM for Node.js & TypeScriptPrisma is a next-generation Node.js and TypeScript ORM for PostgreSQL, MySQL, SQL Server, SQLite, MongoDB, and Cockro..
1. 세팅 - 디자인 레퍼런스: WaveeAI - AI Chat Dashboard WaveeAI - AI Chat Dashboard dribbble.com - shadcn-ui 설치 -> shadcn-ui docs 참고 (저는 현재 vite를 사용중이므로 해당 내용 참고하였습니다) 2. 필요한 컴포넌트 구성 디자인 레퍼런스를 보면 크게 왼쪽 사이드바와 메인으로 구성되어있습니다. 저는 여기에 추가적인 무언가를 할 예정이므로 네비바까지 추가하게되었습니다. 또한, 제가 구현하려는것은 결국 채팅앱이기때문에 채팅을 입력하는 컴포넌트와 채팅을 렌더링하는 컴포넌트가 필요했습니다. 3. 코드 분리 기존코드 const SendMessage = () => { const [message, setMessage] = useSt..