개발 로그

리액트는 프레임워크가 아닌 라이브러리이므로 내장 라우팅을 지원하지 않는다. 따라서 라우팅을 위해서는 a태그, window.location을 이용하거나, 라이브러리를 이용해야한다. 라이브러리를 사용하면 SPA환경에서 페이지 새로고침 없이 필요한 컴포넌트만 렌더링되고, 뒤로 가기/앞으로 가기 등이 더 자연스럽게 동작하기 때문에, 라이브러리를 사용해보기로 했다. Next에서는 Link 컴포넌트 혹은 useRouter 하나면 다 됐는데, 리액트에서는 react-router을 쓸 지 react-router-dom을 쓸 지도 정해야한다. 무슨 차이인가 싶어서 찾아본 결과..react-router-dom이 react-router의 확장된 버전이라고 한다.react-router라우팅을 위한 핵심(core) 로직만 포함..

채팅방 디자인을 어떻게 하는게 좋을까?디스코드 같은 디자인으로, 왼쪽에 채팅방 리스트, 오른쪽에 채팅 리스트를 넣고 디스코드처럼 채팅방 리스트 최상단에 채팅방 추가 버튼을 넣는 게 좋을 것 같다. 채팅방 리스트 목록 디자인하기 shadcn/ui를 참고해서,왼쪽에는 저런 리스트 형태로 채팅방 리스트가 있고 오른쪽에는 채팅창 화면이 보이게 할 예정이다. 더미 데이터를 만들었다.const chatRooms = [ { id: 1, name: "일반 채팅방", participants: 15, lastMessage: "안녕하세요!", lastActivityTime: "방금 전", unreadCount: 3, lastSender: { n..

프로젝트를 하며 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..