소소한 지식 저장소

UI 라이브러리 (UI Library)웹 애플리케이션 UI 구축에 필요한 공통 컴포넌트(Button, Input, Form, Dialog, Table 등)를 Vue 3 컴포넌트 단위로 모듈화하여 제공하는 오픈소스 소프트웨어 패키지임.사용 효과개발 리소스 절감: CSS 스타일시트·HTML 마크업을 직접 작성하는 대신 완성된 컴포넌트 태그를 호출하므로 UI 구현 속도가 향상됨크로스 브라우징 및 반응형 대응: Chrome, Safari, Firefox 등 다양한 브라우저와 Mobile·Tablet·Desktop 해상도별 미디어 쿼리가 내부적으로 최적화되어 있음웹 표준 및 접근성(WAI-ARIA) 준수: 스크린 리더 인식, 키보드 포커스 제어 등 접근성 가이드라인이 컴포넌트 레벨에서 사전 구현되어 있음Vue 3..

Vue Router 개요Vue는 최초 접속 시 HTML을 단 한 번만 다운로드하는 SPA(Single Page Application) 구조임. 전통적인 웹사이트가 페이지 이동마다 서버에 새 HTML을 요청해 화면 전체를 새로고침하던 것과 다름.Vue Router는 브라우저의 URL 변화를 JavaScript 엔진이 가로채, 서버에 새 페이지를 요청하지 않고 현재 경로(Path)에 매칭된 컴포넌트만 가상 DOM 상에서 실시간으로 교체해 주는 Vue 공식 라이브러리임.설치는 package.json의 dependencies에 "vue-router": "^5.0.4"를 추가하는 방식으로 관리함.// package.json"dependencies": { "pinia": "^3.0.4", "vue": "^3.5..

전체 구조 이해SPA 로그인 구조에서 각 도구의 역할은 다름.로그인 성공 ├─ Pinia: 현재 화면을 즉시 로그인 상태로 바꿈 ├─ localStorage: 새로고침 뒤에도 필요한 정보를 복원 └─ Axios Interceptor: API 요청에 인증 정보를 실어 보냄새로고침 └─ localStorage / 쿠키 → Pinia 상태 복원 → UI 다시 반영API 요청 ├─ JWT + localStorage: Authorization 헤더에 토큰 직접 주입 └─ 세션 / httpOnly 쿠키: 브라우저가 쿠키를 자동 전송핵심 정리Pinia: 화면을 즉시 바꾸기 위한 반응형 상태 저장소localStorage: 새로고침 후에도 데이터를 남기기 위한 영구 저장소JWT / 세션 / 쿠키: 서버가 요청..

Composition API 개요Vue 3에서 도입된 현대적인 JavaScript 코딩 방식으로, 컴포넌트의 로직(데이터, 함수, 계산된 속성 등)을 하나의 세트로 조합(Composition)하여 작성하는 방법을 제공함.Options API와의 비교Vue 2에서는 Options API 방식을 사용함데이터, Computed, methods, Lifecycle Hook 등을 각각의 옵션 속성(객체 키)으로 분리하여 구성함관련 로직이 파일 안에 흩어져 있어 큰 컴포넌트에서 가독성이 떨어짐Composition API는 연관된 로직을 한 곳에 모아 작성하므로 가독성이 높음작성 방법Vue 3.2부터 Vue 3 내장함수 카테고리Vue 프레임워크에서 핵심 기능을 수행하는 함수들을 카테고리별로 제공함. 빨간색으로 표기된..

Vue.js 개요Vue.js는 사용자 인터페이스(UI) 구축을 목적으로 하는 Front-end JavaScript Framework임. JavaScript와 TypeScript를 모두 지원하며, 간결한 문법·반응형 데이터 바인딩·컴포넌트 기반 구조·가상 DOM·트랜지션 효과 지원이 주요 특징임.유사한 프레임워크로 React·Angular가 있으나, Vue는 그 중 가장 가볍고 진입 장벽이 낮은 편임.JavaScript vs. TypeScript구분 JavaScriptTypeScript정의웹의 기본 스크립트 언어JavaScript에 정적 타입을 추가한 상위 집합(Superset)타입 시스템동적 타이핑 — 런타임에 변수 타입 결정정적 타이핑 — 컴파일 타임에 변수 타입 명시 및 검증에러 발견 시점런타임(코드..