OLD/chat-app

OLD/chat-app

[ChatApp] Socket.io를 활용하여 간단한 채팅 어플 만들어보기 - 03. Clerk을 이용한 인증 구현 (+ prisma)

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..

OLD/chat-app

[ChatApp] Socket.io를 활용하여 간단한 채팅 어플 만들어보기 - 02. shadcn-ui를 이용한 스타일링

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..

OLD/chat-app

[ChatApp] Socket.io를 활용하여 간단한 채팅 어플 만들어보기 - 01. 연결 및 간단한 소통

1. 기본 정보 환경 Front: React, Socket.io-client Back: Node, Express, Socket.io 목표 socket.io을 활용하여 간단한 채팅 앱 만들기 React + Node (express) DB x 2. 세팅 React 생성 -> npx create-vite@latest client (VITE) Node 생성 -> npm init -y 라이브러리 설치 front: npm install socket.io-client (socket.io-client) back: npm install socket.io (socket.io) / npm install -D nodemon ts-node-dev @types/express @types/node tsconfig-paths typ..

joseph0926
'OLD/chat-app' 카테고리의 글 목록