프로젝트

# 작업일지 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..

# 작업일지 9 / Chart.js 적용, 경매가 유효성 검사

1. 경매시에 입찰가 추이를 확인할 수 있도록 그래프를 도입했다. 라이브러리는 Chart.js 를 사용했다. Chart.js 자체를 도입하는 것은 일단 어렵지 않았다. 여러개의 그래프 관련 라이브러리가 있었는데, 그 중 가장 많이 사용하는 것을 보여지고 공식문서도 굉장히 친절하게 잘 나와있다보니 위와 같은 간단한 수준의 그래프는 쉽게 적용이 가능했다. 리액트에서 적용하기 위해 추가한 라이브러리는 chart.js, react-chartjs-2 그리고 실제 데이터를 넣기 전 간단한 더미 데이터를 생성할 수 있는 faker-js 정도. Chart 컴포넌트에서 차트 생성에 필요한 요소를 아래와 같이 import 해주었다. 위 사진과 같이 line으로 된 그래프를 그릴 것이기 때문에 해당하는 컴포넌트를 가져왔다...

#8 작업일지 / interval함수 리팩토링, 게시글 상세페이지 통신 로직 작성

1. 타이머를 카운트 하는 함수가 00:00:00이 되면 실행이 종료되어야 하는데, 마이너스까지 내려가고 있다. 조건을 입력하면 콜백함수를 delay시간동안 반복 실행시켜주는 useInterval 훅을 리팩토링함. 의존성 배열에 shouldContinue를 넣어줌으로써 shouldContinue의 상태가 변하거나 컴포넌트가 언마운트 될 때 클린업하는 함수를 실행한다. useEffect에서 리턴하는 함수는 컴포넌트 언마운트시에 실행되는 cleanUp함수이다. (공식문서 참고) shouldContinue 라는 것을 의존하기 위해서는 상태값으로 저장해서 관리할 필요가 있었다. 특정 조건이 되면 상태가 변하도록 하고, 이에 따라 interval 함수가 종료되어야 하기 때문이다. 그래서 아래와 같이 useGetT..

모락모락 리팩토링 - 리팩토링 과정 기록 (디렉토리 구조, 아키텍처, 중복코드, 버그 픽스 등)

지난 달부터 매주 토요일, 모락모락 팀원들과 모여 리팩토링을 진행중이다. 뜯어 고치고 싶은 내용은 정말 많은데, 시간이 많이 없다보니 야금야금 고쳐가는 중이다. 저희 리팩토링 하시죠!! 하고 제안하고나서 프론트는 이런거 합시다~ 라고 정리했던 문서. 원래 프론트가 3명이었는데, 한 분은 연락이 안되셔서 2명이서 작업중이다. 본 프로젝트 진행 기간에는, 대화도 많이 없고 서로 무엇을 작업하는지 어려움은 없는지 이런 얘기를 잘 안했었는데 (너무 아쉽) 요즘은 만날 때마다 근황 토크도 하고, 어떤 코드가 더 나은지 서로 리뷰도 하면서 재미있게 진행중이다. 오히려 프로젝트 기간보다 지금이 더 스트레스 없고 길게 조금씩 개선한다는 생각이라 마음도 편하다. 아무튼 지금까지 해온 작업은, 프로젝트 폴더 구조 뜯어 고..

# 작업일지 7 / 카운트다운 함수 만들기

리액트 훅에서 setInterval 사용하면 의도대로 동작하지 않는다. 이유는 : https://overreacted.io/making-setinterval-declarative-with-react-hooks/ 여기 참고. 간단하게 정리하면, state가 계속 변하면서 무한 렌더링에 빠지기 때문에. 그래서 커스텀 훅을 만들어서 쓴다. 리렌더링이 되어도 값을 기억할 수 있는 ref 를 활용한다. 이를 활용하지 않으면, 아래처럼 너무 많이 렌더링이 발생했다고 에러를 뿜는다. 위 글을 참고해 useInterval 이라는 훅을 만들었다. 이 함수는 delay 시간동안 callback 함수를 반복해서 실행시킨다. 여기에 추가적으로 shouldContinue 라는 인자를 통해 setInterval이 실행될 필요가 ..

# 작업일지 6 / query parameter 에 접근하기

내가 담당하게 된 검색 및 검색 결과 페이지. 검색 페이지에서 입력한 카테고리와 검색 키워드를 토대로, 검색 결과를 요청해 이를 렌더링 해주어야 한다. 다른 페이지로 이동이 필요하기 때문에 카테고리 값과 키워드 값을 어떻게 관리해야하나 고민이 되었음. 페이지 이동시에도 값을 기억하려면 전역 상태를 활용하면 되는데, 이러면 링크를 다른 사람에게 공유했을 때 제대로 동작하지 않는 오류가 발생할 수 있음. 따라서 uri 의 쿼리 파라미터를 가지고 검색을 하도록 구현했다. 쿼리 파라미터를 가져오는 훅을 만들었다. 이를 검색 결과 페이지에서 아래와 같이 활용한다. 검색 결과는 리스트이기 때문에, 각 리스트 item 에게 해당 response를 뿌려서 렌더링을 해줘야 함. 뭔가 이번 프로젝트에서는 데이터를 요청하는..