여러 종목의 차트를 빠르게 보고 싶은데 마우스로만 하는건 너무 귀찮다...
그래서 tbody를 잡고 키보드 입력을 받을 때 마다 종목을 변경해주게 만들었다.
개발자도구에서 접근해서 사용하면 됩니다.
(혼자 쓰려고 만든거라서 엉성합니다...)
1. F12로 열어서 console에 복붙하면 됩니다.
2. 붙여넣기 하고 맨 마지막 출처는 지우셔야합니다.
3. F12를 다시 눌러서 개발자도구를 없앱니다.
4. 그리고 키보드 아래/위로 움직이면 종목이 바뀝니다.
(이건 복붙용)
function getElementByXpath(e){return document.evaluate(e,document,null,XPathResult.FIRST_ORDERED_NODE_TYPE,null).singleNodeValue}const coinTable=getElementByXpath('//*[@id="UpbitLayout"]/div[3]/div/section[2]/article/span[2]/div/div/div[1]/table/tbody'),clickCoinTable=e=>{coinTable.children[e].scrollIntoView({behavior:"auto",block:"end"}),coinTable.children[e].click()};let coinIndex=0,coinLength=coinTable.children.length;document.addEventListener("keydown",e=>{switch(e.key){case"ArrowDown":coinIndex<coinLength-1&&clickCoinTable(coinIndex+=1);break;case"ArrowUp":coinIndex>0&&clickCoinTable(coinIndex-=1)}}),clickCoinTable(coinIndex);
(이건 읽는용)
// util function
function getElementByXpath(path) {
return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}
// coin table
const coinTable = getElementByXpath('//*[@id="UpbitLayout"]/div[3]/div/section[2]/article/span[2]/div/div/div[1]/table/tbody');
const clickCoinTable = (index) => {
// TODO ArrowDown일 땐 block이 'end'
// ArrowUp일 땐 block이 'start'로 해야지 자연스럽다
coinTable.children[index].scrollIntoView({
behavior: 'auto', block: 'end'
});
coinTable.children[index].click();
}
// key event
let coinIndex = 0;
let coinLength = coinTable.children.length;
document.addEventListener('keydown', (event) => {
// TODO throttle이나 debounce 적용
switch (event.key) {
case "ArrowDown":
if (coinIndex < (coinLength - 1)) {
coinIndex += 1;
clickCoinTable(coinIndex);
}
break;
case "ArrowUp":
if (coinIndex > 0) {
coinIndex -= 1;
clickCoinTable(coinIndex);
}
break;
}
});
// init
clickCoinTable(coinIndex);
적용되는 범위
사용해보니 버그가 좀 있는데, 사용하는 사람이 없으니 따로 레포관리는 안하고 있습니다~
필요하신 분이 계시면 말씀해주세요