Bleeding edge

Pair-Programming에서 배운 것 1. CustomEvent CustomEvent는 3가지의 단계를 통하여 사용할 수 있다. CustomEvent를 생성한다. const eventName = new CustomEvent('event-name', { detail: something //... detail을 통하여 이벤트의 내용이 전달된다. }) 어떤 이벤트 이름으로 어떤 일을 할지를 정한다. 1번에서 정의한 이벤트는 3번에서 정의할 dispatchEvent로 2번에서 정한 addEvenListener에 보낼 때 1번에서 보낸 내용을 이용하여 실행된다. addEventListener을 생성한다 $container.addEventListener('event-name', e => { console.lo..

오늘 Pair-Programming에서 배운 것 some, every 두 메서드는 boolean을 반환하는데, 여러 배열이 특정 조건을 만족하는지 체크하는 데 사용하였다 winCases.some(wincase => wincase.every(index => $gameBoard[index].textContent === player)); 둘을 굳이 비교하자면 some은 or(그 중에 한개가 성립하는가?) every는 and(모든 것이)와 유사하다. 둘다 Array.prototype.some, Array.prototype.every로 배열에 사용할 수 있다. scrollHeight 높이가 0인 element에서, scroll이 있었다면 되었을 높이가 scrollHeight이다. ul.style.height = ..

오늘 Pair-Programming에서 배운 것 1. Proxy Object 이전에 프록시 객체에 대해서 사용을 해본적이 있었으나, 이번에 사용하면서 느낀점이 더 많아졌기 때문에 프록시 객체에 대해 간단한 정리를 남기려고 한다. 1-1. Proxy..? 프록시를 한글로 번역하면 대리라는 뜻이다. 게임에서 대리로 한다 이 대리가 아니라 A에서 B로 갈 때 B에 접근하기전에 먼저 대리로 어떤 처리를 할 때 사용한다. 아마 현실에 프록시로 비유를 하면, 방송을 촬영한 후에 방통위를 거치면서, 영상이 필터 될 것이 필터되거나 편집되게 하는 과정이라 생각하면 좋을 것 같다. 1-2. Proxy in javascript 자바스크립트에서의 proxy는 핸들러의 종류와 같은 기능을 사용할 때 대신 이 기능을 사용하는 ..

오늘 Pair Programming에서 배운 것 문서에 link를 동적으로 붙이는 방법 document.head.insertAdjacentHTML('where', 'html string') 이 방법이 아닌 createElement를 이용하여 link를 다른곳에 append를 하는 방법을 사용한다면 3~4줄정도를 써야하지만 위의 방법을 이용하면 한줄이면 원하는 장소에 붙일 수 있다. at Array.prototype.at(n) 대괄호로 Array를 접근하는 것과 비슷한거 같다고 생각이 들 수도 있지만, at을 사용하면 음수를 이용하여 뒤에서 값을 접근할 수 있다. Array.from Array from을 사용하는 방법은 보통 Object인 자료를 Array로 변환할 때 많이 사용하였다. 오늘 캘린더를 구현..

오늘 Pair Programming에서 배운 것 matches, contain 해당 Node에 클래스를 가지고 있는지 boolean으로 반환하는 메소드인데, 알고는 있었지만 addEventlistener에서는 자주 사용했었지만, 내부에서 classList를 활용할 때는 빈도 적게 활용을 하고 있었다. 앞으로 신경써서 사용해야겠다 ++ 안티패턴으로, 손에 익었다는 것은 핑계다. 앞으로는 for문에서도 for(let i=0;i

1차 페어프로그래밍 회고 다른 사람의 코드를 보고 느낀 메모 상수 이름은 길어도 된다. 전역으로 사용되기에 구체적이고 길수록 좋다 식별자를 밖에서 참조하지 않는데 함수 밖으로 뺄 필요 없다. 함수로 재호출을 할때 재선언을 하게되는데 클로저로 재선언을 막을 수 있다. display block ⇒ block은 리렌더링이 안되기 때문에 비용을 지불하더라도 block을 다시 사용하여 가독성이 올라간다면 이를 택하는것도 괜찮다 TIL 작성법 : 미래의 나에게 예전에 이런것을 배웠으며, 알고 있던 것이라도 새로운 부분을 알게되면 이에 대해 메모할 것. localStorage에 true를 넣더라도 string으로 저장된다. transform을 쓸 때는 translate3D를 쓰는 것이 성능에 좋다. 변수를 사용했을 ..

Event 자바스크립트 엔진은 Memory Heap과 Call Stack으로 구성되어있다. 자바스크립트는 단일 스레드 프로그래밍 언어인데 이 의미는 Call Stackd이 하나라는 의미이다. MemoryHeap : 메모리를 할당하는 곳 CallStack : 코드를 실행하고 쌓는 곳 자바스크립트 엔진의 Call Stack에 있는 코드 중에서 비동기 함수 코드는 Web API를 호출하고, Web API는 콜백 함수를 Callback Queue에 밀어 넣는다. Callback Queue 비동기적으로 실행된 콜백함수가 보관되는 영역이다. 이 곳에는 setTimeout, addEventListener 등이 저장된다. Event Loop 이벤트 루프는 Call Stack과 Callback Queue의 상태를 체크하..

정규식 callback 이전에 정규식에서 본인 자신을 받는 방법으로 $&를 사용하는 것을 보았다. 오늘 페어프로그래밍에서 특정 조건으로 검색을 하고 검색한 것을 대상으로 새로운 값을 추출하려고 하였다 (예시) const try1 = Str1.replace(new RegExp(reg1), $&,replace(new Reg(reg2), str2) $&를 본인이라고 인식한 것이 본인이 아닌 문자였는지 replace를 쓰면 원하는 값이 나오지 않았다. 결론은 앞에서 미리 변수를 만들고(선언하지 않더라도) 뒤에서 이용하는 값을 터치하는 방법을 찾았다. const highOrderFunction = (highOrderStr) =>{ function callback(callackStr){ return match.re..

1. throttle 사용방법 : 예시 window.addEventListener( 'scroll', _.throttle(() => { const currentPagePostion = window.pageYOffset; return toggleScrollIcon(currentPagePostion); }, THROTTLE_TIME), ); 방법이야 검색하면 나오지만, throttle을 사용할 때, 사용 모양을 자꾸 틀려 시간이 소모가 되었다 throttle의 사용방법은 DOMNode.addEventListener( 'event', _.throttle(()=>functionName(), THROTTLE_TIME) 다음과 같다. _.throttle과 그 안에 콜백함수를 화살표함수의 옆에 사용하거나, 화살표 함..