나디아 성장 일기

at( index ): 배열(Array)의 해당 index의 요소 반환문자열(String)에도 사용 가능⭕양수, 음수 사용양수(+): 배열의 앞에서부터 카운트음수(-): 배열의 끝에서부터 카운트const cart = ["사과", "바나나", "배"];// 배열의 마지막 요소 반환 함수function returnLast(arr) { return arr.at(-1);}const item1 = returnLast(cart);console.log(item1); // '배'// 배열에 요소 추가cart.push("오렌지");const item2 = returnLast(cart);console.log(item2); // '오렌지' ex 1. 병합에도 사용 const numberList = [2, -2, 1]; ..

ECMAScript: ECMA-262 기술 규격에 따라 정의하고 있는 표준화 된 스크립트 언어Ecma 인터내셔널에 의해 제정된 ECMA-262 기술 규격에 의해 정의   ⏩ Ecma 인터내셔널(Ecma International): 정보와 통신 시스템을 위한 국제적 표준화 기구  1961년 유럽에서 컴퓨터 시스템을 표준화하기 위해 설립  ⏩ TC39(Technical Committee 39): ECMAScript의 표준화를 담당하는 ECMA International의 기술 위원회    ⏩ ECMA-262 기술 규격 : ECMAScript 표준의 공식 문서ECMA International의 기술 위원회인 TC39에서 개발하고 관리함  ⏩ ES6 (=== ES2015)ECMA-262 표준의 제 6판     E..

📌 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    스태틱 메서드..

모듈(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: 이벤트가 정확히 어디서 발생했는지에 대한..