문씨네프로젝트

문제 특정 페이지에서 새로고침 시 'GET http://localhost:3000/경로', "Uncaught SyntaxError: Unexpected token '

문제 rabbitMq에서 데이터를 받아서 state에 set하는 과정을 거치는데, 갑자기 데이터가 여러개 들어오면 처음 데이터의 state에 set이 끝난걸 보기 전에 제일 마지막 데이터가 바로 set이 되어 버리는 현상 해결방법 기본적으로 react에서 사용되는 setState들을 동기적으로 동작하지 않는다. 그렇기 때문에 이를 동기적으로 작동하도록 바꿀 수 있는 방법을 찾아보았다 flushSync( () => { setSomeState(queData) }) 이렇게 쓴다면 queData를 set하는게 동기적으로 작동하기 때문에 해당 state가 변하는 것을 바로 확인해볼 수 있다. 주의할 점 : flushSync는 강력한 도구지만, 애플리케이션의 전체적인 성능에 영향을 줄 수 있으므로 신중하게 사용해야..

문제 기존에 만들었던 시세표 내 border 노출은 1개 값 기준으로 되어 있었기 때문에, rabbitMq를 통해 갑자기 여러건의 시세 변경 건이 들어온다면 바뀐 시세의 border가 잠깐 보이고 빛보다 빠르게 사라지는 문제 즉, 현재 시세가 바뀌는 종목이 표시는 되나, 다른 종목에서 시세가 바뀌면 표시칸이 바로 바뀜 현재 시세칸의 border가 바로 바뀌는게 아니라 일정 시간을 두고 차례대로 없어져야함 해결방법 1. 들어온 데이터들의 종목코드를 array에 담았다가, setTimeOut으로 일정 시간 뒤에 삭제하는 방식(push & shift) const [queue, setQueue] = React.useState([]); React.useEffect( () => { // 전달 받은 시세 데이터의 종..

문제 const candleSeriesApiRef = React.useRef(null); ... ... ... candleSeriesApiRef.current.update(currentBar); //'candleSeriesApiRef.current' is possibly 'null'. 해결방법 if문 if(candleSeriesApiRef.current){ candleSeriesApiRef.current.update(currentBar); } if문으로 null을 걸러냄 ! 사용(non-null assertion operator) candleSeriesApiRef.current!.update(currentBar); typescript 내에서 ! 사용은 해당 value가 null 이나 undefined이 ..

문제 React를 spring boot와 같이 war 파일로 말아 올렸을 때 문제 발생 원인 스프링 프로젝트는 구동하면 처음에 무조건 resources/static의 index.html 파일을 찾는다 react는 index.html이 실행된 후 라우터가 해당 페이지에서 논리적으로 페이지를 로딩 => 계속해서 index.html을 사용하며 떠나지는 않는다 스프링 위에서 리액트를 실행했기 때문에 URL 매핑에서 이동하려는 페이지(html)를 찾아야 하는데 이게 없기 때문에 에러를 발생 해결 package 기존 프로젝트 패키지명; import org.springframework.boot.web.servlet.error.ErrorController; import org.springframework.stereot..

사용 목적 매매 페이지를 만들고 나서 실시간 캔들 차트를 구현해보고자 사용 설계 순서 1. 화면 첫 진입시 차트의 초기 데이터를 생성 해준다(redis or DB) 2. 실시간 차트는 기존 매매 페이지처럼 rabbitMq의 queue를 통해 받는다 코드 작성(샘플용) 큐 연결 관련해서는 자세한 코드는 생략하고 subscribe 부분만 기재 import { createChart, IChartApi, ISeriesApi, LineData, CrosshairMode, ColorType } from 'lightweight-charts'; const marketRefSubscriptionRef = React.useRef(null) const [marketQueData, setMarketQueData] = Reac..

문제 : 오류 - JS Bites: React hook is called in a function which is neither a React function or a custom React Hook 문제 해결 React Hook을 사용하고 있다면 Functional Component는 반드시 "대문자" 로 시작해야 한다 custom hook의 이름은 반드시 "소문자"로 시작해야한다.

문제 : cannot read properties of undefined(reading '컬럼명') {e.컬럼명1} {e.컬럼명2} {data[i+1].컬럼명1} {data[i+1].컬럼명2} data[i+1].컬럼명에서 에러 발생 데이터가 아직 들어오직 않았거나, 데이터를 변경되는 시점에 렌더링이 실행되어 i+1에 있어야 할 데이터가 undefined로 정의되어 오류 발생 문제 해결 : && 를 이용하여 해결 { data[i+1] && ( {data[i+1].컬럼명1} {dadta[i+1].컬럼명2} ) } { true && expression } 은 항상 expression { false && expression }은 항상 false

파일 다운로드 : DB에 있는 원본 BLOB 데이터를 가져와 화면에서 다운로드 React const downloadFile = async (event, doc) => { event.preventDefault(); const downloadUrl = '다운로드 url' const result = await axios.get(downloadUrl, {responseType : 'blob'}) // responseType 중요 let blob = new Blob([result.data], { type: result.headers['content-type'] }) let link = document.createElement('a') link.href = window.URL.createObjectURL(blob)..

- 오류 내용 cannot appear as a child of . Add a , or to your code to match the DOM tree generated by the browser. - 해결 방법 JSX에서는 tr과 td를 tbody 없이 사용할 수 없음 th도 thead 없이 사용 불가