드리프트의 코-자-경(코딩, 자동차, 경제)

지난 튜토리얼에서는 이벤트를 수신하기 위해 addEventListener 함수를 사용하는 방법을 배웠습니다. 이번 튜토리얼에서는 이벤트 캡쳐링(Capturing)과 버블링(Bubbling)에 대해 알아보겠습니다. 이벤트 중단 / 이벤트 진행 본격적인 이해를 돕기 위해 아래 HTML을 봅시다. one two three 보시다시피 별 볼일 없는 HTML입니다. 위 HTML의 DOM 표현은 아래와 같습니다. 자세하게 살펴보겠습니다. buttonOne 요소를 클릭한다고 가정해 보겠습니다. 이전에 배웠던 것처럼 버튼을 클릭하면 우리는 클릭 이벤트가 시작될 것이라는 것을 알고 있습니다. 여기서 중요한 점은 정확히 클릭 이벤트가 시작되는 곳입니다. 클릭 이벤트 (거의 모든 다른 JavaScript 이벤트와 마찬가지로..

눈치채지는 못했겠지만, 대부분의 애플리케이션과 웹사이트는 가만히 있으면 그냥 그 자체로 지루합니다. 애플리케이션과 웹사트가 엄청난 팡파르와 돌풍을 일으키며 시작했지만, 우리가 그 애플리케이션과 상호작용을 하지 않는다면 그 애플리케이션은 가치가 없게 되겠죠. 그 이유는 간단하다. 우리의 애플리케이션(응용 프로그램)은 우리가 하고자 하는 행동에 반응하기 위해 존재합니다. 우리가 침대에서 일어나 하루를 준비하듯 응용 프로그램도 나름 각각의 동기부여가 내재되어 있습니다. 응용 프로그램이 하는 일은 우리가 그 프로그램에게 무엇을 하라고 지시하는 겁니다. 바로 이 점이 오늘의 주제입니다. 우리가 응용 프로그램들에게 무엇을 해야 하는지 지시한다면 반대로 그 프로그램은 어떻게 알아챌까요? 바로 이벤트라는 것에 반응되도..

우리는 HTML 요소를 허공에 만들고 몇 줄의 JavaScript를 사용하여 DOM에 추가할 수 있습니다. DOM에서 요소를 동적으로 생성하고 수정하는 기능은 우리가 즐겨 찾는 많은 웹 사이트와 애플리케이션을 다이내믹하게 만드는 중요한 요소입니다. HTML에 모든 것을 미리 정의하는 것은 매우 제한적입니다. 우리는 새로운 데이터를 가져올 때, 또는 페이지와 상호 작용할 때, 또는 더 많이 스크롤할 때, 그리고 다른 작업을 수행할 때 콘텐츠가 변경되고 적응되기를 원합니다. 이 튜토리얼에서는 이 모든 작업을 수행하는 기본 사항을 다룰 것입니다. 요소를 생성하고, 요소를 제거하고, 부모 요소를 다시 만들고, 요소를 복제하는 방법을 살펴 보겠습니다. 요소 생성 대화형 사이트 및 웹앱에서 HTML 요소를 동적으로..

지금 쯤 깨달았을지 모르지만, 우리의 DOM은 거대한 나무처럼 보입니다. 위험하게 나뭇가지에 매달려 있고 뾰족한 것들을 피하려고 노력하는 거대한 나무입니다. 좀 더 기술적으로 이해하기 위해 DOM의 요소는 브라우저에서 최종적으로 보게 될 내용을 정의하는 계층 구조로 배열됩니다. 이 계층은 HTML 요소를 구성하는 데 사용됩니다. 또한 CSS 스타일 규칙이 어떤 스타일에 어떤 스타일을 적용할지 이해하는데도 사용됩니다. 자바 스크립트 관점에서 이 계층 구조는 약간의 복잡성을 추가합니다. DOM에서 현재 우리가 어디에 있고 어디에 있어야 하는지 알아내기 위해 상당한 시간을 할애해 공부해 보겠습니다. 주변에서 길 찾기 요소를 찾아서 멋진 작업을 수행하기 전에 먼저 요소가 있는 위치에 도달해야합니다. 이 주제를 ..

콘텐츠의 스타일을 지정할 때 가장 일반적인 방법은 스타일 규칙을 만들고 해당 selector가 그 요소를 대상으로 지정하는 방법입니다. 일반적인 스타일 규칙은 다음과 같습니다. .batman { width: 100px; height: 100px; background-color: #333; } 위 스타일 규칙을 적용받는 HTML 요소는 다음과 같이 지정합니다. 어떤 웹 페이지에서든 우리가 보는 모든 것을 스타일링하기 위한 스타일 규칙을 한개에서 여러 개까지 볼 수 있습니다. 하지만 위와 같은 방법이 CSS를 사용하여 콘텐츠 스타일을 지정하는 데 사용할 수 있는 유일한 방법은 아닙니다. 같은 작업을 수행하는 여러 가지 방법이 없다면 HTML이 아닙니다! 인라인 스타일을 차치하고 볼때, CSS 스타일링을 컨트..

이번 강좌에서는 지금까지 배운 지식을 바탕으로 JavaScript를 사용하여 DOM 요소에 액세스하고 수정하는 기본적인 방법에 대해 알아볼 예정입니다. 이 시점에서 여러분은 DOM이 무엇인지 알 것입니다. querySelector 및 querySelectorAll을 사용하여 요소를 찾는 방법도 살펴 보았습니다. 다음은 찾은 DOM 요소를 수정하는 방법을 배우는 것입니다. 앞으로는 JavaScript를 사용하여 일부 요소의 텍스트를 변경하거나, 이미지를 다른 것으로 교체하거나, 문서의 한 부분에서 다른 부분으로 요소를 이동하거나, 인라인 스타일을 설정하거나 등의 DOM 수정에 대해 배우겠습니다. DOM 요소는 객체입니다 JavaScript를 사용하여 브라우저에 표시되는 내용을 수정하는 기능은 하나의 주요 ..

이전 강좌에서 봤듯이 DOM은 HTML 문서에 존재하는 모든 요소로 구성된 트리와 같은 구조 일뿐입니다. 세부 사항은 중요하지 않습니다. 중요한 것은 데이터에 액세스하고 데이터를 읽거나 수정하려는 모든 HTML 요소가 주변에 떠 있다는 것입니다. HTML 요소를 찾는 방법에는 여러 가지가 있습니다. 단순한 방법은 바로 나무와 같은 구조로 배열되어 있어 간단히 말해 위아래로 움직여 무언가를 찾는 방법입니다. 이번 강좌에서는 모든 DOM 검색 요구의 95 %를 충족시키는 querySelector 와 querySelectorAll이라는 두 가지 내장 함수를 사용하는 방법을 배우게됩니다. querySelector 맛보기 querySelector 및 querySelectorAll의 기능을 설명하려면 다음 HTML..

지금까지 우리는 자바스크립트만 따로 살펴보았습니다. 기본 기능에 대해 많은 것을 배웠지만 HTML, CSS 없이 순전히 코드만 작성했는데요, 실제 웹 개발에서는 전혀 딴 세상입니다. 다음 섹션에서는 DOM(Document Object Model)으로 알려진 신비한 데이터 구조 및 프로그래밍 인터페이스에 대해 알아봅시다. 이것이 무엇인지, 왜 유용한 지, 그리고 향후 튜토리얼에서 수행할 모든 작업과 어떻게 연결되는지 배우게 됩니다. HTML, CSS, Javascript 가 하는 일 DOM이 무엇인지 알아보기 전에 이미 알고 있는 몇 가지를 빠르게 살펴 보겠습니다. 우선, HTML 문서에 넣는 내용은 HTML, CSS 및 JavaScript를 중심으로 구성됩니다. 브라우저에 표시되는 내용을 구축하는 데 있..

이번 시간에는 세트(Set)에 대해 알아 보겠습니다. 여러 데이터를 저장할 때 아마 배열이 가장 먼저 떠오를 것입니다. 배열은 꽤 오랫동안 사용되어져 왔고 또한 매우 유연하며 사용하기 쉽게 만드는 많은 특성이 있습니다. 지난 몇 년 동안 JavaScript는 데이터 모음을 저장하는 또 다른 방법을 얻었습니다. 그 방법은 세트(Set)로 알려진 배열 모양의 방법을 통하는 것입니다. 표면적으로 배열과 세트는 매우 비슷해 보입니다. 그러나 세트는 배열과 다르게 보이는 많은 특성을 가지고 있습니다. 가장 큰 특징은 중복 값의 저장 허용 여부입니다. 세트에는 유니크한 아이템만 저장할 수 있습니다. 우리가 원하는 것을 저장하기 위해 세트를 사용할 수 있습니다. 그러나 배열과는 달리 우리는 그 항목을 한 번만 저장할..

데이터 저장, 검색 또는 전송과 관련하여 사용할 수 있는 파일 형식과 데이터 구조가 많이 있습니다. 처리하는 다양한 종류의 데이터를 처리하기 위해 텍스트 파일, Word 문서, Excel 스프레드 시트, zip 파일 등을 사용했을 것입니다. 웹 세계에는 다른 모든 것보다 우위를 차지하는 하나의 형식이 있습니다. 이 형식은 JSON (JavaScript Object Notation의 약자)으로 알려져 있습니다. 이번 편에서는 JSON 객체를 만드는 모든 방법에 대해 알아볼 것입니다. 우리는 그 안에 무엇이 들어가는지, 그리고 값을 읽는 방법에 대해 자세히 살펴볼 예정입니다. JSON 이란? JavaScript에서는 "객체 리터럴 문법"을 사용하여 객체를 정의하는 방법이 있습니다. let funnyGuy =..