DOM API에는 많은 웹 개발자들을 헷갈리게 하는 3가지 속성이 있습니다. 바로 느낌이 비슷한 innerHTML, innerText, textContent인데요. 모두 HTML 요소의 내용을 접근할 때 사용하는 속성이지만 알고 보면 중요한 차이점이 있죠. 이번 포스팅에서는 이 알쏭달쏭한 HTML 요소의 3가지 속성에 대해서 알아보겠습니다. innerHTML 속성 innerHTML 속성은 HTML 요소 내부에 있는 HTML 코드를 있는 그대로 문자열 형태로 접근할 수 있도록 해줍니다. 예를 들어, 다음과 같이 3개의 <li> 요소로
이번 포스팅에서는 Uncontrolled Components 방식을 활용하여 React로 비제어 양식 UI를 만드는 몇가지 방법에 대해서 알아보겠습니다. Uncontrolled Components란? 웹에서 양식 UI를 구현할 때 <input>, <select>, <textarea>와 같은 HTML 요소를 사용하게 되는데요. 이러한 요소들은 value나 checked와 같은 내부 상태를 가지는데 기본적으로는 브라우저의 DOM이 상태를 제어해줍니다. React를 사용해서 양식 관련 HTML 요소들이 포함된 컴포넌트를 작성할 때는 이
우리가 사용하는 웹 사이트나 웹 애플리케이션에서는 수많은 이벤트가 발생합니다. 사용자가 마우스나 키보드로 일으킬 수 있는 이벤트도 있고, 브라우저 스스로도 웹페이지를 로딩하면서 여러 이벤트를 발생시킵니다. 이번 포스팅에서는 이렇게 웹에서 다양한 이유로 발생하는 이벤트를 처리하는 여러 가지 방법에 대해서 알아보겠습니다. HTML 이벤트 속성 먼저 가장 고전적이지만 사용하기 간단한 방법부터 알아볼까요? HTML 요소(element)에서 발생하는 이벤트를 처리하는 가장 쉬운 방법은 HTML의 이벤트 속성을 활용하는 것입니다. on<이벤트
2006년에 출시되었던 jQuery는 한 때는 자바스크립트 개발이 곧 jQuery 개발이라고 여겨질 정도로 정도로 상당히 오랫동안 자바스크립트 생태계를 주름잡던 라이브러리입니다. 하지만 최근에는 React, Angular, Vue.js, Svelte와 같은 모던 자바스크립트 라이브러리에 밀려 주로 레거시(legacy) 코드에서나 미처 못해 쓰는 라이브러리로 전략하고 말았는데요. 아무래도 컴포넌트 기반의 웹 프로그래밍의 대세가 되고 브라우저의 표준화가 전반적으로 개선되고 있어서 앞으로 jQuery의 입지는 점점 더 좁아질 것 같습니다