들어가며React + Mobx로 개발하다 보면 비동기 작업들 사이에서 순서 보장이 필요할 때가 있다.IAMBIT 기존 레거시는 각각 store마다 공통 state가 복제되어 있었다...이를 개선하기 위해 여러 개의 store에서 공통으로 사용하는 state들을 한 곳에서 중앙 관리 처리했다.그런 데문제 상황MainStore에서 심볼을 변경하고, 그 다음에 WebsocketManager에서 새로운 심볼에 대한 웹소켓 구독을 해야 하는 상황이었다.// 비즈니스 로직을 덜어낸 예시 코드class MainStore { @observable currentSymbol: string = "비트코인"; @action async changeSymbol(newSymbol: string) { runInAction..

IAMBIT 거래소는 pretendard font를 메인으로 사용한다.pretendard는 숫자의 가로길이가 가변적인 폰트이다.때문에 아래 그림과 같은 문제가 발생한다. 이를 보고 디자이너님과 해결방안에 대해 이야기 나누어 보았다.가변폭 pretendard를 유기하고 고정폭 폰트로 수정한다. => 디자이너 리소스 많이 소모숫자만 고정폭 폰트로 수정 =>약간 짜친다, 디자이너 리소스 조금 소모때문에 다른 대안이 있나 싶어 찾아보니 pretendard 뿐만 아닌 OpenType을 지원하는 모든 폰트에 고정폭을 적용할 수 있는 방법이 있었다.nextjs, tailwindcss 환경에서 font OpenType 수정 방법이다.먼저 tailwind.config.ts 파일에 새로운 클래스를 추가한다.extend: ..

트레이딩 뷰 사용하다 보면 tvwidget관련 메서드 사용하다가 신기한걸 볼 수있다 웹소켓이 준비 되기 전에 관련 메서드를 사용해 버리면 차트가 터져버린다... 그럴 때 웹소켓 상태 확인하는 promise 만들어서 리턴하고setTimeout(()=>callback(), 0) 처럼 setTImeout으로 감싸 macrotaskQueue에 던져놓으면 microtaskQueue에 들어간 모든 promise들이 처리되기 전까지 대기 타게 처리할 수 있다. 뭔소린지 모르겠으면 아래 글 보세요 https://donghyk2.tistory.com/151 js는 비동기 큐가 2개다?vanilla JS로 핑퐁게임 SPA 사이트 프로젝트 하다가 겪은 일이다.커스텀 게임 방 리스트 페이지위 페이지에선 2가지 비동기 동작이 ..

관련 자료가 진짜 없고 한국어로 된 최신 정보는 거의 없다시피 해서 정리한다.일단 거래소에서 사용하기 위해 차트, websocket streaming 렌더링 지원 하는 라이브러리를 찾는다면 트레이딩 뷰의 무료 고급 차트가 맞다.https://www.binance.com/en/futures/BTCUSDThttps://www.bitget.com/futures/usdt/BTCUSDT이 분야 최고 거래소들을 보면 죄다 tradingview 라이브러리를 사용 중이다.근데 바로 쓸 수가 없다. 비공개 리포에 저장되어 있음회사에서 public 용도로 사용한다는 증명이 담긴 신청서를 제출하고 허가받아야 한다.아래 링크에서 신청하자https://www.tradingview.com/advanced-charts/양식대로 작..

보안 정책에 의거해 프로덕션 서버에서 localhost를 cors처리해 둔상황에서 유용한 방법을 소개한다.cors는 서버 to 브라우저에서 발생하는 오류니 dev환경에서 localhost에 띄워둔 next server를 proxy로 우회하는 방법이다.const nextConfig = { async rewrites() { if (process.env.NODE_ENV !== "development") { return []; } return [ { source: "/proxy/:path*", destination: `${process.env.NEXT_PUBLIC_SERVER_URL}/:path*`, }, ]; },}export default nextConfig 이처럼 구성하면 de..

프론트 개발하다 보면 array를 뷰에 표시할 때마다 시뻘건 오류로 unique key props를 설정하라는 워닝을 보게 된다.backend에서 unique키 안주면 대충 index나 nanoid로 때우던 본인은 이번에 key props관련으로 꿀잼 이슈를 겪게 되었다.문제 상황아래와 같은 코드를 사용하여 테이블을 렌더링 하고 있었다 {futuresCoinData.map((coin) => ( { changeSymbol(coin.name); }} > {coin.name} ))}위 코드에서 nanoid()를 사용하여 각 요소에 고유한 키를 부여하고 있다.c..