My Tech Blog (Coding/JavaScript)

내가 보려고 만든 이벤트 핸들러 🐦목표이벤트, 이벤트 핸들러, 이벤트 버스 및 addEventListener에 대해 알아보자.그리고 jQuery와 Vanilla JavaScript에서 이벤트를 다루는 법에 대해 알아보자. 다시 한 번 말하지만 jQuery는 한때 웹 개발에서 필수적인 라이브러리였지만, 이제는 Vanilla JavaScript(순수 JS)나 React, Vue, Svelte 같은 프레임워크가 대체하면서 사용이 줄어들고 있다. 그래서 addEventListener 위주로만 정리했고 순수하게 이벤트 종류만 궁금한 사람은 6번부터 읽으면 된다. 1. 자바스크립트 이벤트 (JavaScript Event)이벤트(Event)는 사용자나 시스템이 웹 페이지에서 일으키는 동작이다.예를 들어, 버튼 클..

탐색선택자를 사용하면 기본 선택자로 선택한 요소 중 원하는 요소를 한 번 더 탐색해서 좀 더 정확하게 선택할 수 있다. 대표적인 예로 배열의 인덱스를 사용해서 선택하는 `위치탐색 선택자`와 배열에 담겨진 요소 중 지정된 속성과 값으로 선택하는 `속성 탐색 선택자`가 있다.  1. 위치 탐색 선택자 ▼기본 선택자로 선택한 요소는 배열에 담기게 된다.그래서 배열의 인덱스를 사용하면 특정 요소를 좀 더 정확하게 선택할 수 있게 되는 것이다. 종류용법설명$("요소 선택:first")$("요소 선택").first()$("li:first")$("li").first()전체 요소 중 첫번째 요소만 선택$("요소 선택:last")$("요소 선택").last()$("li:last")$("li").last()전체 요소 ..

함께 보면 좋은 관련 포스팅 ▼ [JavaScript] jQuery를 사용할 때 유의해야 할 사항들⭐ 문서가 로드된 후 실행하자⭐ jQuery 라이브러리 먼저 로드하자⭐ $ 충돌 방지 필요 시 noConflict ⭐ 이벤트 중복 방지 off()⭐ AJAX 캐싱 방지 (cache: false) ⭐ 동적 요소에 이벤트 적용 on()⭐ 성능 최awesomepossum.tistory.com [JavaScript] Object(객체), DOM(문서객체모델), function() 함수 기초 실습1. Object (객체)  2. DOM (Document Object Model)2-1. DOM(문서객체모델) 문서객체모델(DOM) HTML CSS JS  2-2. innerHTML vs textContent 오늘은 문서객..

⭐ 문서가 로드된 후 실행하자⭐ jQuery 라이브러리 먼저 로드하자⭐ $ 충돌 방지 필요 시 noConflict ⭐ 이벤트 중복 방지 off()⭐ AJAX 캐싱 방지 (cache: false) ⭐ 동적 요소에 이벤트 적용 on()⭐ 성능 최적화 (map(), .append() 최소화) 1. 문서가 완전히 로드된 후 실행하기선택자를 사용하기 위해서는 문서 객체를 먼저 불러와야 한다. 그래서 HTML이 로드되기 전에 jQuery 코드가 실행되면 요소를 찾을 수 없는 문제가 발생한다.📌 해결책: $(document).ready() 사용 또는 변경될 텍스트 ⭕ [방법 2] $(document).ready() 사용 변경될 텍스트$(document).ready()를 사용하면 문서가 완전히 ..

1. Object (객체)  2. DOM (Document Object Model)2-1. DOM(문서객체모델) 문서객체모델(DOM) HTML CSS JS  2-2. innerHTML vs textContent 오늘은 문서객체모델에 대해서 배워보았다 2-3. querySelector vs getElementByID요즘에는 어차피 다 라이브러리 쓰지만 DOM 활용해보기 h1태그 내용 변경 a 태그 생성 ul태그 생성   2-4. addEventListener 난버튼이지롱 2-5. 예제1_counting 0 증가 감소 2-6. 예제2_반복문 출력..

# 템플릿 리터럴(Template Literal)ES6부터 새로 도입된 문자열 표기법문자열 생성시 따옴표 대신, 백틱(`)을 사용var str_01 = `hello world`;//백틱 사용const x='x';const y='y';const z='z';console.log(`${x}는 x, ${y}는 y, ${z}는 z이다. `); //x는 x, y는 y, z는 z이다. ▶︎ 백틱(`)은 자바스크립트 JS ES6(ECMAScript 2015)부터 도입되었다.▶︎ 개행 문자(\n)를 사용하지 않아도 자동 줄바꿈 ▶︎ 생김새가 작은따움표(')와 비슷하니 헷갈리지 않도록 주의# 템플릿 리터럴 - 백틱(`)의 기능 줄바꿈(개행: Multi-line strings)  ▶︎ 백틱(`)으로 템플릿 리터럴을 사용하면..

// JSON 데이터 다루기 위한 JS 사용법// [1] : 데이터 const person = [ `{"name":"이순신","age":20,"nationality":"대한민국"}`, {"name":"맥아더","age":30,"nationality":"미국"}, {"name":"엘리자베스","age":40,"nationality":"영국"}, {"name":"잔다르크","age":50,"nationality":"프랑스"},]; console.log(typeof person); // objectconsole.log(typeof person[0]); // stringconsole.log(typeof person[1]); // object 첫번째 요소를 작은 따옴표로 감싸면 string ..

브라우저 위에서 동작하는 웹사이트나 웹 어플리케이션과 같은 Client들이 어떻게 Server와 통신할 수 있을까? 1. HTTP(Hypertext Transfer Protocal)Client 와 Server 이 어떻게 Hypertext를 주고 받을 수 있을 지 규약한 프로토콜Client가 Server에게 데이터를 request하면, Server는 그에 맞는 response를 Client로 보냄 2. AJAX(Asynchronous JavaScript And XML)웹페이지에서 동적으로 서버에게 데이터를 주고 받을 수 있는 기술대표적인 예로는 브라우저API에서 제공하는 XMLHttpRequest(XHR) 오브젝트가 있다.혹은 fecth() API로 간편하게 데이터를 주고받을 수 있다.  3. XMLhtm..