허도경, limewhale

많은 사용자들이 스크립트를 작성할 때 가장 많이 사용하는 것 중 한 가지를 고르라면 jQuery가 아닐까 생각됩니다. jQuery가 많은 사랑을 받게 된 이유는 처음 입문하기가 쉽다는 것과 높은 가독성, 편리한 사용성이 아닐까 생각됩니다. 하지만 Vue와 React와 같은 라이브러리와 프레임웍이 나타나고 많은 프로젝트에서 Vue와 React를 사용하기 시작하면서부터 프로젝트 작업을 할 때 jQuery를 사용해서 작업하기가 꺼려지는 측면이 있습니다. 물론 Vue와 React에서도 NPM을 이용하여 jQuery를 사용할 순 있지만 Vue와 React 모두 가상 DOM을 활용하고 가상의 DOM을 추상화하여 사용하기 때문에 jQuery와 같은 DOM을 순차적으로 읽으며 스크립트를 동작시키는 것은 스크립트 충돌을..

화면이 웹에 비해서 상대적으로 작은 모바일이나 쇼핑몰처럼 다양한 상품을 보여줘야 하는 사이트에서는 화면이 길어지게 되면 사용자가 다시 화면의 최상단으로 이동하기가 굉장히 힘들어집니다. 그래서 이런 단점을 보완하기 위해 특정 버튼을 클릭하게 되면 해당 Page의 최상단으로 이동하는 기능을 구현하여 사용자에게 편의성을 제공하게 됩니다. $('.btn-top').on('click', function(){ $('html, body').animate({scrollTop:0}, 300);} ); 해당 기능에 조금 더 인터렉티브한 효과를 주고 싶으면 easing플러그인을 사용하여 다양한 텐션의 느낌으로 모션 효과를 사용할 수 있습니다. easing은 JQuery에서 animation을 사용할 때 해당 animatio..

스크립트를 구현하다 보면 전체값에 대한 퍼센트 값이 필요할 때가 있습니다. 일반적으로 UI개발을 하시는 분이라면 그래프와 관련된 작업을 진행할 때 퍼센트 계산값이 필요할거라 생각합니다. 그리고 개발을 반드시 하지 않더라도 퍼센트 공식을 알아두면 우리 일상생활속에서도 유용하게 사용될 수 있습니다. 내가 사용한 카드금액 중 음식, 레저등이 각 몇 %인지도 계산으로 가능하고 쇼핑을 가서 할인율이 되는 금액이 얼마인지도 쉽게 계산되죠. 수치값 계산을 어려워 하시는 분들이 있어서 그 부분에 대한 개념을 정리하고자 합니다. 이번에 한번 이해해 두시면 잊어버리지 않으실거에요. 1.퍼센트(%) 계산 이해하기 쉽게 예로 설명을 들을께요. 우리에게 100개가 물건이 있다고 가정합시다. 그 중 내가 10개의 물건을 팔았다면..

정말 프로그래밍에서 자주 사용하는 배열에 대해 알아볼게요. 배열은 우리가 스크립트로 다중 값을 핸들링해야 할 때 반드시 필요한 요소입니다. 아마 배열에 대해 잘 아시는 분도 있고 전혀 모르시는 분도 있을 거라 생각합니다. 배열은 객체(Object)와 마찬가지로 여러 가지 값을 저장할 수 있는 데이터 주머니라고 이해하시면 될 거 같아요. 다만 객체와 다른 점은 배열에 저장된 값에 접근할 때 객체처럼 Key : Velue 형태가 아닌 값이 저장된 인덱스(순서)로 접근을 한다는 것이 차이점일 거 같습니다. 그럼 좀 더 자세히 객체에 대해 알아볼게요. 배열은 하나의 변수에 여러 개의 값을 가져와서 사용해야 할 경우 사용합니다. 배열 Array 함수를 이용하여 사용하게 되며 배열의 첫 번째 값은 0부터 시작됩니다..

객체를 활용하면 우리가 스크립트로 무언가를 구현할 때 굉장히 편리하다는 것을 알 수 있습니다. 이 객체는 사실 우리가 Json이라고 말하는 같다고 생각하시면 됩니다. 중괄호로 값을 포함하고 Key : Velue 형태로 값을 호출하는 방법인데 어디선가 Key : Velue 형태로 값을 호출하는 방법이라는 단어가 이상하게 친숙하지 않나요? (저만 그런 거면 죄송합니다.) 이전에 소개해 드렸던 html5의 data- 속성에 관한 글에서도 Key : Velue에 대한 이야기가 잠깐 나왔습니다. 궁금하신 분들은 위에 링크에 있는 글을 참고해 주세요. 그럼 이제 객체에 대해서 한번 알아볼께요. 모두 설레는 마음으로 같이 알아봐요. 1. 객체는 키와 그에 매칭하는 속성 값으로 선언합니다. 앞에서 말했듯이 객체는 Ke..

특정 데이터를 받아서 그 값을 가공하거나 값을 출력할 때 가장 먼저 해야 하는 것은 무엇일까요? 정답은? (두구두구두구 : 자체 효과음.. 긴장감 전혀 없음 주의) 제목에도 있듯이 해당값에 포함된 공백을 제거해주는 일입니다. 우리가 전문통신이나 이미 노출된 값을 자신이 필요한 위치 값만 잘라서 재 가공하여 화면에 보여주려고 해도 값에 공백이 포함되어 있으면 우리가 전달받게 되는 값에는 우리가 원치 않았던 공백 값이 포함되기 때문에 자신이 원하는 정확한 값을 얻을 수 없습니다. 그래서 반드시 문자열을 자를 때는 공백문자를 제거해 줘야 합니다. 공백 문자를 제거하는 방법에는 2가지 방법이 존재합니다. 1.javaScript 정규식 javaScript는 replace를 이용하여 모든 공백을 제거해 줍니다. c..

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