My Tech Blog (JS)

내가 보려고 만든 이벤트 핸들러 🐦목표이벤트, 이벤트 핸들러, 이벤트 버스 및 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()를 사용하면 문서가 완전히 ..

# 템플릿 리터럴(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 ..

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`가 콘텐츠 영역..

이번 포스팅에서 promise, async await의 차이점을 알아보자!1. 자바스크립트에서 비동기 처리가 필요한 이유자바스크립트에서 비동기 처리가 필요한 이유는 주로 응답 시간이 긴 작업을 효율적으로 처리하기 위함이다. 자바스크립트는 기본적으로 단일 스레드로 동작하기 때문에, 시간이 오래 걸리는 작업이 있을 경우 이를 비동기로 처리하지 않으면 전체 애플리케이션이 멈추거나 반응이 느려질 수 있다.js는 동기적인 언어이나  대기시간이 긴 작업(서버에 데이터를 요청하는 작업)을 하는 경우 비동기 작업을 하기도 한다.아래는 비동기 처리가 필요한 간단한 예시이다.getHotels()는 서버에서 호텔의 데이터를 받아오는 함수이다.그리고 우리는 getHotels()의 응답값을 받아 출력하고 싶다.function ..