제리코드르렁

부모 요소 자식 버튼 **이벤트 전파(Event Propagation)**는 웹 페이지에서 특정 이벤트가 발생했을 때, 그 이벤트가 DOM 트리 상에서 어떻게 전달되는지를 설명하는 개념임. 이벤트 전파는 **버블링(Bubbling)**과 캡처링(Capturing) 두 단계로 나뉘며, 이를 통해 이벤트가 DOM 트리의 부모 요소나 자식 요소에 영향을 미칠 수 있음. 1. **이벤트 전파(Event Propagation)**의 기본 개념이벤트 전파는 DOM 트리에서 이벤트가 발생했을 때, 그 이벤트가 어떤 순서로 전달되는지를 설명하는 방식임. 이벤트는 캡처링 단계와 버블링 단계를 거쳐 전파됨:캡처링(Capturing): 이벤트가 최상위 부모 요소(즉, document 객체)에서 시작해 이벤트가 발생한 요소..

HTML 요소 중에는 개발자가 이벤트를 명시적으로 연결하지 않았음에도 자동으로 동작하는 기능을 갖는 것들이 있음. 이런 기능을 우리는 **기본 이벤트(Default Event)**라고 부름. 기본 이벤트는 HTML 마크업만으로도 특정 동작을 수행하게 할 수 있음. 하지만 이 기본 동작이 때로는 원하지 않는 경우가 있을 수 있어, 이벤트 객체의 preventDefault() 메서드를 사용해 기본 이벤트를 중지할 수 있음.대표적인 기본 이벤트 예시: 요소: 클릭 시 **href**에 정의된 경로로 이동함.마우스 오른쪽 클릭: 브라우저의 기본 컨텍스트 메뉴가 나타남. 요소: submit 버튼 클릭 시, action 속성에 지정된 URL로 폼 데이터가 전송됨. 요소: 사용자가 입력한 문자가 텍스트 박스에 바로 ..

**이벤트 객체(Event Object)**는 브라우저에서 발생하는 이벤트에 대한 정보를 담고 있는 객체로, 이벤트가 발생할 때마다 자동으로 생성되어 이벤트 핸들러로 전달됨. 이를 통해 이벤트에 대한 다양한 정보를 얻을 수 있으며, 이벤트의 기본 동작을 제어하거나 이벤트의 전파를 멈추는 등의 작업을 할 수 있음. 1. 이벤트 객체가 포함하는 정보이벤트 객체는 이벤트와 관련된 다양한 정보를 포함함. 여기에는 이벤트가 발생한 타겟 요소, 이벤트 유형, 이벤트가 발생한 위치(좌표), 사용된 키보드 키 등의 정보가 포함될 수 있음.주요 속성:target: 이벤트가 발생한 HTML 요소.type: 발생한 이벤트의 종류 (예: 'click', 'keydown').clientX, clientY: 이벤트가 발생한 위치..

이벤트 핸들러 메서드 요약이벤트 핸들러 메서드는 Vue 컴포넌트에서 사용자 상호작용에 따라 호출되는 함수임.메서드로 로직을 분리하여 템플릿의 복잡성을 줄이고, 가독성을 높임.이 코드에서는 입금과 인출 버튼 클릭 시 각각 **deposit()**과 withdraw() 메서드가 호출되어 금액 처리와 유효성 검사가 수행됨.유효성 검사나 조건 처리 같은 복잡한 로직은 인라인 이벤트 처리보다 메서드로 분리하는 것이 효율적임.이처럼 이벤트 핸들러 메서드를 사용하면, Vue 컴포넌트에서 복잡한 로직을 더 명확하고 구조적으로 처리할 수 있음.이벤트 핸들러 메서드란 Vue.js에서 **사용자 상호작용(이벤트)**이 발생했을 때, 해당 이벤트에 대한 처리 로직을 메서드로 정의하여 호출하는 방식을 말함. 이러한 메서드는 V..

