[React, Typescript] 채팅 프론트엔드 구현 (3편)
오늘은 마지막 단계인,5. 채팅 데이터에서 채팅 내용이 개행됐을 경우, 처리를 통해 화면에서도 개행 처리 해줌.6. 조합문자(아직 완성되지 않은 문자, 예를 들어 한글, 중국어, 일본어 등)을 사용할 경우, 채팅 입력 시 마지막 글자가 중복 처리되는 것을 막기 위해, 조합상태를 감지하는 로직 구현.부분을 구현하는 과정을 포스팅하려고 한다. 5. 채팅 데이터에서 채팅 내용이 개행됐을 경우, 처리를 통해 화면에서도 개행 처리 해줌.messages 상태변수의 채팅 데이터에서 채팅 내용이 개행됐을 때, '\n'을 태그로 변경처리하여 실제 채팅 컴포넌트 화면에서도 개행처리가 될 수 있도록 설정해줄 것이다.ChattingComponent.tsx 파일에 formatMessage라는 메세지 포멧팅 함수를 정의한다...
2024. 8. 1.
[React, Typescript] 채팅 프론트엔드 구현 (1편)
프론트엔드에서 채팅 기능을 React 라이브러리를 사용하여 Typescript로 구현해보겠다.CSS는 Tailwind CSS를 사용할 예정이다. 포스팅은 총 3번에 걸쳐 작성할 예정이다. 일단, 우리가 구현할 채팅창의 기본적인 기능은 다음과 같다.1. 채팅 데이터에서 채팅을 입력한 사람이 '나'인 경우, 오른쪽 정렬, '타인'인 경우 왼쪽 정렬.2. 채팅 페이지 랜더링 시, 가장 최근에 작성한 채팅이 맨 아래쪽에 제일 처음으로 보이고, 스크롤을 올리면 예전에 작성한 채팅이 보임.3. 새로운 채팅을 전송했을 때, '나'가 작성한 채팅이므로, 오른쪽으로 정렬되고, 채팅 데이터에 내가 작성한 채팅으로 저장됨.4. 채팅 입력창에서 "shift + enter" 입력 시 개행되며, "enter"만 입력 했을 때는 ..
2024. 7. 18.
