coding- w00se

throttle 기법 일정 시간동안 발생한 이벤트를 한번만 처리하는 방법 에를 들어 throttle을 활용하면 1총 동안 이벤트가 여러 번 발생해도 이벤트 내부 함수는 1번만 실행할 수 있게 구현 가능합니다. scroll 이벤트와 연속적으로 호출되는 이벤트를 처리할 때 유용합니다. let timerId; const handleToDoListScrollEvent = (e) => { // 스크롤이 맨 아래 쪽에 있지 않으면 early return if (e.target.offsetHeight + e.target.scrollTop < e.target.scrollHeight) { return; } // timerID가 Truthy한 값이면 early return if (timerId) { return; } ti..

정보 은닉을 하는 이유 모던 Javascript Deep Dive에 의하면 정보 은닉은 아래와 같은 효과가 있다. 정보 은닉은 외부에 공개할 필요가 없는 구현의 일부를 외부에 공개되지 않도록 감추어 적절치 못한 접근으로부터 객체의 상태가 변경되는 것을 방지해 정보를 보호하고, 객체 간의 상호 의존성, 즉 결합도를 낮추는 효과가 있다. - 모던 Javascript Deep Dive 24장 중 간단히 정리를 하면 아래와 같습니다. 객체의 상태를 안정적으로 관리(예상하지 못한 변화를 예방) 객체 간의 결합도를 낮춤 Javascript에서 정보 은닉을 하는 방법 javascript에서는 # 접두사를 이용해서 클래스에 private 속성을 만들 수 있습니다. 과제를 수행하면서 정보 은닉을 연습했던 예시 코드는 아..

얼마 전에 Vanilla Javascript로 탭 메뉴와 탭 전환 기능을 구현할 일이 있었습니다. 구현을 할 때는 느끼지 못했지만, 돌이켜 생각을 해보니 비효율적으로 구현을 한 게 아닌가 생각이 들었습니다. 따라서 해당 기능에 대해 다시 연습을 해보았고, 이번 글에서는 탭 메뉴와 탭 전환 기능을 구현하는 방식에 대해 정리하려 합니다. 연습 예시 연습 예시 화면은 아래와 같습니다. 구현 방법 연습 화면은 위 이미지와 같습니다. 빨간색 영역: 버튼 목록 영역으로 각 버튼을 누르면 파란색 영역에 변화가 생깁니다. 파란색 영역: 탭의 내용을 나타는 영역으로, 클릭된 버튼에 따라 '탭 1 페이지', '탭 2 페이지', '탭 3 페이지'로 변하게 됩니다. 전체 코드 1. 각 button 태그에 데이터 속성으로 se..

오늘 linter를 이용해서 컨벤션의 어긋난 코드를 수정하면서, Airbnb Javascript Style Guide에서 아래의 규칙을 발견했습니다. 3.6 Only quote properties that are invalid identifiers. eslint: quote-props 해당 규칙은 객체(object) 내의 프로퍼티의 이름과 관련된 규칙으로, Javascript 식별자 네이밍 규칙을 준수하는 프로퍼티 이름은 '(따옴표)를 쓰지 않아도 된다는 규칙입니다. 해당 영어 구문의 indentifiers을 보고 식별자가 매칭이 안돼서 번역기를 돌렸습니다. 따라서 'identifier === 식별자'를 각인시키는 겸, 이번 글에서는 Javscript의 용어인 식별자와 프로퍼티에 대해 정리하려 합니다. ..

얼마 전 코드 리뷰를 해주시는 팀원으로부터 '구조 분해 할당 준수 필요!'라는 내용의 피드백을 받았습니다. 덕분에 '구조 분해 할당'이라는 키워드도 알게 됐고, 이번 글에서는 '구조 분해 할당'에 대해 찾아본 내용을 정리하려 합니다. 구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 값들을 개별 변수에 저장하는 Javascript의 표현식입니다. 사용 예시 구조 분해 할당 - 배열 예시 // 구조 분해 할당 - 배열 예시 // 구조 분해 할당 - 기본 사용 예시 let arr = [1, 2, 3, 4, 5] let [ first, second, ...rest ] = arr; console.log("frist: ", first); // first: 1 console.log("second: ", sec..