인라인 이벤트 처리란 Vue.js에서 템플릿 안에 바로 이벤트 핸들러를 넣어서 처리하는 방식임. v-on 디렉티브나 **@**을 써서 간단한 로직을 직접 작성할 수 있음. 복잡한 로직은 메서드로 빼는 게 좋지만, 간단한 경우 인라인 이벤트 처리로 바로 처리 가능함.  금액: 입금 인출 계좌 잔고: {{ balance }} 1. 인라인 이벤트 처리 사용 부분이 코드에서 인라인 이벤트 처리는 다음과 같이 사용됨:입금인출**v-on:click="balance += parseInt(amount)"**는 버튼을 클릭했을 때 amount 값을 정수로 변환한 후 **balance**에 더하는 작업을 인라인에서 직접 처리함.**v-on:click="balance -= parseInt(amount)"**는 인출..

**관찰 속성(Watcher, Watch Property)**은 Vue.js에서 특정 데이터를 **감시(watch)**하고, 그 데이터가 변경될 때마다 특정 로직을 실행할 수 있는 기능임. 워치 속성은 주로 비동기 작업, 데이터 변화를 기반으로 한 추가 처리 또는 복잡한 연산이 필요할 때 유용하게 사용됨.Vue의 반응형 시스템은 data나 computed의 값을 자동으로 갱신해주지만, 때로는 특정 데이터의 변화를 수동으로 감시하고, 그에 따라 추가 작업이 필요한 경우가 있음. 이럴 때 관찰 속성을 사용하여 필요한 동작을 처리할 수 있음.1. 관찰 속성의 기본 개념Vue에서 관찰 속성을 사용하면, data나 computed의 특정 변화를 감지하고, 그 변화에 대응하는 로직을 실행할 수 있음. 관찰 속성은 ..

Vue.js 애플리케이션에서 Vue 인스턴스나 컴포넌트가 생성되고, DOM에 렌더링되며, 업데이트되거나 파괴될 때 특정 단계에서 실행되는 메서드임. Vue 컴포넌트는 생성에서부터 파괴에 이르기까지 여러 가지 상태를 거치며, 이 과정에서 특정 작업을 수행할 수 있는 훅(Hook)을 제공함.이러한 생명주기 메서드를 활용하면, Vue 컴포넌트의 각 단계에서 API 호출, 타이머 설정, 리소스 해제 등의 작업을 적절한 시점에 실행할 수 있음.1. Vue 인스턴스 생명주기Vue 컴포넌트는 아래와 같은 주요 단계로 나뉘며, 각 단계에서 생명주기 메서드가 호출됨:생성 단계: Vue 인스턴스가 초기화됨.DOM에 마운트 단계: 인스턴스가 DOM에 연결되어 화면에 렌더링됨.업데이트 단계: 데이터가 변경되어 화면이 다시 렌..

메서드(Method)는 Vue.js에서 인스턴스나 컴포넌트 내에서 정의된 함수를 의미하며, 주로 이벤트 처리나 특정 동작을 수행할 때 사용됨. Vue 인스턴스의 methods 옵션 안에 정의된 함수들은 템플릿에서 쉽게 호출할 수 있으며, Vue 인스턴스의 데이터에 접근하고, 이를 변경할 수 있음.요약:메서드는 Vue 인스턴스나 컴포넌트에서 특정 동작을 수행하는 함수로, 이벤트 처리나 데이터 조작을 담당함.템플릿에서는 이벤트 디렉티브(@click, @input 등)를 사용하여 메서드와 사용자 상호작용을 연결할 수 있음.메서드 내부에서 **this**를 사용하여 Vue 인스턴스의 데이터에 접근하고 수정할 수 있음.메서드와 계산된 속성의 차이는 캐싱 여부이며, 복잡한 연산에서는 계산된 속성이 더 유리함.1. ..

