제리코드르렁

1. 사용자 정의 이벤트란?Vue에서는 사용자 정의 이벤트(Custom Events)를 통해 자식 컴포넌트가 부모 컴포넌트에 데이터를 전달할 수 있음.이 방식은 Vue의 단방향 데이터 흐름(부모→자식)을 보완하여 상위 컴포넌트로 이벤트를 전달함으로써,양방향 데이터 소통을 가능하게 만듦.자식 컴포넌트에서 이벤트를 발생시키고($emit), 부모 컴포넌트는 해당 이벤트를 수신(v-on)하여 처리함. 2. 사용자 정의 이벤트를 이용한 정보 전달사용자 정의 이벤트를 통해 자식에서 부모로 데이터 전달이 가능함.주로 양방향 바인딩이나 특정 작업을 부모 컴포넌트에 알릴 때 유용하게 사용됨.// 부모 컴포넌트 (Parent.vue) // 자식 컴포넌트 (ChildComponent.vue) 제출 자식 컴포넌..

1. 속성을 이용한 정보 전달Vue에서는 속성(Props)을 통해 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 수 있음. 이 방식은 상위에서 하위로의 단방향 데이터 흐름을 의미하며, 컴포넌트 간의 재사용성을 높임.속성 전달 기본 예제 :// 부모 컴포넌트 (Parent.vue) // 자식 컴포넌트 (ChildComponent.vue) {{ msg }}부모 컴포넌트가 자식 컴포넌트에 msg 속성으로 데이터를 전달함.자식 컴포넌트는 props를 사용해 부모로부터 전달된 데이터를 수신함.2. 속성을 이용해 객체 전달하기Vue에서는 객체를 속성으로 전달할 수 있음. 객체를 통해 더 복잡한 데이터를 전달할 수 있으며, 자식 컴포넌트에서 이 데이터를 참조하여 UI를 구성할 수 있음.객체 전달 예제:// 부모..

1. 속성을 이용한 정보 전달Vue에서는 속성(Props)을 통해 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 수 있음. 이 방식은 상위에서 하위로의 단방향 데이터 흐름을 의미하며, 컴포넌트 간의 재사용성을 높임.속성 전달 기본 예제 :// 부모 컴포넌트 (Parent.vue) // 자식 컴포넌트 (ChildComponent.vue) {{ msg }}부모 컴포넌트가 자식 컴포넌트에 msg 속성으로 데이터를 전달함.자식 컴포넌트는 props를 사용해 부모로부터 전달된 데이터를 수신함.2. 속성을 이용해 객체 전달하기Vue에서는 객체를 속성으로 전달할 수 있음. 객체를 통해 더 복잡한 데이터를 전달할 수 있으며, 자식 컴포넌트에서 이 데이터를 참조하여 UI를 구성할 수 있음.객체 전달 예제:// 부모..

1. Vue CLI 도구Vue CLI는 Vue.js 프로젝트를 빠르고 쉽게 시작할 수 있도록 도와주는 강력한 도구임. CLI는 “Command Line Interface”의 약자로, 터미널 명령어를 통해 프로젝트 생성부터 설정까지 관리할 수 있게 해줌.npm install -g @vue/clivue create my-project설치 과정에서 Babel, TypeScript, Vue Router, Vuex, Linting, CSS Pre-processors 등 다양한 옵션을 선택할 수 있어서 프로젝트에 필요한 도구들을 빠르게 설정할 수 있음.Vue CLI의 장점:복잡한 설정 없이 바로 사용할 수 있음.다양한 플러그인과 설정을 지원해 유연한 개발 환경 제공.Webpack과 Vite 등 빌드 도구와도 호환 ..

자료 : 원쌤의 vue.js 퀵스타트 이 예제는 Vue.js를 사용하여 간단한 할 일 목록(TodoList) 앱을 만드는 방법을 설명함. 사용자는 할 일을 입력하고, 추가, 완료, 삭제할 수 있으며, 각각의 할 일에 대해 완료 상태에 따른 스타일을 동적으로 적용할 수 있음. 또한, 이 예제에서는 Bootstrap 라이브러리를 사용하여 기본적인 UI 스타일을 제공함.1. 화면 시안 작성먼저, 기본적인 HTML 구조를 작성하고 Bootstrap CSS를 불러옴. 이 예제에서는 할 일 목록을 관리할 수 있는 기본 UI와 할 일 입력란을 작성함. :: Todolist App 2. 데이터 및 메서드 정의이제 할 일 목록 데이터를..

동적 스타일 바인딩이란 Vue.js에서 데이터 상태에 따라 HTML 요소에 동적으로 CSS 스타일을 적용하는 방법임. 동적 스타일 바인딩을 사용하면 사용자 입력, 이벤트 발생 등에 따라 실시간으로 스타일을 변경할 수 있음. Vue.js에서는 v-bind:style 또는 :style 디렉티브를 사용해 인라인 스타일을 바인딩할 수 있음 1부터 100까지만 입력 가능합니다. 점수: 코드 설명HTML 구조:점수를 입력할 수 있는 요소가 있음. 이 요소에는 기본적으로 score 클래스가 적용됨.점수가 1부터 100 사이가 아니면 경고 이미지와 함께 경고 스타일이 적용됨.Vue.js 인스턴스:data(): 기본 점수(score) 값을 관리함. 초기 값은 50으..

