대단한 동현 블로그
javascript 비동기 순서보장 잡기술
<frontend> 2024. 9. 29. 15:01

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

article thumbnail
트레이딩뷰 무료 고급 차트 라이브러리 신청&사용
<frontend> 2024. 9. 29. 14:54

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

console.log는 비동기일수도 아닐수도 있습니다
<language>/javascript 2024. 9. 29. 14:25

이게 말이냐 똥이냐 싶겠지만 진짜다. 트레이딩 뷰 라이브러리의 불친절한 공식문서를 해독하며 프로덕션에 붙이다 분봉이 제대로 붙지 않는 상황이 있어서 여기저기 콘솔을 찍어봐도 문제를 찾을 수가 없었다. js 이벤트루프 특성상 이 스코프 안에서 다른 요소가 간섭할 방법이 없다. 공유자원을 가지지 못하는 사실상 멀티프로세스에 가까운 web worker때문도 아니고, event bus 부분도 떼버려서 문제가 없었다. 진짜 귀신이 곡할 노릇인데… 범인은 console.log였다… object의 참조를 찍을때 이후에 그 object가 변하면 변한 값으로 찍히더라..왜 그러냐면 브라우저 최적화를 위해 그 라인에서 바로 찍지 않고 작업이 종료된 이후에 찍을 수도 안 찍을 수도 있다.. 브라우저마다 다름let obj =..

nextjs proxy 적용해서 cors 우회하기
<frontend>/next.js 2024. 9. 21. 00:36

보안 정책에 의거해 프로덕션 서버에서 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..

javascript class 업캐스팅
<language>/javascript 2024. 9. 21. 00:24

상속js에서 상속은 c++처럼 메모리 블록단위가 아닌 프로토타입이라는 단방향 링크드리스트 기반으로 구현된다. 때문에 c++에서는 포인터 사이즈를 변경해 구현하는 업캐스팅을 js에서는 아래와 같이 프로토타입 변경을 통해 구현할 수 있다 프로토타입 체인상속받은 부모 객체를 못 찾았을때 계속 타고 올라가 찾는 것.(null에 도달할 때까지)업캐스팅// 부모 클래스 function Animal(name) { this.name = name; } Animal.prototype.makeSound = function() { console.log("Some generic sound"); }; // 자식 클래스 function Dog(name) { Animal.call(this, name); // 부모 생성자 호출 // ..

article thumbnail
협업 툴 사용해서 효율적으로 일하기
<memo> 2024. 9. 21. 00:08

입사 후로 두달동안 정신없이 일만 한 결과 만족할만한 성과가 나왔다. 아래는 두달동안 처리한 linear ticket임.jira 나 linear같은 협업 툴을 처음 사용해 봤는데 적응하고 나니 매우 효율적으로 작업이 가능했다. 본인의 방법에 대해 소개한다해당 티켓에서는 그 일만 하기개발 티켓을 하나 만들고 작업할때. 개발 하다보면 추가하면 좋을 점들이 이것저것 생각난다. 이런걸 그 티켓에서 작업하지 않고 추가 개발 요소를 인지 하며 개발하고 그 추가 개발 요소는 backlog 티켓으로 만들어 설명을 적어둔다. 이것저것 추가하다보니 티켓 하나가 너무 비대해지고 산정된 일정이 딜레이되더라플래닝 하고 작업 시작하기촉박한 일정이라도 손코딩보다 뇌코딩을 많이 하는게 좋더라 해당 티켓의 모든 요소를 파악하고 개발하..