1. ref와 reactiveref: 주로 원시 타입(String, Number, Boolean 등)을 반응형으로 만들 때 사용하지만, 객체나 배열도 감쌀 수 있습니다..value를 통해 값에 접근하고 변경합니다.reactive: 객체(Object)나 배열(Array)과 같은 참조 타입만을 반응형으로 만들 때 사용합니다. .value 없이 직접 속성에 접근하고 변경합니다.2. watch(ref)watch 함수에 ref로 선언된 변수를 직접 전달하면, ref의 .value 속성 변화를 감지합니다.코드 예시: Count: {{ count }} Increment Count User Name: {{ user.name }} User Age: {{ user.age }} Change U..

JavaScript에서 클로저(Closure)란?클로저(Closure)는 함수가 자신이 선언된 렉시컬 환경(Lexical Environment)을 기억하고, 그 환경에 접근할 수 있는 기능을 의미합니다. 즉, 내부 함수가 외부 함수의 변수에 접근할 수 있으며, 외부 함수 실행이 끝난 후에도 변수의 값을 유지할 수 있습니다.클로저의 기본 개념함수 내부에서 선언된 함수클로저는 보통 함수 내부에서 정의된 또 다른 함수로 구성됩니다. 내부 함수는 외부 함수의 변수를 참조할 수 있으며, 외부 함수 실행이 종료된 후에도 변수의 값을 유지합니다.예제 코드function outerFunction(outerVariable) { return function innerFunction(innerVariable) { ..

이벤트 위임JavaScript에서 이벤트를 처리할 때, 보통 특정 요소에 직접 이벤트 리스너를 등록해야하는데, 동적으로 생성되는 요소에 이벤트를 걸어야 하거나 성능 최적화가 필요한 경우, 이벤트 위임(Event Delegation) 을 활용할 수 있다. 이벤트 위임이란 부모 요소에 하나의 이벤트 리스너를 등록하고, 자식 요소의 이벤트를 부모 요소에서 처리하는 방식이다. 이렇게 하면 여러 개의 요소에 개별적으로 이벤트 리스너를 추가하지 않아도 효율적으로 이벤트를 관리할 수 있다.이벤트 전파 (Event Propagation) 개념이벤트 위임을 이해하려면 이벤트 전파(Event Propagation) 를 먼저 알아야 합니다. DOM에서 이벤트가 발생하면 캡처링(Capturing) → 타겟(Target) → ..

Intro처음 변수명부분에  [변수명1, 변수명2, ...변수명3] 이런 식으로 있는 코드를 보았을 떄, 와.....저건 또 뭐야무슨 괴생물이 있어? 어떻게 동작하길래 저렇게 사용하는거지 들어가는 값은 객체 하나인데 받는 변수는 여러개? 뭐야 라는 생각을 했었다. 얼핏 찾아보기로는 안에 있는 속성들을 꺼내서 사용하는데 구조분해할당처럼 전부 풀어서 사용하기보단 원하는 것만 꺼내서 사용하기 위한 방법인거 같은데 맞는지 확인해보자Destructuring Assignment (구조 분해 할당)배열이나 객체에서 값을 쉽게 꺼내서 변수에 할당하는 문법이야.배열 구조 분해 할당const numbers = [1, 2, 3, 4, 5];const [first, second, ...third] = numbers;conso..

Intro(...) 이게 뭐야 할 말 생략 된건가... 자바에서는 자주 써보지 않았지만 가변인자라고 있는걸 아는데, 스프레드 연산자, 나머지 파라미터 단어부터 생소하네나머지 연산자는 자바의 가변인자랑 비슷한걸려나?Spread Operator (전개 구문)배열이나 객체를 펼쳐서(전개해서) 사용하는 연산자이다.배열에서 Spread 사용const arr1 = [1, 2, 3];const arr2 = [4, 5, 6];// 기존 배열을 변경하지 않고 새로운 배열을 만들 때const arr3 = [...arr1, ...arr2];console.log(arr3); // 출력: [1, 2, 3, 4, 5, 6]// 배열 복사 (깊은 복사)const arr4 = [...arr1]; // 기존 배열을 변경하지 않음 co..

IntroFetch APIFetch API는 네트워크 요청을 보내고 데이터를 가져오는 인터페이스이며, 기존의 XMLHttpRequest보다 간결하고 강력한 비동기 요청 방식이다.특징Promise 기반으로 비동기를 더 쉽게 다룬다.(응답값으로 Promise 객체를 반환)Http 기본 요청 방식은 GET이며, 두번 째 인자값 안에서 method 속성을 통해 다른 메서드를 사용할 수 있다.응답 객체의 body는 ReadableStream 형태이므로, 본문을 확인하기 위해서는 JSON형태로 변환해야한다.기본 문법  및 사용 예시fetch(url, options) .then(response => response.json()) // JSON 변환 .then(data => console.log("응답 데이터 :"..

Intro...잠깐 봤는데도 이해가 안되네 resolve 에 도달하면 then이고 reject 도달하면 catch? 개발자 의도나 실수로 둘 다 도달하지 않으면 일단 코드는 정상적으로 동작한거니 then으로 가나?.... 어지럽네 진짜PromiseMDN Promise 문서에 따르면 아래와 같이 나와있다.Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타냅니다.Promise는 프로미스가 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자로, 비동기 연산이 종료된 이후에 결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있습니다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있습니다. 다만 최종 결과를 반환하는 것이 아니고, ..

Intro동기(Synchronous) vs 비동기(Asynchronous)동기 처리코드가 위에서 아래로 순차적으로 실행되며, 하나의 작업 완료될 때까지 그 다음 작업은 기다렸다가(Blocking) 완료가 되면 다음 작업이 시작하게 된다.비동기 처리동기 처리와 달리 하나의 작업이 완료가 되지 않아도 다른 작업을 실행하여 병렬 작업하는 방식이다.대표적으로 setTimeout(), setInterval(), Promise, Async/Await, Fatch API 등이 있고 백그라운드에서 Event Loop로 관리된다.타이머 함수(setTimeout, setInterval)setTimeout()비동기 함수로, 일정 시간이 지난 뒤 한 번만 실행반환 값으로 timeout ID를 반환setInterval(동작 할..