Vue.js에서 CSS 클래스를 바인딩하는 방법은 두 가지가 있음:CSS 클래스명 문자열을 바인딩하는 방법true/false 값을 가진 객체를 바인딩하는 방법CSS 클래스명 문자열을 바인딩하는 방법이 방법은 데이터나 속성에 CSS 클래스명을 문자열로 할당하여 v-bind:class 혹은 **:class**로 바인딩하는 방식임. 데이터에서 CSS 클래스명을 문자열로 설정한 후, 이를 요소에 바인딩할 수 있음. 테스트 버튼  이 방식에서 클래스명 문자열을 배열로 바인딩하여 여러 클래스를 동시에 적용할 수 있음.3항 연산자를 이용해 특정 조건에 따라 클래스를 동적으로 적용할 수도 있음. 레이아웃 적용 여부테스트 버튼 isMyLayout의 값에 따라 myLayout 클래스의 적용 여부가 결..

1. 인라인 스타일이란?HTML 요소에 직접적으로 style 속성을 사용하여 CSS를 적용하는 방식임.인라인 스타일은 Vue.js에서도 지원되며, 보통 v-bind:style로 데이터 속성을 바인딩해 스타일을 적용할 수 있음.스타일 속성은 케밥 표기법(예: background-color)을 사용하지만, Vue 인스턴스에서는 카멜 표기법(예: backgroundColor)으로 표기해야 함.2. 인라인 스타일 사용 예시예시 코드에서는 버튼에 마우스를 올렸을 때(mouseover), 인라인 스타일을 통해 배경 색상과 텍스트 색상이 바뀌도록 설정.마우스를 버튼에서 뗄 때(mouseout) 다시 원래 색상으로 돌아가도록 정의.methods: { overEvent() { this.style1.backgr..

HTML 요소의 스타일 적용 우선순위HTML 요소에 스타일을 적용할 때, 인라인 스타일과 CSS 클래스로 정의된 스타일의 적용 우선순위가 중요함.인라인 스타일은 style 속성을 이용하여 요소에 직접 지정된 스타일로, 우선순위가 가장 높음.CSS 클래스는 라인 스타일로 background-color: orange;가 적용됨.클래스 .test와 .over가 적용되며, 각각 배경 색상, 테두리, 너비, 높이와 같은 속성을 정의함.적용 우선순위 설명:스타일 적용 우선순위는 인라인 스타일 > 클래스 .over > 클래스 .test 순으로 결정됨.따라서, 이 경우 배경 색상 background-color가 인라인 스타일에서 지정된 orange로 적용됨.스타일 충돌 시 우선순위:같은 속성에 대해 여러 스타일이 선언..

이벤트 수식어(Event Modifiers)는 Vue.js에서 이벤트 처리 시 특정 동작을 쉽게 제어할 수 있게 해주는 기능임. 수식어를 사용하면 이벤트의 기본 동작을 막거나, 특정 상황에서만 이벤트가 실행되도록 제어할 수 있음. 수식어는 이벤트 디렉티브(@click 등) 뒤에 점(.)을 붙여서 사용함. 1. .once: 한 번만 실행.once 수식어는 이벤트가 한 번만 실행되도록 함. 즉, 이벤트가 발생한 후 자동으로 이벤트 리스너가 제거되기 때문에 해당 이벤트는 다시 발생하지 않음.한 번만 클릭버튼을 클릭하면 한 번만 경고창이 뜸. 그 이후로는 클릭해도 아무 일도 일어나지 않음.2. 키코드 수식어 (.enter, .esc, .tab 등)Vue.js에서는 자주 사용하는 키보드 이벤트에 대해 특정 키코드..

부모 요소 자식 버튼 **이벤트 전파(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에 정의된 데이터가 변경되면, 화면도 ..

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을 사용하거나, 여러 줄을 연결하기 위해 +를 사용해야 했지만, 템플릿 리터럴에서는 줄바꿈을 그대..

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를 통해 이 값을 받을 수 있다: 사용..

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

Pinia는 Vue 3를 위한 상태 관리 라이브러리입니다. 이전 버전의 Vue에서는 주로 Vuex를 사용했지만, Pinia는 Vuex의 다음 버전으로 간주되며, 더 직관적이고 사용하기 쉽게 만들어졌습니다.Pinia의 주요 특징간단한 API: Pinia는 Vuex보다 API가 더 간단하고 직관적입니다. 상태 관리에 필요한 개념을 최소화하여 더 쉽게 사용할 수 있습니다.Vue 3와 완벽한 호환: Pinia는 Vue 3의 Composition API와 완벽하게 호환되도록 설계되었습니다. Vue 3에서 상태 관리를 쉽게 구현할 수 있습니다.TypeScript 지원: Pinia는 TypeScript를 자연스럽게 지원하여 타입 안전성을 높여줍니다.모듈화: Pinia는 상태를 여러 스토어로 분리하여 관리할 수 있습니..