나디아 성장 일기

목차PromisePromise 메서드then()catch()finally()Promise.allPromise.racePromise 체이닝📌 Promise : 비동기 작업을 처리하고 결과를 관리하는 데 사용되는 객체let promise = new Promise(function(resolve, reject) {                                     executor});비동기 작업(네트워크 요청, 파일 읽기, 타이머 등)을 처리할 때 사용 성공하면 then(), 실패하면 catch() 실행 실제 promise에는 setTitmeout()이 필요 없음(예시에서는 비동기를 구현하기 위해 사용됨)   👍 promise 장점비동기 작업의 가독성 향상 - 콜백 지옥을 줄여줌 에러 처리의 ..

인스턴스 메서드 (Instance Method) : 클래스의 인스턴스에서 호출되는 메서드 해당 클래스의 각 인스턴스에 대해 개별적으로 존재인스턴스의 데이터(속성)를 조작하거나 접근하는 데 사용 클래스의 인스턴스가 생성될 때마다 새로운 메서드가 생성됨 클래스의 인스턴스를 통해 호출 `참조 변수.메소드 명()`class MyClass { constructor(name) { this.name = name; } greet() { console.log(`Hello, my name is ${this.name}`); }}const obj = new MyClass('Alice');obj.greet(); // Hello, my name is Alice    스태틱 메서드..

자바스크립트 슬라이드(slide) 라이브러리  Swiper: 유연하고 사용하기 쉬운 자바스크립트 슬라이드 라이브러리  Swiper - The Most Modern Mobile Touch SliderSwiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.swiperjs.com   설치 CDN 방식   npm 방식1. npm 설치npm install swiper 2. JS 파일에서 가져오기import Swiper from 'swiper';import 'swiper/swiper-bundle.css';   HTML 구조 swiper > swiper-wrappe..

모듈(module): 분리된 개별 코드 파일   모듈 프로그래밍: 코드의 재사용성과 유지보수성을 높이기 위해 코드를 여러 모듈로 나누는 기법    모듈의 핵심 기능엄격 모드(use strict)로 실행됨 - 이어야 export, import 가능✨모듈 만의 스코프(scope)가 있음- 모듈 내부에서 정의한 변수나 함수는 다른 스크립트에서 접근할 수 없다❌ 한 번만 평가됨 - 동일한 모듈이 여러 곳에서 사용되더라도 모듈은 최초 호출 시 단 한 번만 실행된다. 지연 실행된다.인라인 모듈 스크립트도 비동기 처리할 수 있다. export (내보내기): 변수, 함수, 클래스를 모듈 밖으로 내보낼 수 있다.   named export (이름 내보내기) 한 파일 내에서 여러 개 내보내기(export) 가능 여러 항..

브라우저 기본 동작  : 특정 HTML 요소에 대해 기본적으로 수행하는 동작 링크()를 클릭하면 해당 URL로 이동폼(form)을 제출하면 페이지가 새로고침되면서 폼 데이터가 서버로 전송체크박스()를 클릭하면 체크 상태가 변경    브라우저 기본 동작 막기 ⛔1. event.preventDefault(): 특정 이벤트의 기본 동작을 막고 자바스크립트로 정의한 동작을 사용해야 할 경우 사용기본 동작(링크 클릭, 폼 제출, 체크박스 클릭 등)을 제어할 때 사용 사용자가 정의한 동작을 구현할 때 유용Example Link   2. on 속성 사용 시 "false" 반환 코드 가독성과 유지보수성을 위해 addEventListener와 e.preventDefault()를 사용하는 것이 좋다. Example Li..

이벤트 위임(Event Delegation): 이벤트 버블링을 활용하여 여러 자식 요소에 각각 이벤트 리스너를 붙이지 않고, 상위 요소에서 한 번에 이벤트를 처리하는 방법 비슷한 방식으로 여러 요소를 다뤄야 할 때 사용 요소마다 핸들러를 할당하지 않고, 요소의 공통 조상에 이벤트 핸들러를 하나만 할당해도 여러 요소를 한꺼번에 다룰 수 있다⭕공통 조상에 할당한 핸들러에서 event.target을 이용하면 실제 어디서 이벤트가 발생했는지 알 수 있다⭕많은 핸들러를 할당하지 않아도 되기 때문에 초기화가 단순해지고 메모리가 절약된다⭕DOM 수정이 쉬워진다👍 Item 1 Item 2 Item 3   이벤트 위임 순서컨테이너에 하나의 핸들러를 할당핸들러의 event.target을 사용해 이벤트가 발생한 요소..

이벤트 버블링( Event  Bubbling): 이벤트가 가장 안쪽의 요소(이벤트가 발생한 요소)에서 시작하여 상위 요소들로 전파되는 과정요소에 이벤트가 발생하면 해당 요소의 핸들러가 동작 ➡ 이어서 부모 요소의 핸들러가 동작 ➡ 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복 자식 요소 → 부모 요소 → 조부모 요소 ... 최상위 요소 순서addEventListener의 3번 째 인자인 capture 옵션을 false로 설정❗elem.addEventListener(..., {capture: false})  /* form 선택 시 -> formdiv 선택 시 -> div, formp 선택 시 -> p, div, form */    event.target: 이벤트가 정확히 어디서 발생했는지에 대한..

이벤트 핸들링(Event Handling) 핸들러(handler): 사용자의 행동에 어떻게 반응할지를 자바스크립트 코드로 표현한 것    이벤트 핸들링 3가지 방법 HTML 속성: HTML 태그 안에 속성으로 할당 (ex. onclick="handler()")- 잘 사용하지 않음❌DOM 프로퍼티 : 이벤트를 함수로 DOM 프로퍼티에 할당(ex. element.onclick = handler)- 복수 할당이 불가능❌메서드 : `addEventListener`, `remoceEventListener`(ex. element.addEventListener(event, handler[, phase]))  이벤트 추가/제거  addEventListener : 특정 이벤트가 발생했을 때 실행될 함수를 등록 elem..

요소 생성 메서드   document.createElement(tagName) : 태그 이름을 사용해 새로운 요소 생성 let div = document.createElement('div')   document.createTextNode(value) : 새로운 텍스트 노드 생성 let textNode = document.createTextNode('안녕하세요.');   element.cloneNode(deep)  : 요소 복제deep==true일 경우, 모든 자손 요소도 복제 삽입 메서드임의의 노드 목록이나 문자열을 넘겨줄 수 있다. 문자열을 넘겨주면 자동으로 텍스트 노드가 만들어진다.  node.append(노드나 문자열): node 끝에 삽입  node.prepend(노드나 문자열): node 맨 앞..

GSAP (The GreenSock Animation Platform): 애니메이션 자바스크립트 라이브러리  Homepage | GSAPGSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser.gsap.com    📌 라이브러리 가져오기CDN 방식  Installation | GSAP | Docs & LearningGSAP is "framework agnostic", this means it can be used in React, Webflow, Wordpress, or any other..