DizzyCode

이전 글에서 언급했듯이 이번 채팅 프로젝트에서는 Zustand를 이용하여 클라이언트 사이드의 전역상태를 관리하기로 했다. 그 중에서도 로그인 파트는 axios를 이용해 백엔드와의 통신을 처리하고 Zustand로 클라이언트에서 로그인 상태를 관리하는 구조를 채택했다.

서버로부터 정보를 받아오고, 요청을 보내는 작업을 리액트 쿼리로 서버 상태를 관리하게 되었는데 Custom Hook과 조합해서 직접 사용해보니 친구 관리 시스템을 구축하는 데에 엄청난 장점들이 있다는 것을 깨달았다.

카카오톡, 디스코드, ChatGPT 등 다양한 웹, 앱 환경에서 파일을 주고 받을 때 정말 유용하게 쓰고 있는 인터렉션 메커니즘이 바로 Drag & Drop이다.

이번 시간에는 드래그 앤 드롭 기능을 확장하여, 파일 프리뷰 기능을 추가함으로써 사용자 경험을 한층 더 향상시키는 방법을 탐구해보자. 파일 프리뷰는 사용자가 업로드할 파일을 미리 보고, 불필요한 업로드를 방지하여 최종 결과에 대한 확신을 줄 수 있다.

이번 글에서는 웹 소켓과 STOMP 프로토콜이 무엇인지, 리액트에서 어떻게 구현하였는지에 관해 정리해보겠다.