[Vue.js] 기초

0. 🔖 목차

---

1. Vue.js 정의
   1-1. 들어가기 앞서
   1-2. Vue.js란?
   1-3. Vue.js의 구조
2. Vue.js 개발스타일
   2-1. Options API
   2-2. Composition API
3. 라이프사이클(LifeCycle)
   3-1. 라이프사이클이란?
   3-2. 라이프사이클 훅

1. Vue.js 정의

---

1-1. 들어가기 앞서

드디어 개인 프로젝트의 첫 포문을 열었다. 첫 시작은 Vue.js를 공부하면서 시작한다.

"구디사는 개발자 9diin"님의 "2024 Vue.js 개발 가이드 - Full Course (feat. Composition API)" 영상을 기반으로 공부할 예정이다(좋은 강의 만들어주셔서 감사합니다).

여러 현직자분들의 조언에 따르면 현존하는 프레임워크중 Vue.js 쉽고 빠르게 UI를 만드는 프레임워크는 없다고 하셨다. 생산성이 엄청나다고...

암튼 내가 취직하기 전 까지 프로젝트를 완성할지는 모르겠지만 최대한으로 나를 갈아넣어볼 예정이다.

UI가 못생겨도 좋다! RESTful하지 않아도 좋다! 그래도 완성은 하자!

1-2. Vue.js란?

Vue.js란 웹 사용자 인터페이스를 만들기 위한 쉽고 강력하며 다재다능한 프레임워크이다.

Vue.js의 강점은 낮은 진입장벽과 낮은 러닝커브를 가지면서도 높은 퍼포먼스를 지닌다는 점이다.

그렇기에 FE 시장에서 가장 많이 쓰이는 스택이 React이고 그 다음이 Vue.js라고 한다.

1-3. Vue.js의 구조

1-3-1. SPA 구조

SPA(Single Page Application)는 말 그대로 하나의 페이지에서 유저가 원하는 정보만 보여주는 방식을 의미한다.

좀 더 친숙한 개념을 가져와보자면 AJAX를 생각하면 된다.

전통적인 웹 페이지 방식에서는 사용자가 동작을 할 때 마다 페이지 전체를 새로고침해야했지만 AJAX를 통해 사용자에게 보여지는 부분에서 데이터만 바꿔끼우는 방법으로 사용자 경험을 향상시킬 수 있다.

여기서 말하는 SPA도 AJAX와 같은 기능을 하는 구조라고 이해할 수 있겠다.

1-3-2. SFC 구조

SFC(Single File Component)역시 말 그대로 하나의 컴포넌트 안에서 HTML, CSS, JS가 관리되는 방식을 의미한다.

전통적으로 버튼 UI랑 입력 필드 UI를 만든다고 할 때 이 UI를 구현하기 위한 HTML, CSS, JS는 모두 하나의 HTML 파일 안에서 작성된다.

하지만 Vue.js는 이러한 UI 요소들이 각자 컴포넌트라는 단위로 구성되어있고 특정 UI 요소의 컴포넌트 안에 그 UI 요소를 구성하기 위한 HTML, CSS, JS가 다 들어있다.(개꿀이잖아?)

💡 Vue.js 파일의 확장명은 .vue이다

💡 Vue.js에서 컴포넌트란?
재사용 가능한 Vue 인스턴스의 한 조각 즉, 웹 페이지를 구성하는 개별적이고 독립적인 UI 요소를 의미한다.

컴포넌트는 HTML, CSS, JavaScript를 포함할 수 있다.

버튼, 입력 필드, 폼과 같은 UI 요소들이 각각 하나의 컴포넌트가 될 수 있다.

2. Vue.js 개발스타일

---

2-1. Options API

data, methods 및 mounted 같은 객체를 사용하여 컴포넌트 로직을 정의하는 개발 스타일.

옵션으로 정의된 속성은 컴포넌트 인스턴스를 가리키는 함수 내부의 this에 노출된다.

