JavaScript 표현식(Expression)이란?JavaScript에서 표현식(expression)이 무엇인지 알아보고, 어떤 단어들이 실제보다 더 복잡하게 들리게 만드는지 함께 살펴보겠습니다.JavaScript에서 표현식이란 단순히 질문을 던지고 그 답으로 값을 받는 방법입니다. 그리고 그 답은 항상 단 하나의 값(single value)입니다.예를 들어 다음 코드가 하나의 표현식입니다:console.log(5 + 5) // 결과: 10위 코드에서 일어나는 일을 대화처럼 풀어보면 다음과 같습니다:당신이 묻습니다: JavaScr

JavaScript에서 이벤트 위임(Event Delegation) 기법이 무엇인지, 왜 사용해야 하는지, 그리고 어떻게 활용하는지 코드 예제와 함께 알아봅니다. JavaScript 이벤트 위임이란 무엇이며, 언제 사용해야 할까? 간단히 말해, 이벤트 위임은 부모 요소에 단 하나의 이벤트 리스너만 등록하여 자식 요소들과 상호작용할 수 있게 해주는 JavaScript 기법입니다. 이벤트 위임을 사용하면 모든 자식 요소에 일일이 이벤트 핸들러를 추가할 필요 없이도 자식 요소를 찾아 조작할 수 있습니다. 이 기법이 얼마나 강력한지 곧 알

컴퓨터는 0부터 숫자를 셉니다. 즉, 0이 첫 번째, 1이 두 번째가 되는 방식입니다. 그렇기 때문에 list[2]는 배열의 세 번째 항목을 선택하게 됩니다. 예제에 사용된 배열 var list = [item 1, item 2, item 3, item 4] splice() 메서드의 기본 구조 splice() 메서드가 동작하려면 두 가지 값이 필요합니다. 시작 위치: 어느 위치부터 삭제할지 지정하는 숫자 삭제 개수: 해당 위치부터 몇 개의 항목을 삭제할지 지정하는 숫자 splice() 사용 예시 따라서 list.splic

컴퓨터는 숫자를 셀 때 항상 0부터 시작합니다. 즉, 첫 번째 요소는 0, 두 번째 요소는 1, 세 번째 요소는 2와 같은 식으로 번호가 매겨집니다. 이렇게 각 요소에 붙은 번호를 인덱스(index)라고 부릅니다. 그래서 배열에서 세 번째 요소에 접근하려면 list[2]처럼 인덱스 2를 사용해야 합니다. 사람이 세는 숫자보다 항상 1이 작다는 점을 기억해 두세요. 예제 코드 아래는 예제에서 사용된 배열입니다. var list = [item 1, item 2, item 3, item 4]; 배열 요소 찾기 대괄호 안에

JavaScript에서 배열(Array)의 맨 앞이나 맨 끝에 항목을 추가하거나 제거할 때 가장 많이 사용되는 메서드가 바로 unshift(), shift(), push(), pop()입니다. 이 네 가지 메서드만 제대로 익혀두면 배열 데이터를 훨씬 쉽고 직관적으로 관리할 수 있습니다.꼭 알아야 할 네 가지 배열 메서드unshift() : 배열의 맨 앞에 새 항목을 추가합니다.shift() : 배열의 첫 번째 항목을 제거합니다.push() : 배열의 맨 끝에 새 항목을 추가합니다.pop() : 배열의 마지막 항목을 제거합니다.Chr

JavaScript에서 화면 너비가 특정 값보다 크거나 작은지 감지하는 방법을 알아봅니다. 개발을 하다 보면 특정 조건에 따라 코드를 실행해야 하는 경우가 자주 있습니다. 예를 들어, 화면 공간이 제한적인 스마트폰 같은 작은 화면에서는 숨기고, 넓은 화면에서만 보여주고 싶은 요소가 있을 수 있습니다. 참고로 특정 기기 유형 감지는 개발자들 사이에서도 의견이 분분한 꽤 복잡한 주제입니다. 몇 시간 동안 조사해도 신뢰할 만한 데이터가 충분히 모이지 않아 별도의 글로 정리하지는 못했습니다(추후 업데이트 예정). 픽셀 단위로 화면 너비를

