프로젝트/데일리 옥션
# 작업 일지 21 / code splitting with named export components
성능 최적화를 위해 코드 스플리팅을 적용하려고 한다. React 에서는 Suspense 와 Lazy import를 지원하기 때문에, 별도 모듈로 분리했던 Router 에 적용해보자. https://reactjs.org/docs/code-splitting.html#named-exports 이 링크를 보면 React.lazy의 경우 export defaul 만을 지원한다고 한다. 별도의 처리를 해주어야 하는데, 여기서는 아래와 같은 방법을 추천하고 있다. 이렇게 변경할 경우 모든 컴포넌트에 대해서 이런 처리를 해주어야 하는데.. 다른 방법은 없을까? https://github.com/facebook/react/issues/14603#issuecomment-726551598 이 글에 나온 코드를 적용하여 해결..
# 작업일지 20 / SSE 알림 기능 상태관리, 화면 렌더링!
1. 현재는 실시간 알림 데이터를 쿼리 데이터로 직접, 즉시 업데이트 하도록 하고, 이를 getQueryData로 가져오고 있다. useQuery를 사용해 가져온 데이터의 경우 이전 쿼리데이터와 현재 쿼리데이터를 비교해서 변경시에 화면에 자동으로 리렌더링이 일어난다. 하지만 위와 같이 가져온 데이터에 대해서는 적용되지 않는다. 이를 수정하기 위한 방법은 useNotification에서 가져오는 notifications 데이터를 useQuery를 사용해서 가져와야 한다. 전체 알림을 조회하는 API가 있으면, 먼저 useQuery로 해당 데이터를 가져오고, setQueryData로 쿼리데이터를 직접 업데이트 하게 된다. 위와 같이 api를 호출하고 성공시 업데이트 하도록 메서드를 사용해주었다. 그런데 이상..
# 작업일지 19 / SSE 연결하여 알림 기능 구현하기
오늘은 지난 시간 다 하지 못한 SSE로 알림 기능 구현하기- 를 진행했다. 1. 알림을 어떤 컴포넌트가 마운트 되었을때 연결하지 말고, 전체 앱에서 전역으로 관리할 수 있도록 호출 위치를 변경해주었다. 그렇게 해야 어떤 페이지에서든 접근이 가능하고, 중복 연결을 방지할 수 있음! 최초로 페이지가 마운트 될 때 SSE라는 컴포넌트가 마운트 되도록 하면서 로그인이 되어있는 경우 SSE를 연결한다. 2. 알림 데이터를 어떻게 관리할까. 우선 알림 데이터는 전역으로 관리하려고 한다. 이유는 먼저 알림 연결 지점은 SSE라는 최상단 컴포넌트이고, 실제로 이 데이터를 사용하는 지점은 메인 헤더와 알림 페이지 두 곳이다. 우선은 fetchSSE 함수를 실행하면 아래와 같은 코드가 실행된다. EventSource 객..
# 작업일지 18 / 조건에 따른 데이터 refetch, 검색 기능 로직 수정
이틀간 SSE와 싸워 지쳤던 나는, 나머지 마무리 하지 못한 기능을 마저 완성하기로 했다. 1. queryClient.refetchQueries(key) 메서드로 실시간 데이터가 업데이트 될 때마다 refetch 되도록 했다. 상품 상세페이지에서 입찰 후 실시간 데이터가 변경이 될 때, 웹소켓으로 받아오지 않는 나머지 데이터에 대해서도 업데이트 되도록 했다. 이제 훨씬 자연스럽고 더 실시간으로 변경되는 느낌이 난다. 위와 같이 key값을 넘기면 간단하게 사용이 가능하다. option에 enabled 라는 속성에 boolean 값을 넣으면 평가에 따라 refetch 하도록 할 수 있는데, 나의 경우 response 데이터가 변경될때마다 상태를 처리하는 것보다 refetchQueries 라는 메서드를 쓰는게..
# 작업일지 17 / SSE 야! 이미 연결 되어있는데 왜 자꾸 끼어들어!
SSE를 활용한 알림 기능을 구현하고 있다. 계속 서버가 다운되는 문제가 있었는데, SSE 연결이 되어있는 상태에서 연결이 끊어지지 않고 계속 되어서 스레드 풀을 잡아먹고, 사용 가능한 스레드 풀을 다 채워서 서버가 자꾸 죽는 것이었다. 이미 SSE가 연결된 상태에서 끊어지지 않는 이유가 뭘까? 클라이언트 측에서는 아래와 같이 EventStrem을 생성한 후 특정 시점에 연결을 종료하려고 하였다. 현재는 EventStream이 메인 헤더 컴포넌트에 종속적이어서, 이 컴포넌트가 마운트 될 때 event를 연결하고, 언마운트될 때 연결을 끊고자 하였다. 그런데 이상하게 서버 로그를 확인해도 그 어디에서도 연결이 끊어진 것을 볼 수가 없고, 컴포넌트가 새롭게 마운트 될 때마다 연결만 가중되는 현상이 있었다. ..
# 작업일지 16 / SSE를 연결해보자! Event source polyfill 라이브러리 사용해보기. 연결은 왜 끊어지지 않는가.
알림 데이터 수신을 위해 아래와 같이 SSE 연결 코드를 작성했다. 로그인시에 그전 알림이 한꺼번에 수신되는건 안되어서, 이벤트를 발생시켜 보았다. 일단 알림을 수신할 대상에게 제대로 알림이 오는 것을 확인! EventSourcePolyfill 을 사용했더니 45000밀리세컨드마다 리커넥팅을 시도한다. 서버가 계속 다운되는 이유는 SSE로 확인되었다. SSE 연결 전 2개에 불과했던 스레드 풀이 연결 후 12개 18개 그리고 맥시멈으로 지정했던 20개를 넘어서면서 에러가 발생하는 것으로 확인되었다. 조금 찾아보니 SSE 연결이 되어있는 상태에서 제대로 연결을 종료하지 않고 새로운 연결을 시도했을 때 이런 문제가 발생할 수 있다고 하고, 45000밀리초마다 새로 연결을 시도하는게 연관이 있는 것 같아 이를..
# 작업일지 14,15 / 웹소켓 연결, 차트에 실시간 데이터 업데이트하기(Chart.js)
1. 다른 상세 페이지로 넘어갈 때 차트가 제대로 업데이트 되지 않는 문제를 발견했다. 그래서 아래와 같이 해결했다. 리액트에서는 key 프로퍼티를 통해 변경된 컴포넌트를 식별한다. key 값을 동적으로 변하는 고유값으로 지정해서 이전 차트와 현재 차트가 다른 데이터라는 것을 알려주었다. 그리고 useMemo로 값이 업데이트 될 때마다 새롭게 계산하도록 했다. 2. react-query 에서 존재하지 않는 페이지임에도 이전 페이지를 캐싱했다가 띄워주는 문제가 있었다. react-query 에서는 key 값이 변하지 않는 이상 일단 이전 캐싱 데이터를 보내준다고 함. 상세페이지의 경우 모든 페이지가 각각 다 다르기 때문에 key 값을 페이지별로 다르게 지정할 필요가 있음. 원래는 key값을 문자열로 설정해..
# 작업일지 12,13 / STOMP publish 요청 성공! + 에러 처리는..?
1. 웹소켓을 적용하는데, 웹소켓을 연결하자마자 데이터를 첫 데이터를 받아오려고 한다. 백엔드에서 publish 가 일어날 때 초기 데이터를 보내주는 엔드포인트를 만들어 주셨고, 아래와 같이 커넥트시에 subscribe 하고, publish 하여 데이터를 받아오도록했다. 자 그럼 이제 경매를 입찰하는 기능은 어떻게 만들 수 있을까!! 일단 sendBid 함수를 별도로 분리하니 커넥션 연결이 비동기적으로 이루어져서 그런지 커넥션연결이 된 상태가 아니라서 제대로 동작을 하지 않았다. 그래서 아래와 같이 커넥션 연결 후 함수를 생성할 수 있도록 ref 객체를 만들어서 전달해주었다. 그렇게 한 뒤 요청을 보내면 일단 동작은 하는 것 같다. 그런데 publish를 하면 구독중인 모든 클라이언트에 데이터를 보내주고..
# 작업일지 11 / 카운터 함수 드디어 고침! 문제는 useEffect에 있었다.
또 카운터 함수. 인터벌 함수가 실행되어야 하지 않는 경우에는 00:00:00 값이 리턴되어야 하는데, 한 번 실행되어서 값이 변경되었다가 인터벌이 종료되는 것 같다. 그리고 나서 다른 정상 동작해야하는 컴포넌트를 마운트하면, 제대로 트리거가 되지 않는지 한 번 새로고침을 해주어야 정상 동작한다. 문제가 뭔지 되짚어보자.. 먼저 타이머 함수가 적용되고 있는 컴포넌트 함수는 아래와 같다. useGetTimeRemain이라는 훅에 종료시간을 전달해서 timeRemain이라는 값을 가져오고 있다. 그 값을 그대로 렌더링하고 있다. 이 useGetTimeRemain이라는 훅은 아래와 같이 생겼다. 먼저 현재 시간을 상태값으로 관리하고, finishedAt - realTime 을 한 timeRemain을 상태값으..
# 작업일지 10 / 웹소켓, STOMP 프로토콜
웹소켓이 사용되는 부분은 경매물품 상세 페이지에서 현재가와 입찰가 추이, 입찰 횟수 등이다. 입찰 요청까지 실시간으로 연결하여 요청을 하게 되었고, 이 부분에 대한 로직을 작성해보았다. 일단 웹소켓이란 양방향으로 통신할 수 있는 통신 프로토콜이다. 일반적인 http 프로토콜에서 서버와 클라이언트의 연결이 단방향인 것에 비해, 웹소켓은 먼저 http를 통한 handshake로 한 번 서버와 클라이언트에 연결이 일어나면 지속적인 요청과 응답이 필요없이 실시간으로 통신이 가능해진다.(연결이 종료되기 전까지.) 주로 채팅 앱이나, 주식 거래 차트 등 실시간으로 통신이 이루어져야 하는 경우 사용된다. 우리는 웹소켓을 기반으로 STOMP 프로토콜을 함께 활용하여 데이터를 주고받기로 했다. (Streaming Tex..