개발하다 보면 변수가 정확히 어떤 타입인지 확인해야 할 순간이 자주 온다. 다만 대부분의 개발자들은 typeof 하나만 쓰다가 예상 못 한 결과에 당황하곤 한다. 특히 배열이나 null을 체크할 때 typeof가 제대로 된 결과를 주지 않는다는 걸 모르는 경우가 많다. 이번에는 JavaScript의 세 가지 타입 체킹 방식을 정확히 뭔지, 언제 써야 하는지···
웹 애플리케이션을 개발하다 보면 외부 3rd-party 라이브러리가 생성한 DOM 요소나, 사용자 동작에 따라 동적으로 추가·변경되는 HTML 구조를 실시간으로 감지해야 하는 상황을 경험해봤을 것이다.다만 대부분의 개발자들은 setInterval을 돌려 주기적으로 DOM을 검색하거나, 이미 구시대 유물이 된 MutationEvents(DOMNodeInser···
웹 애플리케이션을 개발하다 보면 특정 DOM 요소나 카드 컴포넌트의 크기가 변경될 때 내부 레이아웃이나 차트를 재선언해야 하는 상황을 경험해봤을 것이다.다만 대부분의 개발자들은 여전히 window 객체의 resize 이벤트를 바인딩하여 브라우저 전체 창이 바뀔 때만 대응하거나, setInterval 타이머를 돌려 크기를 체크하는 비효율적인 방식을 사용하고 ···
웹 개발을 하면서 폼(form) 유효성 검증은 거의 매일 마주치는 작업이다. 많은 개발자들은 HTML5의 required, type="email" 같은 기본 속성에만 의존하거나, 제출 시점에만 검증을 하는 경향이 있다. 하지만 현대적인 UX는 사용자가 입력하는 순간 실시간으로 피드백을 주고, 잘못된 데이터가 서버에 도달하지 않도록 막는 것을 기대한다. 이번···
자바스크립트를 다루다 보면 ... 기호를 자주 마주친다. 많은 개발자들은 이 Spread Operator(스프레드 연산자)가 배열을 펼치는 정도의 역할만 한다고 생각하고, 인터넷에서 복사한 코드를 그냥 붙여넣는다. 다만 정확히 언제 어떻게 사용해야 하는지, 얕은 복사와 깊은 복사의 차이는 뭔지 모르는 경우가 대부분이다. 이번에는 Spread Operator···
비동기 처리는 모던 웹 개발에서 피할 수 없는 핵심 개념이다. 다만 대부분의 개발자들은 Promise와 async/await의 정확한 차이를 모른 채 코드를 작성하거나, 둘을 같은 것으로 생각하는 실수를 범한다. 이번에는 Promise의 기초부터 시작해서 async/await이 정확히 뭐고 왜 필요한지, 언제 어떤 상황에서 써야 하는지 완벽하게 정리해서 소···
DOM 요소의 클래스를 추가하거나 제거할 때, 대부분의 개발자는 직접 className 문자열을 조작하거나 jQuery의 addClass/removeClass를 써왔을 것이다. 다만 현대 자바스크립트에서 이렇게 하는 것은 번들 크기 낭비이고, 실수하기 쉬운 방식이다. 이번에는 classList API가 정확히 무엇인지, 왜 className 직접 조작보다 ···
개발하다 보면 사용자가 입력한 데이터를 검증해야 할 순간이 자주 온다. 이메일 형식이 맞는지, 전화번호가 올바른지, 특정 문자열 패턴을 찾아야 하는데 문제는 대부분의 개발자들이 정규표현식(Regex)을 복사해 붙이기만 할 뿐, 정확히 어떤 원리로 동작하는지 이해하지 못한 채 사용한다는 것이다. 결국 약간 다른 형식의 데이터가 들어오면 예상 밖의 결과가 나오···
웹 애플리케이션을 개발하면서 실시간 검색 입력창이나 창 크기 조절(Resize), 스크롤 이벤트를 구현할 때 매 밀리초마다 이벤트가 수십, 수백 번 폭주하는 현상을 경험해봤을 것이다.다만 이벤트가 과도하게 실행되면서 브라우저가 버벅이거나 서버 API 호출 비용이 낭비되고 있음에도 정확한 원인이나 제어 방법을 모르는 경우가 많다.이번에는 자바스크립트의 대표적···
웹 페이지에서 스크롤에 맞춰 이미지를 늦게 불러오는 지연 로딩(Lazy Loading)이나, 페이지 하단에 도달했을 때 다음 데이터를 자동으로 불러오는 무한 스크롤을 구현해본 적이 있을 것이다.다만 기존의 window.addEventListener('scroll', ...) 방식이 스크롤할 때마다 수십, 수백 번씩 호출되어 브라우저의 렌더링 성능을 심각하게···
동적으로생성된DOM요소에이벤트를붙이려고할때,개발자들은보통새요소가생성될때마다이벤트리스너를다시등록해야한다고생각한다.다만대부분의개발자들은이과정이얼마나비효율적이고성능을낭비하는지깨닫지못한다.이번에는EventDelegation(이벤트위임)이정확히뭔지,왜필요한지,그리고어떻게구현하는지실무에서바로쓸수있는방식으로완벽하게정리해서소개하겠다. EventDelegation이뭐고왜필···
JavaScript를 다루다 보면 async/await를 만나게 된다. 특히 서버 통신, 파일 처리, 데이터베이스 조회 등 시간이 걸리는 작업을 할 때 거의 필수적으로 사용된다. 다만 async/await가 정확히 뭔지, Promise와는 뭐가 다른지, 언제 사용해야 하는지 명확하게 이해하는 개발자는 생각보다 적다. 그냥 "좋다고 해서" 또는 "이 코드를 ···
jQuery는 편리하지만, 잘못 사용하면 웹사이트 성능을 크게 떨어뜨릴 수 있다. 특히 대규모 프로젝트에서 jQuery를 남용하거나 최적화하지 않으면 페이지 로딩 속도, 메모리 사용량 등 여러 문제가 발생한다. 이번에는 jQuery를 사용할 때 자주 하는 실수들과 그 해결책을 정리해서 소개하겠다. 이 글을 읽고 당신의 jQuery 코드를 점검해보면, 분명히···
jQuery를 사용하는 가장 큰 이유 중 하나가 바로 AJAX 기능이다. AJAX를 통해 페이지를 새로고침하지 않고도 서버와 통신할 수 있기 때문에, 사용자 경험을 크게 향상시킬 수 있다. 다만 AJAX는 비동기 통신이기 때문에 실행 순서, 에러 처리, 타이밍 등 신경 써야 할 부분이 많다. 이번 글에서는 jQuery AJAX의 기본부터 시작해서, 실무에서···
jQuery를 처음 배우거나, 오래전에 배웠지만 기초가 흔들리는 개발자들이 많다. 특히 선택자(Selector)와 DOM 조작은 jQuery의 가장 기본이 되는 부분인데, 이것만 제대로 알아도 jQuery를 훨씬 효율적으로 사용할 수 있다. 또한 최근에는 Vanilla JavaScript가 많이 사용되고 있지만, 여전히 레거시 프로젝트나 빠른 개발이 필요한···
순수 javascript 에서 ajax 통신을 할때 주로 XMLHttpRequest 또는 fetch 를 이용했을 것이다. XMLHttpRequest의 경우 현재도 많이 사용되는 방식이긴 하나 현재까지 와서는 이보다 더 강력한 fetch 함수를 많이 사용하고 있는 편이다. 이번편은 fetch 함수를 이용한 커스텀 비동기 ajax 함수에 대해 알아보도록 하자 ···
HTML 태그의 data 속성은 공식 지원되는 객체 속성으로 jquery를 사용하여 data 속성을 가져오게 되면 객체형태로 쉽게 받을 수 있기때문에 활용도가 높은 편이다. 이번편은 data 속성은 잘 알려져 있기에 이번편에서는 data 속성과 같이 특정 속성을 저장하고 jquery를 통해 객체화 하는 방법에 대해 알아보자. 우선 방법을 소개하기전 data···
자바스크립트를 사용하다보면 런타임 중 에러를 무시하고 다음 라인을 실행해야 하는 경우가 발생한다. 이때 사용할 수 있는건 사전에 에러 발생이 안나도록 변수나 함수의 타입을 검증하는 예외처리가 필요하지만 try 블록을 이용하여 처리를 회치할 수 있다. 사실 try~catch 는 에러를 보완할 수 있는 수단이라기 보단 에러는 회피하는 용도로 사용되고, 커스텀 ···
여러 사이트를 개발하다보면 롤링 스크립트를 넣어야 하는 경우가 있다. 물론 나는 사이트를 무겁게 만드는 롤링 스크립트들을 좋아하지는 않는다. 하지만 사용자의 보는 눈을 한층 더 즐겁게 만들어 주는 롤링 스크립트는 많은 요청이 있기때문에 여러 롤링 스크립트를 알아 두면 좋다. 오늘 소개할 롤링 스크립트는 Siema 로 상당히 가벼운 롤링 스크립트인것 같아 리···
과거 데이터 처리는 일반적으로 form 을 이용하여 처리하였으나 요즘은 ajax 처리가 많아지면서 사용자로부터 입력이 없는 데이터처리는 form 이 아닌 스크립트로 많이 처리한다. 하지만 스크립트에 PHP로 데이터처리를 하다보면 소스코드가 지저분하게 보여질 수 있고 공통파일 처리도 어려울 수 있기에 각 정보를 특정 태그에 data 속성으로 담아주고 처리하는···