Dani's Dev TokTok

들어가며리액트에서 달력을 구현할 수 있는 여러가지 라이브러리 중 react-datepicker 를 이용해서시작 날짜와 종료 날짜를 선택할 수 있는 즉, 날짜를 범위로 선택할 수 있는 달력을 구현해보고자 한다.이것을 이용해서 여행 일정 관리나, 날짜를 선택해야 하는 예약 시스템을 구현할 수 있을거라 생각한다. 달력 만들기 먼저 리액트 프로젝트에서 npm이나 yarn 을 이용해서 date-picker 를 다운로드 한다.npm install react-datepickeryarn add react-datepicker 만약 날짜를 한국어로 설정하고 싶다면  date-fns 에서 해당 기능을 제공하므로 같이 다운로드 한다.npm install date-fnsyarn add date-fns 기본 달력 표시DatePi..

들어가며React 의 특징 중 하나는 Virtual DOM(가상돔) 를 가지고 있다는 것이다.리액트가 가상돔으로 어떻게 렌더링을 하는지 알아볼 것이다 React 의 렌더링 프로세스Virtual DOM (가상 돔)DOM 을 변경하는 작업이 많아질수록, 브라우저는 많은 연산을 수행해야 하고 이는 성능 저하로 이어질 수 있다.React 같은 라이브러리는 가상 DOM 을 사용해서 이 문제를 해결한다.  Virtual DOM(가상 돔) 은 실제 DOM의 복사본으로, JS 객체 형태로 메모리 안에 저장된다.가상돔은 브라우저의 실제 DOM을 조작하기 전에 변경 사항을 미리 계산하고,최소한의 작업만 실제 DOM 에 적용하도록 도와준다.이를 통해서 성능을 최적화하고 빠른 UI 업데이트를 할 수 있게 해준다. React ..

들어가며React Hook Form 은 비제어 컴포넌트를 기반으로 동작하는 폼 관리 라이브러리다.React 에서 form 을 쉽게 관리할 수 있도록 해주며, form의 상태 관리와 유효성 검사를 간단하게 만들어준다. React Hook FormReact Hook Form 은 다음의 커맨드로 설치할 수 있다.npm install react-hook-form React Hook Form 은 useForm 이라는 훅을 통해 폼 상태, 검증 및 제출 로직을 관리한다.import { useForm } from 'react-hook-form' React Hook Form 에서 주로 사용되는 메서드는 아래와 같다.register : 입력 요소에 연결하기 위한 함수. 이 함수를 통해서 입력 요소에 유효성 검사 규칙을 ..

들어가며React 로 form 을 구현할 때 제어 컴포넌트와(Controlled Component) 와 비제어 컴포넌트(Uncontrolled Component) 라는 개념을 접할 수 있다.이 두 방식은 입력 값을 관리하는 방법에서 차이가 있으며, 상황에 따라 적절한 방법을 선택해야 한다.이번 포스팅에서는 이 두 개념을 비교할 것이다. 제어 컴포넌트와 비제어 컴포넌트제어 컴포넌트(Controlled Component)입력 값이 React 의 state에 의해서 제어되는 컴포넌트입력 값이 변경될 때마다 onChange 이벤트로 상태 업데이트하고, 업데이트된 상태로 다시 렌더링 한다. 작동 원리사용자가 input 에 값을 입력하면 onChange 이벤트가 호출된다.이벤트 핸들러가 새로운 입력 값을 React..

들어가며 리팩토링 하기 전의 채팅방 기능에는 누군가가 모임에 들어갔을 때, 즉 채팅방에 입장했을 때 입장했다는 메시지가 없었다.이런식으로 누군가가 들어왔음에도 어떤 사람이 입장했는 지에 대한 메시지가 없었다.사용자 경험을 개선하기 위해 입/퇴장 메시지를 표시하는 것으로 리팩토링을 했다. 리팩토링 과정 이 프로젝트에서는 특정 모임을 생성하면 그 모임에 대한 채팅방이 열리고,누군가가 모임을 가입했을 때 채팅방에 입장하는 구조였다. 그러므로 입/퇴장 메시지를 받기 위해서는 누군가가 모임을 가입/탈퇴 했다는 정보가 필요했다.즉, 사용자가 보내는 메시지가 아니라 일종의 시스템? 메시지를 받아 올 수 있도록 서버에서부터 코드를 고쳐야 했다.담당 백엔드 분과 대화해서 그렇게 할 수 있도록 서버 쪽 코드를 고쳤다. 고..

