2022/03/13 2

[React] Spring Boot with React 채팅 서버 : 5. components

1. navigation 채팅이 내가 있는 방에 도착하게 될 경우 네비게이션 오른쪽 상단의 messenger icon에 빨간색 원을 그려줌 처음 componenet가 렌더링 될 때, dispatch() 함수를 호출하여 client값을 store에 save함 로그인 성공 이후 localstorage에 저장된 email을 가지고 사용자 정보를 서버에 요청하며 로그아웃 시 email 값이 remove되므로 userdata가 undefined일 경우 login 창으로 redirect 시켜 로그인하도록 함 const Navigation = () => { const email = localStorage.getItem("email"); const { data: userData, error, revalidate, mu..

Javascript/React 2022.03.13

[React] Spring Boot with React 채팅 서버 : 4. redux

/messenger path로 오게될 경우, 서버와의 stomp handshake가 이루어진다. navigation 컴포넌트에서 최초의 핸드쉐이크 요청을 하며, 이후 채팅방에서 채팅을 하게 될경우도 핸드쉐이크 후 반환받은 stomp client를 재사용하여 채팅하는데 사용한다. 이를 위해 컴포넌트간 전역적으로 stomp client 객체를 공유하여 사용한다. 컴포넌트간 전역적 공유 방법에는 여러가지 방법이 있다. 현재 사용하고 있는 swr을 비롯하여 redux 등이 대표적이다 프로젝트간 사용하고 있는 모듈로 진행하는 방식이 일관성있고 좋다. 하지만 stomp client는 단순 데이터가 아니여서 localstorage에 보관하는 방식이 적절하지 않고 json 데이터로 다시 불러오는데도 함수속성을 읽는데 ..

Javascript/React 2022.03.13