나디아 성장 일기

📌 async: 비동기 함수를 정의, Promise를 반환 async function 함수명(매개변수) {     return 결과 값;} function 앞에 async를 붙이면 해당 함수는 항상 프라미스 객체(Promise object)를 반환- 내부에서 비동기 작업을 수행한다. - Promise가 아닌 것은 프라미스로 감싸 반환한다. async 함수는 항상 Promise를 반환하기 때문에 then() 메서드를 사용해서 호출, 처리⭕async function exampleFunction() { return "Hello, World!";}exampleFunction().then(result => console.log(result)); // "Hello, World!"  예시 2async func..

동기(Synchronous): 코드가 한 줄씩 순차적으로 실행되는 방식 세탁기 한 대- 이 빨래가 다 끝나야 다음 빨래 가능     비동기(Asynchronous) : 코드가 즉시 실행되지 않고, 특정 작업이 완료될 때까지 기다리지 않고 다음 코드를 먼저 실행하는 방식 특정 작업(서버 요청, 타이머 등)이 완료되면 콜백 함수를 통해 결과를 처리 세탁기 여러 대- 이 빨래 돌리면서 다른 빨래도 돌릴 수 있음    비동기를 다루는 방법1. 콜백 함수(Callback Function)특정 작업이 완료된 후 호출되는 함수콜백 지옥(Callback Hell) 문제를 야기할 수 있다.function fetchData(callback) { setTimeout(() => { callback("데이터"); },..

목차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..