1. 문제 발생기존에 특정 채팅방에 접속했을 때, 소켓이 열리도록 한 로직을접속해있지 않은 채팅방의 메시지도 실시간으로 업데이트 하기 위해 웹소켓을 여는 로직을 커스텀 훅으로 만들어서채팅 목록 페이지에 접근했을 때 소켓이 열리도록 로직을 수정했다.그 과정에서 특정 채팅방(A) 를 나가서 다른 채팅방 (B)를 옮겨갔음에도 B 채팅방에 보낸 메시지가 A 채팅방에도 전달되는 버그가 있었다.2. 원인 추론위에서 언급했다시피 기존에 특정 채팅방에 접속해야 열리는 소켓을 커스텀 훅으로 만들어서 따로 파일을 만들었다. 아래는 변경하기 전 코드의 일부다.onConnect 내의 로직을 변경했다. 기존에는 특정 채팅방에 대한 구독만 했기 때문에 그냥 chatroomId을 redux 의 state에서 받아왔다.  cons..

1. 문제 발생프로젝트를 배포하고 나서 채팅 테스트를 하는데 실시간 채팅에서서로 동시에 채팅을 하고 있음에도상대방 메시지 수신 시간과 나의 메시지 송신 시간이 일치하지 않은 현상이 있었다.(로컬에서는 생기지 않았던 문제!! ㅠㅠ)분명 RDS 에는 한국 기준 보낸 시간으로 잘 저장이 되는데 수신할때나, DB 에서 불러올 때는 시간이 이상하게 변해있었다. (나중에 알고보니 UTC 시간으로 변환되서 오던 것이었다.) 2. 원인 추론로컬에서는 저 현상이 없었어서 혹시나 rds 에 저장되어 있는 시간이 이상한걸까? 싶어서백엔드 담당분께 rds 에 시간이 어떻게 저장되어 있는지 여쭤봤다 그러나..한국 기준 시간으로 이쁘게 잘 저장되어 있었다.그래서 처음에는 내가 시간 로직을 이상하게 한걸까? 싶어서 로컬에서 엄청 ..

프로젝트 발표 후, 리더님들께 피드백을 받았을 때두 분의 공통된 의견이채팅 목록 페이지의 모바일 UI 가 좋지 않다고 말씀하셨다. 납득이 갔던 것이 나도 UI 를 만들면서 음.. 이거 좀 이상한디? 라고 생각했기 때문이다.두 분의 의견을 받았기 때문에 해당 UI 를 고치기로 했다. 웹뷰에서는 왼쪽에는 내가 참여한 채팅방의 목록, 오른쪽에는 접속해있는 채팅방을 보여주는 것으로 구성했다.이것까지는 나쁘지 않은데 문제는 모바일 UI에서 였다. 기존 모바일 UI 에서는 채팅방 목록을 상단에 빼고, 하단에 접속중인 채팅방으로 구성했다.그리고 참여하고 있는 채팅방 목록이 가로 길이보다 길어지면 터치로 이동할 수 있게 구현했다. 사실 화면을 구현하면서도 찝찝함이 있었는데...너무너무 구리다는 것이었다!하지만 시간에 ..

1. 문제 발생웹소켓을 연결하고 채팅 테스트를 하던 중특정 컴퓨터에서 메시지가 두 번 보내지는 오류가 있었다.그런데 다시 새로고침을 하면 메시지가 한 개로 보였다.DB의 채팅 메시지 테이블에도 메시지는 하나만 저장되어있었다. 2. 원인 추론메시지의 상태를 저장하는 것으로 redux-toolkit 을 사용했다.거기서 메시지를 보내고 받는 것을 setMessages 라는 액션을 이용해서redux 의 messages 라고 지정된 state 에 저장했다.그리고 그 messages 는 메시지를 렌더링 하는 컴포넌트에서 map 메서드를 이용해서출력되도록 구성했다.  return ( { messages?.map((message, index) => ( )) ..

이번에 부트캠프에서 하는 프로젝트에서 채팅 기능을 맡았다.프론트엔드는 리액트, 백엔드는 스프링부트를 사용했기 때문에이전에 배웠던 socket.io 가 아니라 stomp 를 사용했다.Stomp 는 Simple Text Oriented Messaging Protocol로 웹소켓을 기반으로 하는 메시지 전송 프로토콜이다.  챗지피티 선생님께선 socket.io 랑 stomp 의 차이를 이렇게 말씀하셨다.  위 부분에 대해서는 웹소켓을 더 자세히 공부해야 잘 이해를 할 것 같다.어쨋든 요약하자면1. 서버가 스프링부트임2. 스프링부트에서는 웹소켓을 사용할 때 stomp 를 많이 사용한다.3. 그래서 클라이언트에서도 그것에 맞춰서 stomp 를 사용했다. 이렇게 되겠다. 리액트에서 stomp 를 이용하려면 당연히 ..