Bleeding edge

오늘 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과 그 안에 콜백함수를 화살표함수의 옆에 사용하거나, 화살표 함..

1. HTTP의 진화 과정 표준 이전의 HTTP HTTP/0.9: 문서화된 최초의 HTTP 버전 HTTP/1.0 기존 HTTP의 기능을 확장한 버전 HTTP/1.1 표준화된 HTTP 최초의 HTTP의 요청 메서드는 GET한가지 종류였습니다. 웹이 인기가 생기면서 기존의 HTTP 사양 만으로는 사용자들의 모든 요구사항을 충족할 수 없게 되었고 당시에 명시적인 규약이 없었기에 서버와 클라이언트의 기능이 구현되지 않았습니다. 96년도에 HTTP WG는 96년이 이르면서 HTTP/1.0의 사양을 만들었고 이 이전의 버전에 대해서는 HTTP/0.9라는 이름을 붙였습니다. HTTP1 1996 버전정보가 명시되고, 요청 응답사이에 이를 전송하였습니다 요청 메서드가 GET, HEAD, POST 세가지로 확장되었습니다 ..

바닐라 자바스크립트 렌더 최적화하기 바닐라 자바스크립트로 웹페이지를 만들 때 MVC 아키텍처를 기본으로 잡고 페이지를 많이 만들을 때 전체 렌더가 자주 일어나는 것으로 효율이 좋지 않다는 것을 알게되었다. 일반적으로 한 자바스크립트 파일내에서 상태를 관리하는 객체 state를 만들고 setState를 이용하여 변경된 값을 바꾸는 방식을 통하여 상태를 관리하였다. const setState = (newState) =>{ state = [...state, ...newState)] render()//혹은 render(state) } 위의 방법대로 페이지를 만들면, 페이지 렌더링이 상태의 값 1개가 바뀌면 페이지 전체를 처음부터 다시 로드를 하기 때문에 효율이 좋지 않다. 효율지 좋아지기 위해서 어떤 방법이 있..

오늘 공부한 것 오늘은, 면접 질문에 대해서 나올 수 있는 this에 관해 간단히 정리하려고 한다. 질문은 this란? this의 동작방식, call, apply, bind의 차이 세가지로 준비하려고 한다. 1. this란? this는 호출하는 방법에 따라 다른 객체를 참조하는 키워드이다. 객체 본인을 나타내는 java와는 다르게 javascript는 호출 방법에 따라 동적으로 결정된다. 이러한 차이는 java는 클래스 기반의 OOP이고, javascript는 프로토타입을 기반의 OOP기 때문에 발생합니다. 클래스 기반의 OOP는 컴파일 할 때, 클래스의 틀을 복사합니다. 프로토타입 기반의 OOP는 런타임 과정에서 프로토타입 데이터 구조를 저장합니다. 프로토타입 기반의 OOP는 데이터 구조를 저장하기 때..

페어프로그래밍에서 알게 된 것 1. 한글 regex 사용방법 한글 regex /[ㄱ-ㅎㅏ-ㅣ가-힣]/ 자음, 모음, 자모음을 모두 모은 조합이다. 중간에 자음 모음만 따로 고르는 방법은 /[ㄱ-ㅎ]/ /[ㅏ-ㅣ]/ /[가-힣]/ 과 같이 끊어서 사용할 수 있다. 2. dialog tag 자바스크립트로 더보기와 같은 기능을 사용할 떄는 일반적으로, display none이나, hidden과 같은 것을 이용하여 무언가를 숨기고 다시 show를 반복한다. 하지만, 이 기능은 자체적으로 HTML에 기능을 가지고 있기 때문에 이 기능을 사용하면, 간단한 css만 터치하면 숨기기 기능을 아주 쉽게 사용할 수 있다 바로 details와 summary이다. 사실 내가 오늘 다루고 싶은것은 detail와 summary가..