**계산된 속성(Computed Property)**은 Vue.js에서 제공하는 매우 강력한 기능으로, 데이터의 변화에 따라 자동으로 값을 계산하여 반환하는 속성임. Vue의 반응형 시스템 덕분에 계산된 속성은 의존하는 데이터가 변경될 때만 다시 계산되며, 캐싱되어 성능을 최적화할 수 있음. 이를 통해 반복적인 계산을 줄이고, 더 효율적으로 데이터 변화를 처리할 수 있음.이미지 출처 : 원쌤의 Vue.js 퀵스타트 1. 계산된 속성의 기본 개념계산된 속성은 Vue 인스턴스나 컴포넌트 내에서 특정 데이터를 기반으로 자동으로 계산된 값을 제공하는 속성임. 템플릿에서 {{ }} 안에 계산된 속성을 사용할 수 있으며, Vue의 반응형 시스템에 의해 의존하는 데이터가 변할 때만 해당 속성이 다시 계산됨. {{ ..

data 옵션은 컴포넌트가 관리하고 추적해야 할 데이터를 등록할 때 사용함.관리와 추적 의 의미는 변경을 탐지하고 추적하여 화면을 갱신하겠다는 뜻으로 이해.data 옵션은 반드시 객체를 리턴하는 함수로 부여되어야 함. Vue 2.x에서는 직접 객체를 지정하기도 했으나 3.x 버전부터는 함수가 부여되어야만 함.만일 직접 객체를 지정하면 다음과 같은 오류를 볼 수 있음.이미지 출처 : 원쌤의 Vue.js 퀵스타트 Vue 인스턴스에서 **데이터 옵션(data 옵션)**은 Vue 컴포넌트의 상태를 정의하는 핵심 요소로, 컴포넌트에서 사용할 데이터를 정의하고, 이 데이터를 통해 뷰(View)와 양방향 데이터 바인딩을 할 수 있게 해줌. Vue의 반응성 시스템에 의해 data에 정의된 데이터가 변경되면, 화면도 ..

Vue 인스턴스는 Vue.js 애플리케이션의 핵심 요소로, Vue에서 제공하는 대부분의 기능을 사용하는 기본 단위임. Vue 인스턴스는 화면에 데이터를 표시하거나 사용자 입력을 처리하는 데 필요한 모든 기능을 제공하며, 컴포넌트 기반으로 동작하는 Vue 애플리케이션의 최초 진입점임.1. Vue 인스턴스 기본 구조Vue 인스턴스를 생성할 때는 **new Vue()**를 사용하여 인스턴스를 만들고, 이를 특정 HTML 요소에 마운트(연결)하여 화면에 데이터를 렌더링함. {{ message }} el: Vue 인스턴스가 마운트될 DOM 요소를 지정함. 여기서는 id="app"인 HTML 요소에 Vue 인스턴스를 연결.data: Vue 인스턴스에서 사용할 데이터를 정의함. 템플릿에서 이 데이터를 {{ mess..

동적 아규먼트(Dynamic Arguments)는 함수에 전달되는 인자의 개수가 고정되지 않고, 상황에 따라 다른 개수의 인자를 받을 수 있는 경우를 의미함.자바스크립트에서는 다양한 방법으로 동적인 인자를 처리할 수 있으며, 이를 통해 더 유연한 함수 호출이 가능해짐.  요약:동적 아규먼트는 함수에 전달되는 인자의 개수가 유동적일 때 사용되며, 자바스크립트에서는 arguments 객체나 Rest 파라미터로 처리할 수 있음.arguments 객체는 함수 호출 시 전달된 모든 인자를 배열처럼 처리할 수 있지만, 배열 메서드를 사용할 수 없고 ES6 이후에는 덜 사용됨.Rest 파라미터는 ES6에서 도입된 기능으로, 인자를 배열로 받아 배열 메서드를 사용할 수 있는 방식이며, 가변 인자 처리에 더 유용함. 1..

**Proxy**는 **ES6(ECMAScript 6)**에서 도입된 기능으로, **객체의 기본 동작(프로퍼티 접근, 값 할당, 함수 호출 등)**을 가로채서 제어하거나 수정할 수 있게 해주는 강력한 도구임. Proxy를 사용하면 객체에 대한 커스텀 동작을 정의할 수 있으며, 특정 상황에 맞는 동작을 추가하거나 객체의 기본적인 동작 방식을 바꿀 수 있음. 1. Proxy의 기본 개념Proxy는 두 개의 인자를 받음:타겟 객체(target): 감시하거나 가로채고 싶은 원래 객체.핸들러(handler): 객체의 동작을 가로채고 **수정할 트랩(traps)**을 정의한 객체. 다양한 트랩을 통해 원하는 동작을 추가하거나 수정할 수 있음.const target = { message: "Hello, Proxy!..

**전개 연산자(Spread Operator)**는 ES6(ECMAScript 2015)에서 도입된 기능으로, 배열이나 객체를 펼쳐서 개별 요소나 프로퍼티를 다른 배열이나 객체에 복사하거나 합칠 때 사용됨. 전개 연산자는 **...(세 개의 점)**을 사용하며, 여러 가지 상황에서 활용될 수 있음.1. 배열에서 전개 연산자 사용배열에서 전개 연산자는 배열의 요소를 개별적으로 펼쳐서 복사하거나, 새로운 배열을 만들 때 유용하게 사용할 수 있음.(1) 배열 복사배열을 **깊은 복사(Deep Copy)**하거나, 기존 배열을 새로운 배열로 확장할 때 사용할 수 있음.const arr1 = [1, 2, 3];const arr2 = [...arr1]; // arr1을 전개하여 새로운 배열 arr2 생성consol..

**Promise**는 자바스크립트에서 비동기 작업을 처리하기 위해 사용되는 객체로, 비동기 작업의 성공(fulfilled) 또는 **실패(rejected)**를 처리할 수 있게 해줌. Promise는 ES6에서 도입되었으며, 비동기 코드를 더 체계적이고 가독성 좋게 작성할 수 있게 도와줌. 주로 네트워크 요청이나 타이머 함수 등에서 사용됨.1. Promise 기본 개념Promise는 비동기 작업의 결과를 처리하는 세 가지 상태를 가짐:대기(pending): Promise가 아직 완료되지 않은 상태.이행(fulfilled): Promise가 성공적으로 완료된 상태. 비동기 작업이 완료되고 성공 결과를 반환함.거부(rejected): Promise가 실패한 상태. 비동기 작업에서 오류나 실패가 발생했을 때..

1. 모듈의 필요성자바스크립트는 초기에 작은 규모의 스크립트 작성에 사용되었지만, 점점 애플리케이션이 복잡해지면서 코드를 체계적으로 관리할 필요가 생김. 여러 기능을 하나의 파일에 모두 작성하면 코드가 복잡해지고, 변수와 함수의 충돌이 발생할 가능성이 높아짐. 이러한 문제를 해결하기 위해 모듈화가 필요함.모듈화를 통한 장점:코드 재사용: 자주 사용되는 기능을 모듈로 분리하여 여러 곳에서 사용할 수 있음.유지보수 용이: 코드를 기능별로 분리하여 관리하기 쉽게 만듦.충돌 방지: 모듈 내부의 변수와 함수가 전역 스코프를 오염시키지 않음. 2. ES6 모듈 시스템ES6에서는 모듈을 표준화하여 import와 export를 사용해 모듈 간 데이터를 주고받을 수 있게 만듦. 이를 통해 각 파일을 독립적인 모듈로 만들..

더 자세하게 알아보자 표현식 삽입템플릿 리터럴은 변수뿐만 아니라 표현식도 삽입할 수 있음. ${} 안에 수식, 함수 호출, 조건문 등을 포함할 수 있으며, 그 결과값이 문자열로 자동 변환됨.const a = 5;const b = 10;const result = `The sum of ${a} and ${b} is ${a + b}.`;console.log(result); // "The sum of 5 and 10 is 15."${a + b}는 5 + 10이 계산되어 15로 출력됨.여러 줄 문자열 (Multi-line String)템플릿 리터럴을 사용하면 여러 줄 문자열을 매우 쉽게 작성할 수 있음. 기존에는 \n을 사용하거나, 여러 줄을 연결하기 위해 +를 사용해야 했지만, 템플릿 리터럴에서는 줄바꿈을 그대..

더 자세하게 알아보자 표현식 삽입템플릿 리터럴은 변수뿐만 아니라 표현식도 삽입할 수 있음. ${} 안에 수식, 함수 호출, 조건문 등을 포함할 수 있으며, 그 결과값이 문자열로 자동 변환됨.const a = 5;const b = 10;const result = `The sum of ${a} and ${b} is ${a + b}.`;console.log(result); // "The sum of 5 and 10 is 15."${a + b}는 5 + 10이 계산되어 15로 출력됨.여러 줄 문자열 (Multi-line String)템플릿 리터럴을 사용하면 여러 줄 문자열을 매우 쉽게 작성할 수 있음. 기존에는 \n을 사용하거나, 여러 줄을 연결하기 위해 +를 사용해야 했지만, 템플릿 리터럴에서는 줄바꿈을 그대..

**리터럴(Literal)**은 프로그래밍에서 값을 직접 작성한 것을 의미함. 즉, 코드를 작성할 때 변수나 상수를 사용하지 않고, 값을 직접적으로 표현하는 방식임. 자바스크립트와 같은 언어에서 다양한 **자료형(숫자, 문자열, 배열, 객체 등)**을 리터럴로 표현할 수 있음. 리터럴은 코드를 더 직관적으로 작성할 수 있게 해주며, 데이터를 쉽게 표현할 수 있게 해줌. 1. 숫자 리터럴 (Numeric Literal)숫자를 직접적으로 나타내는 방식임. 정수 또는 실수 형태로 표현할 수 있음.const age = 29; // 숫자 리터럴 (정수)const pi = 3.14; // 숫자 리터럴 (실수)2. 문자열 리터럴 (String Literal)문자열을 표현할 때 사용하며, 큰따옴표("), 작은따옴표('..

스코프 (Scope) 는 변수나 함수가 유요한 범위를 의미즉, 코드 내에서 특정 변수나 함수가 어디에서 접근 가능하고, 어디에서 사용할 수 있는지를 결정하는 개념임자바스크립트에서는 스코프가 전역스코프(Global Scope)와 지역 스코프(Local Scope)로 나뉘며, ES6에서 추가된 블록 스코프 (Block Scope)도 중요한 요소이다. 1. 전역 스코프(Global Scope)전역 스코프에서 선언된 변수나 함수는 코드 전체에서 접근 가능함.브라우저 환경에서는 **전역 객체(window)**에 변수와 함수가 자동으로 추가되며, 어디서든 참조할 수 있음.var globalVar = "I am global";function showGlobal() { console.log(globalVar); //..

자바스크립트의 this는 함수가 호출될 때 그 함수가 어떻게 호출되었는지에 따라 동적으로 결정되는 값임.this는 자바스크립트의 실행 컨텍스트(Execution Context)에 따라 값이 달라지며, 상황에 따라 가리키는 대상이 달라짐. 이 때문에 this는 자바스크립트에서 종종 혼란을 일으키는 개념 중 하나임. 자바스크립트의 this 기본 개념전역 컨텍스트에서의 this:브라우저 환경에서는 **전역 객체인 window**를 가리킴.console.log(this); // window 객체함수 내부에서의 this:일반 함수에서는 함수 호출 방식에 따라 this가 달라짐.기본적으로 전역 객체(window)를 가리킴.function showThis() { console.log(this);}showThis()..

async/await는 비동기 작업을 쉽게 처리할 수 있도록 ES8에서 도입된 자바스크립트 기능임.Promise 기반의 비동기 코드를 동기식 코드처럼 작성할 수 있게 해주는 문법으로, 비동기 작업의 가독성을 크게 향상시킴.Q. (비)동기가 뭔데 ?A. https://jerrycodezzz.tistory.com/54 동기(Synchronous) 비동기(Asynchronous)1. 동기(Synchronous)동기적 처리는 작업이 순차적으로 실행되는 방식임. 하나의 작업이 끝날 때까지 다음 작업이 대기하며, 작업이 완료된 후에야 다음 작업이 실행됨. 즉, 코드가 위에서 아래로 순jerrycodezzz.tistory.com async 함수async 키워드를 함수 앞에 붙이면, 해당 함수는 자동으로 Promise..

1. 동기(Synchronous)동기적 처리는 작업이 순차적으로 실행되는 방식임. 하나의 작업이 끝날 때까지 다음 작업이 대기하며, 작업이 완료된 후에야 다음 작업이 실행됨. 즉, 코드가 위에서 아래로 순서대로 실행됨.특징:작업이 직렬적으로 처리됨.하나의 작업이 끝나기 전까지는 다음 작업을 시작할 수 없음.결과를 바로 얻을 수 있음.function task1() { console.log("Task 1 시작"); console.log("Task 1 끝");}function task2() { console.log("Task 2 시작"); console.log("Task 2 끝");}task1();task2();Task 1 시작Task 1 끝Task 2 시작Task 2 끝여기서는 task1이 끝난 후에..

v-text, v-html: 텍스트와 HTML 바인딩.v-bind: 속성 값 바인딩.v-model: 양방향 데이터 바인딩.v-show, v-if: 조건부 렌더링.v-for: 리스트 반복 렌더링.v-pre, v-once, v-cloak: 렌더링 최적화 및 구문 무시. v-text요소의 텍스트 내용을 바인딩하는 디렉티브. HTML 태그를 무시하고 일반 텍스트로만 렌더링함.message 변수의 값이 텍스트로 출력됨. v-html요소에 HTML 내용을 바인딩함. 텍스트 대신 HTML 태그를 렌더링할 수 있음.htmlContent에 HTML 코드가 들어있으면 그 내용을 그대로 렌더링함. v-bindHTML **속성(attribute)**에 데이터를 바인딩할 때 사용함. 동적으로 속성 값을 설정할 수 있음. ima..

기본 파라미터 (Default Parameter) & 가변 파라미터 (Reset Parameter) 는 ES6에서 함수 매개변수를 더욱 유연하게 사용할 수 있도록 도입된 기능임 1. 기본 파라미터 (Default Parameter)기본 파라미터는 함수 호출 시 특정 인자가 전달되지 않았을 때 미리 정의된 기본값을 사용할 수 있게 해주는 기능임. 예전에는 함수 안에서 매개변수가 undefined인지 확인하고 값을 할당하는 식으로 처리했지만, ES6부터는 더 간결하게 기본값을 지정할 수 있음.function greet(name = "Guest") { console.log(`Hello, ${name}!`);}greet(); // Hello, Guest! (인자가 없을 경우 기본값 사용)greet("Jerry..

ES6 가 무엇인가 ?자바스크립트의 새로운 버전임. 자바스크립트를 더 쉽게 쓰고, 효율적으로 만들기 위해 나온 표준.원래 자바스크립트도 잘 작동했지만, ES6로 업데이트 되면서 여러 기능이 추가되고 개선된 거임 ! 비유로 말하자면, 스마트폰 : 자바스크립트 = 소프트웨어업데이트 : ES6  ES6의 핵심기능1. let 과 const2. 화살표 함수 (Arrow Function)3. 템플릿 리터럴 (Template Literals)4. 디스트럭처링 할당 (Destructuring Assignment)5. 클래스 (Class)6. Promise7. 모듈 (Modules) 1. let과 const let과 const는 ES6에서 도입된 새로운 변수 선언 방법임.기존의 var는 함수 스코프만을 지원했지만, le..

Vue.js에서 props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방법이다. 컴포넌트 기반의 프론트엔드 프레임워크에서는 컴포넌트 간의 데이터 흐름이 매우 중요하며, props는 그 중에서도 자식 컴포넌트가 부모로부터 필요한 정보를 받아올 수 있도록 하는 메커니즘이다.비유를 들자면, 부모가 자식에게 선물을 주는 것과 같다. 부모 컴포넌트가 자식 컴포넌트에 전달할 데이터를 준비하고, 자식 컴포넌트는 그 데이터를 받을 준비를 해야 한다.예를 들어, 부모 컴포넌트에서 자식 컴포넌트에게 사용자 이름을 전달한다고 가정하자: 여기서 부모 컴포넌트는 userName이라는 속성으로 "홍길동"이라는 값을 자식 컴포넌트에 전달한다. 자식 컴포넌트에서는 props를 통해 이 값을 받을 수 있다: 사용..

*쿠키(Cookie)**는 웹 브라우저에 작은 데이터 조각을 저장하는 데 사용되는 방법입니다. 서버와 클라이언트 간에 상태를 유지하거나 사용자 식별 정보를 저장하기 위해 사용됩니다. 쿠키는 주로 사용자 세션, 사용자 추적, 인증 상태를 관리하는 데 활용됩니다.쿠키의 주요 특징크기 제한: 쿠키는 하나의 도메인 당 약 4KB 정도의 데이터를 저장할 수 있습니다.만료 기한 설정: 쿠키는 만료 기한을 설정할 수 있어, 일정 기간이 지나면 자동으로 삭제됩니다.도메인별 격리: 쿠키는 생성된 도메인과 경로에서만 접근할 수 있습니다. 다른 도메인에서는 접근할 수 없습니다.자동 전송: 쿠키는 설정된 도메인으로 HTTP 요청이 전송될 때마다 자동으로 서버에 전송됩니다.쿠키 사용 방법1. 쿠키 설정 (JavaScript)브..

LocalStorage는 브라우저에서 제공하는 클라이언트 측 저장소로, 사용자의 데이터를 브라우저에 영구적으로 저장할 수 있는 공간입니다. LocalStorage에 저장된 데이터는 사용자가 페이지를 새로고침하거나 브라우저를 닫았다가 다시 열어도 유지됩니다. 쿠키와 달리 만료 기한이 없으며, 비교적 큰 용량의 데이터를 저장할 수 있습니다.LocalStorage의 주요 특징영구 저장: LocalStorage에 저장된 데이터는 브라우저를 닫거나 컴퓨터를 재부팅해도 삭제되지 않습니다.용량 제한: 일반적으로 도메인당 약 5MB의 데이터를 저장할 수 있습니다.도메인별 격리: 각 도메인에 대해 격리되어 있어, 다른 도메인에서는 접근할 수 없습니다.키-값 쌍: LocalStorage는 문자열 형태의 키-값 쌍으로 데이..

Pinia - Persist는 Pinia로 관리하는 상태를 브라우저의 로컬 저장소(LocalStorage)나 세션 저장소(SessionStorage)에 자동으로 저장하고 유지할 수 있도록 도와주는 플러그인입니다. 이를 통해 페이지를 새로고침하거나 브라우저를 닫았다가 다시 열어도 상태를 유지할 수 있습니다.Pinia - Persist의 주요 특징자동 상태 저장: 스토어의 상태를 자동으로 로컬 저장소나 세션 저장소에 저장합니다.데이터 영속성: 페이지를 새로고침하거나 브라우저를 재시작해도 상태를 유지할 수 있어 사용자 경험이 향상됩니다.설정의 유연성: 어떤 스토어를 어디에 저장할지, 어떤 상태를 저장할지 등 다양한 설정이 가능합니다.Pinia - Persist 설치 및 사용 방법Pinia - Persist 설..