허도경, limewhale

jQuery는 이제 프로젝트에서는 빠질 수 없는 기본 요소 중 하나로 자리매김을 했습니다. 아마 그 이유는 쉬운 사용방법과 높은 활용성 때문일거라 생각합니다. 하지만 같은 jQuery 코드도 어떻게 만들어져 있는가에 따라서 속도차이가 나게 되는데요. 우연히 보게 된 jQuery 속도를 줄일 수 있는 6가지라는 글이 있어서 정리해 보았습니다. 1. 구체적인 셀렉터를 사용합니다. jQuery로 특정 요소를 DOM에서 검색할 경우, jQuery는 DOM 전체 구조에서 요소를 찾기 때문에 선택자(Selector)가 구체적일수록 속도에 좋으며 Class보다 ID가 단일 선택자이기에 속도가 더 빠릅니다. - bad - $(".item"); - good - $("#item") // class 보다는 ID를 사용할 것..

Data 속성은 HTML5 속성에서 제공하고 있으며 조금만 이해하고 실제 코드에 적용하여 사용하기 시작하면 굉장히 편리한 기능을 제공합니다. 지금부터 알아두면 쓸모 있는 신비한 "Data-" 대해서 살펴봅시다. 1) data 속성. 그는 누구인가? HTML5에서 새롭게 소개된 HTML5 data Attributes는 사용자 데이터 속성으로 태그 내에 'data- 로 시작하는 속성은 개인 데이터로 규정한다.'는 내용입니다. 여기서 핵심은 "사용자 데이터 속성" 이란 말인데요. 쉽게 설명하자면 data와 하이픈(-)이 조합된 형태로 data- 뒤에 개발자가 정의하고 싶은 마음대로 정의하면 된다는 이야기입니다. 그래도 이해가 잘 안 되시면 아래 예시 코드를 한번 살펴볼게요. A) data- 속성 적용 예시 /..

프로젝트를 진행하거나 협업을 하게 되면 어떠한 업무든 보다 나은 방법이 없을까 고민을 하게 됩니다. 프로젝트나 버전 관리나 유지보수 등의 이유를 고려한다면 업무에 가이드(규칙)가 있는 게 좋습니다. 물론 혼자서 업무를 진행하게 되는 상황이어도 자신만의 가이드 규칙을 정리해서 사용하는 것이 자신을 위해서도 또 업무의 효율성을 위해서도 좋습니다. 그래서 오늘은 CSS의 여러 방법론 중 하나이며 현재 제가 사용하고 있는 BEM 방법론에 대해 알아보려고 합니다. 💡 BEM이 도대체 뭔데? BEM은 Block Element Modifier의 약자 block(전체를 감싸고 있는 블록요소)__element(내부 요소)--modifier(기능/수정) BEM 방법론은 ID에는 사용할 수 없고, 오직 클래스명에만 활용할 ..