바닐라 자바스크립트(Vanilla JavaScript)만으로 웹사이트의 특정 영역에 포함된 모든 단어를 손쉽게 세는 방법을 알아보세요. 블로그 게시물이나 페이지의 전체 단어 수를 파악해야 할 때가 종종 있습니다. 웹사이트에 단어 수 계산기(Word Counter) 기능을 추가하고 싶으신가요? 아래의 자바스크립트 코드 스니펫을 활용하면 빠르고 간편하게 구현할 수 있습니다. var wordsInPost = wordCount(document.querySelectorAll(.posts-content)) function wordCount(

별도의 라이브러리 없이 순수 JavaScript(vanilla JS)만으로 사용자가 페이지 하단 근처까지 스크롤했는지 감지하는 방법을 알아봅니다. 무한 스크롤, 지연 로딩(lazy loading), 맨 위로 버튼 표시 등을 구현하다 보면 사용자가 페이지 전체 또는 특정 섹션의 맨 아래까지 스크롤했을 때 특정 이벤트를 실행해야 하는 경우가 종종 있습니다. 맨 아래 스크롤 감지 방법 (모든 최신 브라우저 및 IE9 이상 지원) 가장 기본적인 방식은 window.onscroll 이벤트 안에서 뷰포트 높이 + 스크롤된 거리가 문서 전체 높

JavaScript를 배우다 보면 원시(primitive) 값은 불변(immutable)하며, 그와 달리 비원시(non-primitive) 값은 가변(mutable)하다는 이야기를 자주 듣게 됩니다. 이 두 값의 유형(데이터 타입이라고도 부릅니다)의 차이를 제대로 이해하는 것은 매우 중요합니다. 이 개념을 알고 있으면 나중에 겪을 수 있는 수많은 혼란과 버그를 예방할 수 있기 때문입니다. 원시 값에는 다음과 같은 것들이 있습니다. 숫자(number) 문자열(string) 불리언(boolean) 반면 비원시 값은 다음과 같습니다.

JavaScript로 웹페이지를 새로고침하려면 Window Reload 이벤트를 사용해야 합니다. 이 글에서는 가장 간단한 한 줄 코드 방법부터 실무에서 자주 사용되는 버튼 클릭 이벤트 방식까지 단계별로 알아보겠습니다.한 줄의 JavaScript로 페이지 새로고침하기가장 간단한 방법은 브라우저 콘솔(Console)을 활용하는 것입니다. 아래 코드를 브라우저 개발자 도구의 콘솔에 붙여넣고 Enter 키를 누르면 페이지가 즉시 다시 로드됩니다.window.location.reload()간단하지만, 매번 콘솔을 열어 실행해야 하기 때문에

DOM 요소를 다루기 전에 확인할 것JavaScript를 사용하면 DOM에서 요소를 빠르게 제거하거나 숨길 수 있습니다. 구체적인 방법은 크게 두 가지인데, 시작하기 전에 먼저 스스로에게 이렇게 물어보세요. 이 요소를 나중에 다시 사용해야 할까?답에 따라 적절한 방법이 달라집니다.1. 요소를 다시 보여줘야 한다면 — 숨기기(Hide)답이 그렇다라면 요소를 완전히 삭제하지 말고 style 속성을 이용해 화면에서만 숨기는 것이 좋습니다.const hideElement = document.querySelector(#element-to-h

JavaScript를 사용하면 기존 요소 내부에 새로운 마크업을 손쉽게 추가할 수 있습니다. 이 글에서는 innerHTML 속성을 활용하는 방법을 알아봅니다. JavaScript에는 innerHTML이라는 속성이 있어서, 이미 존재하는 요소 내부에 마크업을 아주 간단하게 추가할 수 있습니다. 예를 들어, 헤드라인이 포함된 아티클 헤더가 있다고 가정해 보겠습니다. 그리고 그 바로 아래에 부제목이나 태그라인 같은 중요한 메시지를 추가해야 한다면 어떻게 해야 할까요? HTML 구조 <article> <header>

React Native 앱을 실행하려고 할 때 다음과 같은 오류 메시지가 표시되는 경우가 있습니다.Something went wrong installing the sharp module이 오류는 여러 가지 원인으로 발생할 수 있으며, 그에 따라 해결 방법도 다양합니다.주요 원인실제로 이 오류는 대체로 최신 버전의 Node.js를 방금 설치한 직후에 자주 발생하는 것으로 확인됩니다. Node.js 버전이 변경되면 네이티브 모듈인 sharp가 기존 환경과 호환되지 않아 설치 오류가 생기기 때문입니다.검증된 해결 방법매번 효과가 있었던

JavaScript로 현재 페이지 URL 가져오기 브라우저에서 현재 열려 있는 웹 페이지의 URL을 확인하려면 window.location.href 속성을 사용하면 됩니다. 이 속성은 현재 문서의 전체 URL을 문자열 형태로 반환합니다. 브라우저 개발자 도구(DevTools)의 콘솔(Console) 탭에 아래 코드를 입력한 후 Enter 키를 눌러 결과를 직접 확인해 보세요. var currentURL = window.location.href; console.log(currentURL); window.location 객체란?

앞선 글에서 우리는 JavaScript의 push() 메서드를 사용해 배열에 항목을 추가하고 제거하는 방법을 배웠습니다. 그렇다면 기존 배열에 또 다른 배열 전체를 추가하려면 어떻게 해야 할까요? 다시 말해, 서로 다른 두 개의 배열을 하나로 합치고 싶을 때 말입니다. JavaScript에서 두 개 이상의 배열을 병합하려면 Array.prototype.push.apply() 메서드를 사용할 수 있습니다. 예를 들어 과일 바구니가 두 개 있고, 모든 과일을 한 바구니에 담고 싶다고 가정해 봅시다. 전혀 문제없습니다. ES5 방식: A

웹사이트 푸터에 현재 연도를 자동으로 업데이트하는 것은 생각보다 아주 간단한 작업입니다. 그러나 의외로 많은 웹사이트 운영자들이 현재 연도를 표시하는 것이 얼마나 중요한지 인식하지 못하고 있습니다. 현재 연도 표시는 저작권 보호 차원에서도 중요하지만, 방문자에게 사이트가 지속적으로 관리되고 있다는 신뢰감을 주는 역할도 합니다. 대부분의 오래된 웹사이트, 심지어 일부 최신 사이트에서도 푸터의 HTML은 다음과 같은 형태로 작성되어 있습니다. <span>© 2018 Company Name</span> 이 코드의 구

이 글에서는 웹사이트에 있는 모든 링크를 가져와서 브라우저 콘솔에 출력하는 방법을 알아봅니다. 몇 줄의 간단한 JavaScript 코드면 누구나 쉽게 따라 할 수 있습니다. 코드 var links = document.querySelectorAll(a); for (var i = 0; i < links.length; i++) { var link = links[i].getAttribute(href); console.log(link); } 이 코드는 먼저 document.querySelectorAll(a)를 사용해

자바스크립트로 할 수 있는 가장 간단한 작업 중 하나가 바로 요소의 클릭 횟수를 세는 것입니다. 클릭 수를 저장할 변수를 하나 선언하고, 대상 요소에 addEventListener 메서드를 사용하기만 하면 됩니다. 예를 들어 홈 버튼처럼 버튼 요소의 클릭 횟수를 추적하고 싶다고 가정해 보겠습니다. HTML 마크업 버튼 요소를 만들고 button-home 클래스를 지정합니다: <button class=button-home>Home</button> 자바스크립트 JavaScript 파일에 다음 코드를 추가합니다(코드

이 튜토리얼에서는 JavaScript 객체 배열을 웹 페이지에서 HTML 요소 목록으로 표시하는 방법을 단계별로 배워보겠습니다. 여러 개의 데이터가 담긴 JavaScript 객체 배열을 브라우저 화면에 목록 형태로 출력해야 하는 경우가 자주 있습니다. 이번 예제에서는 네 가지 운동 정보를 담은 객체 배열을 HTML 리스트로 변환해 보겠습니다. JavaScript 객체 리터럴 먼저 예제로 사용할 객체 리터럴 배열입니다. 네 개의 운동 객체로 구성되어 있습니다. let exerciseObjects = [ { name: Dea

특정 요소의 클릭 횟수를 세는 것은 JavaScript로 할 수 있는 가장 간단한 작업 중 하나입니다. 클릭 수를 저장할 변수를 선언하고, 대상 요소에 addEventListener 메서드를 사용하기만 하면 됩니다. 예를 들어 홈 버튼처럼 버튼 요소가 몇 번 클릭되었는지 추적하고 싶다고 가정해 보겠습니다. HTML 마크업 먼저 HTML 버튼 요소를 만들고 button-home이라는 클래스를 지정합니다. <button class=button-home>Home</button> JavaScript 코드 다음 코드를