열이의 개발블로그

Vuex란? Vue.js용 상태 관리 라이브러리 Vuex는 Vue.js 애플리케이션의 상태(데이터)를 관리하기 위한 중앙 저장소 역할을 합니다. Flux 아키텍처 패턴을 따르며 상태는 저장소라는 단일 정보 소스에 저장되고 컴포넌트는 actions 및 mutations을 통해 상태를 업데이트하고 접근할 수 있습니다. ✅ Vuex를 사용해야 하는 이유 컴포넌트 기반 프레임워크에서는 작은 단위로 쪼개진 여러 개의 컴포넌트로 화면을 구성합니다. Vue를 기준으로 컴포넌트끼리 데이터를 주고 받기 위해서는 부모 컴포넌트가 자식 컴포넌트로 데이터를 넘겨주어 처리합니다. 하지만 중간에 거쳐야할 컴포넌트가 많아지거나 같은 레벨 간에 데이터의 이동이 필요할 경우 데이터 흐름이 복잡해집니다. 이를 더 효율적으로 해결하기 위..

Vue3에서 등장한 composition api에서 사용하는 데이터를 반응형으로 만드는 방법 ✏️ composition api가 등장한 배경 Vue2에서는 options api를 사용하고 있었음 객체 내에 다양한 속성을 사용하고 있는 형태 라이프 사이클을 제어하기 위해 사용하는 created, mounted, updated 그리고 컴포넌트 내에서 여러 메서드(methods)들을 정의하고 데이터(data)들을 참조할 때 정해진 속성에 정의해 사용 ✏️ options api 사용 예시 // 태그 안 export default { components: { // 컴포넌트 정의 }, data() { return { // 데이터 정의 } }, created() { // created 시점 정의 }, methods(..

Do it! Vue.js 뷰 템플릿 뷰의 템플릿은 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성 ✏️ 템플릿 속성 사용 방법 1. ES5에서 뷰 인스턴스의 template 속성을 활용 template: 'Hello {{ message }}' 템플릿 속성의 특징 사용자가 볼 수는 없지만 라이브러리 내부적으로 template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render() 함수로 변환 변환된 render() 함수는 최종적으로 사용자가 볼 수 있게 화면을 그리는 역할을 하고 변환 과정에서 뷰의 반응성(Reactivity)이 화면에 더해줌 1. {{ message ]} ... ..

Do it! Vue.js 뷰 HTTP 통신 ✏️ 웹 앱의 HTTP 통신 방법 웹 앱에서 서버에 데이터를 요청하는 HTTP(HyperText Transfer Protocol) 통신은 필수로 구현해야 하는 기능 사용자와의 상호 작용에 따라 데이터를 동적으로 화면에 표시해줘야 하기 때문 HTTP란? 브라우저와 서버 간에 데이터를 주고받는 통신 프로토콜 브라우저에서 특정 데이터를 보내달라고 요청(request)을 보내면 서버에서 응답(response)으로 해당 데이터를 보내주는 방식 서버에 '해당 데이터를 보내주세요.'라는 메시지를 보내는 것이 'HTTP 요청을 보낸다.'와 같은 의미 웹 앱 HTTP 통신의 대표적인 사례로 제이쿼리(jQuery)의 ajax ajax는 서버에서 받아온 데이터를 표시할 때 화면 전..

Do it! Vue.js 뷰 라우터 ✏️ 라우팅이란? 라우팅이란 웹 페이지 간의 이동 방법 라우팅은 현대 웹 앱 형태 중 하나인 싱글 페이지 애플리케이션(SPA, Single Page Application)에서 주로 사용 싱글 페이지 애플리케이션(SPA) 페이지를 이동할 때마다 서버에 웹 페이지를 요청하여 새로 갱신하는 것이 아니라 미리 해당 페이지들을 받아 놓고 페이지 이동 시에 클라이언트의 라우팅을 이용하여 화면을 갱신하는 패턴을 적용한 애플리케이션 라우팅을 이용하면 화면 간 전환이 매끄럽고 애플리케이션의 사용자 경험을 향상시킬 수 있음 라우팅 사용시 웹 페이지 요청과 응답 과정에서 화면 상 깜빡거림 없이 매끄럽게 전환 가능 대표적인 라우팅 라이브러리 router.js, navigo.js ✏️ 뷰 라..

