[FE] 주식 상세페이지 웹소켓 연결 & 거래창 UI 개선 #204
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
dannysir
reviewed
Nov 27, 2024
Comment on lines
+28
to
+48
| useEffect(() => { | ||
| const handleSocketData = (data: { | ||
| stck_prpr: string; | ||
| prdy_vrss: string; | ||
| prdy_vrss_sign: string; | ||
| prdy_ctrt: string; | ||
| }) => { | ||
| const { stck_prpr, prdy_vrss, prdy_vrss_sign, prdy_ctrt } = data; | ||
| setCurrPrice(stck_prpr); | ||
| setCurrPrdyVrss(prdy_vrss); | ||
| setCurrPrdyVrssSign(prdy_vrss_sign); | ||
| setCurrPrdyRate(prdy_ctrt); | ||
| }; | ||
|
|
||
| socket.on(`detail/${code}`, handleSocketData); | ||
|
|
||
| return () => { | ||
| unsbscribe(code); | ||
| }; | ||
| }, [code]); | ||
|
|
There was a problem hiding this comment.
🟢이렇게 해도 소켓으로 정보가 잘 오나요? 이렇게 했을 때 저는 리렌더가 발생할 때 클린업 코드가 실행되서 서버에 구독해지가 가버려서 이후에 소켓으로 이벤트가 안오는데 ㅜ🥲
Comment on lines
+8
to
+11
| return fetch(url, { | ||
| credentials: 'include', | ||
| headers: { 'Content-Type': 'application/json' }, | ||
| }).then((res) => res.json()); |
There was a problem hiding this comment.
🟢여기서 에러가 발생해도 errorBoundary나 useQuery의 isError로 에러 관리가 되나요?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
✅ 주요 작업
💭 고민과 해결과정
주식 상세페이지 헤더 부분에 실시간으로 데이터가 반영되도록 웹소켓을 연결했다.
백엔드와 한국 투자증권 사이의 웹소켓 연결을 끊기 위해 상세페이지에서 나갈 때 unsubscribe API를 호출해주어야 하는데 useEffect hooks안에서 socket 이벤트를 받고 클린업 함수에 unsbscribe API를 호출해주었다.
주문 요청을 취소할 때 모달을 띄어주는 작업에서 각 리스트 데이터들을 어떻게 모달에 전달해줄 지 고민했다.
다음과 같은 store를 만들어서 모달을 관리할 수 있었다.