프로젝트6 react-router로 채팅방 라우팅하기 리액트는 프레임워크가 아닌 라이브러리이므로 내장 라우팅을 지원하지 않는다. 따라서 라우팅을 위해서는 a태그, window.location을 이용하거나, 라이브러리를 이용해야한다. 라이브러리를 사용하면 SPA환경에서 페이지 새로고침 없이 필요한 컴포넌트만 렌더링되고, 뒤로 가기/앞으로 가기 등이 더 자연스럽게 동작하기 때문에, 라이브러리를 사용해보기로 했다. Next에서는 Link 컴포넌트 혹은 useRouter 하나면 다 됐는데, 리액트에서는 react-router을 쓸 지 react-router-dom을 쓸 지도 정해야한다. 무슨 차이인가 싶어서 찾아본 결과..react-router-dom이 react-router의 확장된 버전이라고 한다.react-router라우팅을 위한 핵심(core) 로직만 포함.. 2024. 12. 10. 채팅방 리스트 목록 구현하기 채팅방 디자인을 어떻게 하는게 좋을까?디스코드 같은 디자인으로, 왼쪽에 채팅방 리스트, 오른쪽에 채팅 리스트를 넣고 디스코드처럼 채팅방 리스트 최상단에 채팅방 추가 버튼을 넣는 게 좋을 것 같다. 채팅방 리스트 목록 디자인하기 shadcn/ui를 참고해서,왼쪽에는 저런 리스트 형태로 채팅방 리스트가 있고 오른쪽에는 채팅창 화면이 보이게 할 예정이다. 더미 데이터를 만들었다.const chatRooms = [ { id: 1, name: "일반 채팅방", participants: 15, lastMessage: "안녕하세요!", lastActivityTime: "방금 전", unreadCount: 3, lastSender: { n.. 2024. 12. 8. shadcn/ui 도입하기 클라이언트에서 ui를 만들어볼건데, 이번 프로젝트는 프론트보다는 백 공부의 목적이 크고, ui 라이브러리도 한번 사용해보고 싶었어서 shadn/ui를 이용해 볼 예정이다.shadn/ui란?react에서 사용할 수 있는 ui 라이브러리이다.npm으로 전체를 다운로드하는게 아니라 원하는 컴포넌트만 따로 다운받고, 직접 수정할 수 있기 때문에 디자인 변경이 쉽다.shadcn/ui shadcn/uiBeautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.ui.shadcn.com그리고 디자인이 무척 깔끔하고 예쁘다 ㅎㅎui 컴포넌트 외에 그래프, 채팅 등도 가능하므로... 2024. 12. 6. 채팅방 스키마, API 만들기 (mongoDB, thunderClient) 채팅방 스키마를 먼저 만들어 보자.채팅방 생성->채팅방 접속->웹소켓 연결 및 구현->메세지 데이터 DB 연결 순서로 진행할 것이다. Room SchemanamepaticipantsuserIduserNameuserProfileImagejoinedAtlastRead (안읽은 메세지 확인용. 마지막으로 읽은 시간)createdAtupdatedAtlastMessage1. 스키마 만들기import mongoose from "mongoose";const roomSchema = new mongoose.Schema({ name: { type: String, required: [true, "방 이름은 필수입니다."], trim: true, }, participants: [ { use.. 2024. 12. 5. 채팅 앱 mongoDB 연결하기 채팅 앱을 구현 중인데, DB를 연결하려고 한다.DB는 어떤걸 쓸까 고민하다가... mongoDB를 쓰기로 결정했다. MongoDB란 무엇인가? 채팅 앱에 mognoDB를 사용한 이유닉네임과 메세지, 시간만 있으면 되므로 관계를 맺고있는 데이터가 적고, 변경되지 않음스키마가 없어서 추후 사진, 파일 전송 등 기능 확장이 용이러닝커브가 낮음읽기/쓰기가 빠르다최근 sqld를 공부하면서 sql이랑 조인 연산을 공부했어서 RDBMS를 이용해서 sql를 직접 사용해보고 싶은 마음도 있었지만, 채팅 앱을 구현하기 위해서는 noSQL이 더 나은 선택인 것 같아서 noSQL로 구현하기로 했다. 채팅 메세지는 noSQL, 채팅방 데이터는 SQL로 구현하는 경우가 있다고 하니 우선 개발해보고 확장이 필요하면 그 때 mys.. 2024. 12. 5. react+socket.io로 채팅 앱 구현하기 프로젝트를 하며 WebSocket을 이용해 채팅 기능을 구현할 일이 생겼는데, 채팅의 기술 원리를 잘 모르고 무작정 개발하니 백엔드와 소통도 잘 안되는 것 같아... node.js로 직접 구현해보며 공부해보기로 했다. 기술 스택client : react, typescriptserver : node.js, express, socket.ioDB: 추후에 mongoDB 연결 예정 완성 화면 미리보기1. react 세팅https://ko.vite.dev/guide/ ViteVite, 프런트엔드 개발의 새로운 기준ko.vite.devvite로 설치해줬다. $ npm create vite@latestNeed to install the following packages:create-vite@5.5.4Ok to pro.. 2024. 12. 4. 이전 1 다음
