이번 블로그 포스트에서는 Redux Thunk를 이용하여 웹 소켓 채팅 애플리케이션을 구현하는 방법에 대해 알아보겠습니다.
목차
소개
WebSocket을 이용한 실시간 채팅 애플리케이션을 개발할 때, 서버와 클라이언트 간의 양방향 통신이 필요합니다. Redux Thunk는 Redux 미들웨어로 비동기 작업을 처리할 수 있도록 해줍니다. 이를 이용하여 웹 소켓 채팅 애플리케이션을 간편하게 구현할 수 있습니다.
설치 및 세팅
먼저, 프로젝트 폴더에서 Redux와 Redux Thunk를 설치해야 합니다.
npm install redux redux-thunk
설치가 완료되면 Redux와 Redux Thunk를 임포트하고, Redux Store를 생성합니다.
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
const store = createStore(reducers, applyMiddleware(thunk));
여기서 reducers는 Redux 애플리케이션의 리듀서 함수를 포함하는 파일입니다. 그리고 applyMiddleware 함수를 사용하여 Redux Thunk를 미들웨어로 등록합니다.
코드 구현
소켓 연결 액션
먼저, 소켓 연결을 위한 액션을 만들어보겠습니다. 이 액션은 웹 소켓을 열고 현재 사용자를 식별하기 위한 고유 식별자를 생성합니다.
export const connectSocket = () => (dispatch) => {
const socket = new WebSocket('ws://example.com');
const userId = generateUserId(); // 고유 식별자 생성
socket.onopen = () => {
// 웹 소켓이 열리면 소켓 연결 완료 액션을 디스패치
dispatch({ type: 'SOCKET_CONNECTED', payload: { socket, userId } });
};
socket.onmessage = (message) => {
// 웹 소켓 메시지 수신 시 채팅 메시지 액션을 디스패치
dispatch({ type: 'RECEIVE_MESSAGE', payload: message });
};
};
위 코드에서 connectSocket 액션은 Redux Thunk를 이용하여 비동기로 처리됩니다. 소켓이 열리면 SOCKET_CONNECTED 액션을 디스패치하고, 소켓에서 메시지를 받으면 RECEIVE_MESSAGE 액션을 디스패치합니다.
채팅 메시지 전송 액션
다음으로, 채팅 메시지를 전송하는 액션을 만들어보겠습니다. 이 액션은 사용자가 입력한 메시지를 웹 소켓을 통해 서버로 보냅니다.
export const sendMessage = (message) => (dispatch, getState) => {
const { socket, userId } = getState().chat;
const data = {
userId,
message,
};
socket.send(JSON.stringify(data));
};
위 코드에서 sendMessage 액션은 현재 Redux 스토어의 상태에서 소켓과 사용자 ID를 가져와 메시지를 JSON 형식으로 패킹하여 전송합니다.
결론
Redux Thunk를 이용하여 웹 소켓 채팅 애플리케이션을 구현하는 방법에 대해 살펴보았습니다. Redux Thunk를 사용하면 비동기 작업을 효과적으로 처리할 수 있으며, 웹 소켓과 같은 실시간 통신 기능도 쉽게 구현할 수 있습니다. 이를 통해 실시간 채팅 애플리케이션 개발에 도움이 되었기를 바랍니다.