개발자 성장일지

1. UI Framework UI Framework는 웹 UI 컴포넌트과 UX를 일관성 있고 효율적으로 제작할 수 있는 CSS 라이브러리 반응형 레이아웃을 쉽게 제작할 수 있게 그리드 시스템 제공 가장 유명한 UI 프레임워크로 Bootstrap, Vuetify, Quasar 등 2. Vuetify Vuetify는 Vue.js 기반의 Material Design 컴포넌트 UI 프레임워크 구글 Material Design 스펙을 충실히 따르면서 다양한 웹앱 UI 제공 프로그래시브 웹앱(PWA)을 위한 다양한 App 컴포넌트 제공 3. Components Vuetify가 제공하는 컴포넌트로 v- 로 시작하는 엘리먼트 제공 빠른 Rendering 속도와 최적화로 높은 성능을 보장 Buttons, Cards, A..

1. HTTP 통신 HTTP는 브라우저와 서버간에 통신을 위한 프로토콜 HTTP Method 구분으로 REST API 통신을 구현 Vue.js에서 HTTP 통신을 위해 다양한 외부 라이브러리를 지원 2. Axios Axios는 Vue.js에서 가장 많이 사용하는 Promise 기반 HTTP 통신 라이브러리 Vue.js 뿐만 아니라 다른 프레임워크에서도 가장 많이 사용 3. JWT HTTP 통신에서 사용자 인증(Authentication)을 위해 Session 기반 인증과 Token 기반 인증 Token 기반 인증은 사용자의 인증 정보와 Server에서 발급되었음을 증명하는 서명이 포함되어 있는 암호화된 문자열을 Client에서 저장 관리하는 방식 JWT(JSON Web Token)는 사용자를 인증하고 식..

1. Vuex 란? Vuex는 Vue.js에서 지원하는 공식 애플리케이션 상태 관리 라이브러리 2023년 현재 Pinia로 변경 상태(state)란 컴포넌트에서 사용하는 data로 컴포넌트 간에 공유할 수 있다. Vuex는 모든 컴포넌트들에게 중앙 집중 저장소(전역스토어)를 제공해서 state를 공유한다. 2. Vuex 작동 원리 Vuex는 state, mutations, getters, actions 4가지 속성을 통해 상태 관리를 수행

1. SPA 란? SPA(Single Page Application) 하나의 페이지로 구성된 웹 애플리케이션 Page Rendering을 기존 Server(SSR)에서 Client 로 처리하는 방식(CSR) 앱의 규모가 커지면 Javascript 파일이 너무 커지고, SEO 최적화가 SSR에 비해 불리하다는 단점 2. Router 란? Route는 SPA(Single Page Application)에서 Component(화면) 간의 이동 또는 전환하는 방법 SPA에서는 페이지를 이동할 때마다 Server에 요청하는 것이 아닌 Client에서 미리 가지고 있는 페이지를 Router을 이용해 페이지를 Routing Vue Router는 Vue.js에서 Route 기능을 지원하는 공식 라이브러리 3. Nest..

1. Composition API 란? Composition API는 Component를 작성하기 위해 Vue3에서 새롭게 도입된 함수 기반 API 기존 Options API 보다 좀 더 유연하고 가독성 높은 방식으로 컴포넌트를 작성 할 수 있도록 지원 Composition API를 통해 연관성 있는 로직을 같이 구현할 수 있어 간결한 코드와 유지보수에 유리 2. Reactivity 반응형 데이터 선언과 처리를 위한 API 반응형 데이터는 값이 변경됨에 따라 이를 감지하고 해당 값에 종속된 작업(Side Effect)이 수행 3. LifeCycle Hooks Component 생명주기는 Component가 생성되고 화면에 출력된 후 소멸되기까지의 일련의 과정 LifeCycle Hooks는 Componen..

1. Component 란? 컴포넌트는 화면 구성요소를 독립적인 모듈 형태로 구성하여 조립한 형태 Vue의 가장 중요한 특징인 컴포넌트는 재활용이 가능한 사용자 정의 Element SFC(Single File Component)는 컴포넌트를 작성하는 파일 구조로 template, script, style로 나뉨 2. Options API Options API는 Vue 컴포넌트를 정의하는 데 사용되는 일종의 구성 요소 Options API는 Vue.js 2.x에서 주요한 컴포넌트 구문으로 사용되며, Vue.js 3.x에서도 사용 가능 Options API는 컴포넌트의 데이터, 계산된 속성, 메서드, 라이프사이클 훅 등이 포함 3. Component 통신 컴포넌트간의 데이터(상태값)를 공유하기 위해서는 컴포..

1. Directive 란? Vue Directive는 HTML 태그 안에 Vue에서 정의한 v-접두사를 가지는 모든 속성 Vue Directive는 화면의 구성 요소를 쉽게 조작하기 위해 사용하는 기능 2. Data Binding Data Binding은 View 화면 요소를 Vue 인스턴스 상태 데이터와 연결하는 것 Data Binding을 통해 상태값의 변경에 따라 화면에 자동으로 반영 단방향 바인딩을 위한 v-bind와 양방향 바인딩을 위한 v-model을 제공

1. Vue.js 란? Vue.js는 웹 애플리케이션 개발을 위한 프런트엔드 프레임워크 SPASingle Page Application 개발을 위한 프레임워크(Angular, React, Svelte) 가운데 하나 ES6를 기본 언어로 하며 가장 직관적이고 쉽게 배울 수 있는 프레임워크 2. Vue.js 특징 Vue.js는 MVVM 패턴의 뷰 모델(ViewModel)에 해당하는 라이브러리 MVVM 패턴은 화면을 Model – View – ViewModel 로 구조화하여 개발하는 방식 Vue.js는 Component 기반 프레임워크로 화면 구성을 독립적인 모듈 형태로 구성하여 조립한 형태 3. Vue.js 프로젝트 구성 빠르고 간편한 프로젝트 구성을 위해 Vue CLI 또는 Vite 번들러 사용 .vue ..