데브허브 | DEVHUB | How To Make MERN Stack Chat App With Socket.io | Build Real-Time Full Stack Chat ApplicationHow To Make MERN Stack Chat App With Socket.io | Build Real-Time Full Stack Chat Application
- MERN 스택(MongoDB, Express, React, Node.js)과 Socket.io를 활용하여 실시간 풀스택 채팅 앱을 구축하는 튜토리얼입니다. 🚀
- Socket.io는 클라이언트와 서버 간의 양방향 실시간 통신을 가능하게 하여 메시지 즉시 전송 및 사용자 온라인/오프라인 상태 업데이트를 지원합니다. 💬
- 앱은 로그인/회원가입, 사용자 목록, 채팅창, 프로필 보기(이미지, 이름, 자기소개, 미디어 갤러리), 이미지 전송, 사용자 검색 기능을 포함합니다. 🖼️
- 두 사용자 간의 실시간 메시지 전송 및 미확인 메시지 카운트 기능이 시연되었습니다. 🔔
- 프로젝트 완료 후 Vercel을 통해 무료로 온라인 배포하여 이력서나 대학 프로젝트로 활용할 수 있습니다. 🌐
- 클라이언트 측(React + Vite) 설정은 프로젝트 생성,
react-router-dom 설치, Tailwind CSS 통합, Google Fonts(Outfit) 적용, 스크롤바 숨기기 등을 포함합니다. 🛠️
- 프로젝트 구조는
src 내에 components, lib, pages 폴더를 생성하고, homepage, loginpage, profilepage 등의 페이지를 만듭니다. 📂
assets.js 파일은 이미지, 아이콘 및 사용자/메시지 더미 데이터를 관리하여 쉽게 접근할 수 있도록 구성됩니다. 📦
main.jsx 파일에서 react-router-dom의 BrowserRouter를 사용하여 라우팅을 활성화합니다. 🛣️
- Node.js 초보자를 위한 별도 튜토리얼 링크를 제공하여 학습을 돕습니다. 📚