Do it! Vue.js 뷰 컴포넌트 통신 ✏️ 컴포넌트 간 통신과 유효 범위 뷰의 경우 컴포넌트로 화면을 구성하므로 같은 웹 페이지라도 데이터를 공유할 수 없음 컴포넌트마다 자체적으로 고유한 유효 범위(scope)를 갖기 때문 각 컴포넌트의 유효 범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접 참조할 수 없음 2개의 지역 컴포넌트를 등록하고, 한 컴포넌트에서 다른 컴포넌트의 값을 직접 참조하는 예제 my-component2 컴포넌트 내용에서 {{ cmp2Data }}는 my-component1 컴포넌트의 data.cmp1Data를 참조하고 있음 자바스크립트의 객체 참조 방식을 생각해 보면 참조 값 100이 화면에 표시되어야 하지만 아무것도 표시하지 않음 {{ cmp2Data }}에 아무것도 출력되지..

Do it! Vue.js ✏️ 뷰 컴포넌트 컴포넌트란? 조합하여 화면을 구성할 수 있는 블록(화면의 특정 영역) 자료구조의 트리(Tree) 모양과 유사 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발 가능 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 관리하면 코드의 재사용성이 증가함 정해진 방식대로 컴포넌트를 등록하거나 사용하게 되므로 남이 작성한 코드를 직관적으로 이해 가능 컴포넌트 등록 컴포넌트 등록 방법에는 전역과 지역, 두 가지가 있음 지역(Local) 컴포넌트 특정 인스턴스에서만 유효한 범위를 갖음 전역(Global) 컴포넌트 여러 인스턴스에서 공통으로 사용할 수 있음 전역 컴포넌트 등록 뷰 라이브러리를 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록 전역..

Do it! Vue.js ✏️ 뷰 인스턴스 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위 ✏️ 뷰 인스턴스 생성 뷰 인스턴스를 사용하기 위한 코드 new Vue({ ... }); 예제 // 인스턴스 new Vue({ // el 속성 el: '#app', // data 속성 data: { message: 'Hello Vue.js!' } }); 'Hello Vue.js!' 텍스트를 화면에 표시하기 위해 new Vue()로 뷰 인스턴스를 생성 인스턴스 안에 el 속성으로 뷰 인스턴스가 그려질 지점을 지정 data 속성에 message 값을 정의하여 화면의 {{ message }}에 연결 ✏️ 뷰 인스턴스 생성자 new Vue()로 인스턴스를 생성할 때 Vue를 생성자라고 함 Vue 생성자는 뷰..

Do it! Vue.js ✏️ Vue.js를 사용하는 이유 "Vue.js의 초점은 더 많은 사람들이 쉽게 웹 앱을 만들 수 있도록 도와주는 데 있다." - 에반 유(Vue.js 창시자) 진입 장벽이 낮다 ✏️ Vue.js란? 웹 페이지 화면을 개발하기 위한 프런트엔드 프레임워크 뷰는 화면단 라이브러리이자 프레임워크라고도 볼 수 있음 ✏️ 뷰의 장점 배우기가 쉽다. 리액트와 앵귤러에 비해 성능이 우수하고 빠르다. 리액트의 장점과 앵귤러의 장점을 갖고 있다. ✏️ 뷰의 특징 1. UI 화면단 라이브러리 UI 화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델(ViewModel)에 해당하는 화면단 라이브러리 화면의 표현에 주로 관여하는 라이브러리이기 때문에 화면단 라이브러리라고도 함 MVVM 패턴이란 마크업 ..