자세한 내용은 실습하면서 알게될 예정 지금은 넘어가자.

2-2. Composition API

import 해서 가져온 Vue.js 내장 API 함수들을 사용하여 컴포넌트 로직을 정의하는 개발 스타일

SFC에서 컴포지션 API는 일반적으로 <script setup>과 함께 사용한다.

마찬가지로 자세한 내용은 실습하면서 알게될 예정 지금은 넘어가자.

3. 라이프사이클(LifeCycle)

---

3-1. 라이프사이클이란?

컴포넌트가 생성되고 파괴되기까지의 여러 단계를 의미한다.

라이프사이클은 8개의 라이프사이클 훅으로 나뉘며 개발자는 이 훅을 사용하여 특정 시점에 원하는 코드를 실행할 수 있다.

3-2. 라이프사이클 훅

1. beforeCreate
컴포넌트가 생성되고 반응형 시스템이 설정되기 전에 호출

이 시점에서는 data와 events가 아직 활성화되지 않음

2. created
컴포넌트가 생성된 후, 데이터 반응 시스템과 이벤트가 활성화되었지만, DOM에 마운트되기 전에 호출

이 단계에서 데이터와 메서드에 접근 가능

3. beforeMount
컴포넌트가 DOM에 마운트되기 직전에 호출

이 시점에서는 template 또는 render 함수가 컴파일되었지만, 아직 화면에 렌더링되지 않음

4. mounted
컴포넌트가 DOM에 마운트되고 나서 호출 즉, SFC 구조에서 템플릿 부분이 그려진 후에 호출

이 시점에서는 컴포넌트를 조작할 수 있는 DOM에 접근할 수 있으며, 템플릿 또는 렌더링 함수가 DOM에 적용된 후의 상태임

5. beforeUpdate
데이터가 변경되어 DOM에 업데이트 되기 전에 호출

이 단계에서는 새로운 데이터로 DOM을 업데이트하기 전에 기존 DOM에 접근 가능

6. updated
데이터 변경에 의한 DOM의 업데이트가 완료된 후 호출

이 시점에서는 업데이트된 DOM에 접근 가능

7. beforeDestroy
컴포넌트가 파괴되기 직전에 호출

이 단계에서는 인스턴스가 아직 완전히 파괴되기 전이므로, 인스턴스의 데이터와 메서드에 여전히 접근할 수 있음

8. destroyed
컴포넌트가 파괴된 후에 호출

이 시점에서는 컴포넌트의 모든 디렉티브가 해제되고, 이벤트 리스너가 제거되며, 반응형 시스템도 해제

💡 반응성
선언적인 방식으로 변화에 적응할 수 있는 프로그래밍 패러다임이다.

반응성을 만족하지 않는 프로그래밍은 우리가 특정 시점에 변수를 선언한다고 이전 시점에 이 변수를 통해 계산되었던 값이 바뀌지 않는다.

Vue.js에는 반응형 시스템이 존재하여 인스턴스의 데이터 객체에 있는 속성이 화면에 바인딩되어 있을 때, 해당 속성의 값이 변경되면 자동으로 화면을 업데이트하여 변경된 값을 반영해준다.

아래의 블로그 글의 설명이 아주 잘되어있다.
https://ko.vuejs.org/guide/extras/reactivity-in-depth

💡 DOM(Document Object Model)
웹 브라우저는 HTML 문서를 로드할 때, 해당 문서를 DOM 형태로 변환하여 메모리에 저장한다.

이렇게 메모리에 올라온 DOM은 문서의 구조화된 표현을 프로그래밍 언어가 문서 구조, 스타일, 내용 등을 변경할 수 있게 해준다.

DOM을 통해 JavaScript와 같은 스크립트 언어가 웹 페이지의 텍스트, 스타일, 속성 등을 동적으로 변경할 수 있습

💡 디렉티브
HTML 요소에 추가적인 기능이나 행동을 부여하기 위해 사용되는 특별한 토큰.
이후에 자세히 다룰 예정