My Tech Blog (JavaScript)

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

⭐ 문서가 로드된 후 실행하자⭐ 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_반복문 출력..

// 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 ..

JSON과 XML은 데이터를 표현하고 전송하기 위해 사용하는 두 가지 형식이다.1. XMLXML은 데이터를 저장하고 전달할 목적으로 만들어졌으며, 저장되는 데이터의 구조를 기술하기 위한 언어이며 EXtensible Markup Language의 약자이다. - XML은 다른 목적의 마크업 언어를 만드는 데 사용되는 다목적 마크업 언어- XML은 다른 시스템끼리 다양한 종류의 데이터를 손쉽게 교환할 수 있도록 해준다.- XML은 새로운 태그를 만들어 추가해도 계속해서 동작하므로, 확장성이 좋다. - XML은 데이터를 보여주지 않고, 데이터를 전달하고 저장하는 것만을 목적으로 한다.- XML은 텍스트 데이터 형식의 언어로 모든 XML 문서는 유니코드 문자로만 이루어진다.XML 기반의 언어 XHTML, SVG,..

브라우저 위에서 동작하는 웹사이트나 웹 어플리케이션과 같은 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..

자바스크립트 이벤트 리스너 간단히 포스팅하려고 심플한 To Do List를 만들어 보았다!    1. 구글폰트, 스타일시트, 자바스크립트 연결- `style.css`와 `script.js` 연결- 구글 폰트 `Poppins`  사용하기 위해서 Embed Code를 2.  전체  적용될 css 설정 & container에 배경 추가⚡  폰트는 구글 폰트 `Poppins` 로 설정 ⚡ `box-sizing: border-box;`요소의 크기를 계산할 때 `패딩(padding)`과 `테두리(border)`까지 포함하도록 설정하는 속성. 기본적으로 CSS에서 box-sizing의 기본값은 `content-box`이다. `content-box`는 요소의 `width`와 `height`가 콘텐츠 영역..

📝 JavaScript 🖥️ String 객체오늘은 저번 포스팅에 이어 자바스크립트 문자열 객체(String Object)의 메서드와 속성에 대해 알아볼게요. 주의할 점! 메서드를 사용할 때 인덱스값을 매개변수로 사용할 때가 있는데인덱스값은 0부터 시작하며, 띄어쓰기 포함입니다. ​✅ 1. String 객체의 메서드 및 속성 한 눈에 보기 2​종류기능split("문자")지정한 문자를 기준으로 문자 데이터를 나누어 배열에 저장하여 반환let str = "amazingkwebkstudy";str.split("k"); // 배열 형식으로 반환arr = ["amazing", "web", "study"]toLowerCase()문자열에서 영문 대문자를 모두 소문자로 변환let str = "Amazing Web ..