Vue : Single-File Components

• Component

재사용 가능한 코드 블록

UI를 독립적이고 재사용 가능한 일부분으로 분할하고 각 부분을 개별적으로 다룰 수 있다.

자연스럽게 애플리케이션은 중첩된 컴포넌트의 트리 형태로 구성된다.

 

• Single-File Components (SFC)

컴포넌트의 템플릿(html), 로직(JS) 및 스타일(css)을 하나의 파일로 묶어낸 특수한 파일 형식 (.vue)

Vue SFC는 HTML, CSS, JavaScript 를 단일 파일로 합친 것

각 .vue 파일에서 3가지 유형의 최상위 언어 블록인 <templates>, <script>, <style> 블록은 컴포넌트의 뷰, 로직, 스타일을 독립적으로 배치하고 있다.

언어 블록 작성 순서는 상관없다.

 

• <templates>

각 vue 파일은 최상위 <templates> 블록을 하나만 포함할 수 있다.

 

• <script setup>

각 vue 파일은 setup 속성이 붙은 <script>블록을 하나만 포함할 수 있다. 단, 일반적인 <script>는 여러 개 가능하다.

컴포넌트의 setup() 함수로 사용되며 동일한 컴포넌트의 각 인스턴스에 대해 변수 및 함수를 자동으로 사용 가능하도록 해준다.

 

• <style scoped>

.vue 파일에 여러 <style> 태그가 포함될 수 있다.

scoped가 지정되면 CSS는 현재 컴포넌트에만 적용된다.

 

• Vite

프론트 엔드 개발 도구

빠른 개발 환경을 위한 빌드 도구와 개발 서버를 제공한다.

Vue SFC가 일반적인 방법으로 실행되지 않고 컴파일러를 통해 컴파일된 후 빌드되어야 해서 Vite 와 같은 빌드 도구가 필요하다.

 

• Build

프로젝트의 소스 코드를 최적화하고 번들링(일종의 포장)하여 배포할 수 있는 형식으로 변환하는 과정을 말한다.

개발 중에 사용되는 여러 소스 파일 및 리소스를 최적화된 형태로 조합하여 최종 소프트웨어 제품을 생성하는 것

Vite가 이러한 빌드 프로세스를 수행하는 데 사용된다.

 

• Node Package Manager (NPM)

Node.js의 기본 패키지 관리자 (파이썬의 pip 같은 것)

 

• Node.js

Chrome의 V8 자바 스크립트 엔진을 기반으로 하는 서버 사이드 실행 환경

⇒ 기존에 브라우저 안에서만 동작할 수 있었던 자바 스크립트를 서버 측에서도 실행할 수 있도록 하여 자바 스크립트를 프론트엔드와 백엔드에서 모두 사용할 수 있게 되었다.

NPM을 활용하여 수많은 오픈 소스 패키지와 라이브러리를 제공하여 개발자들이 손쉽게 코드를 공유하고 재사용할 수 있게 한다.

 

• Module

프로그램을 구성하는 독립적인 코드 블록 (.js 파일)

파이썬에서는 .py 라는 모듈이 있었다.

⇒ 개발하는 애플리케이션의 크기가 커지고 복잡해지면서 파일 하나에 모든 기능을 담기가 어려워졌다. 그래서 자연스럽게 파일을 여러 개로 분리하여 관리하게 되었고, 이때 분리된 각 파일이 바로 모듈이다.

BUT. 애플리케이션이 더욱 발전함에 따라 처리해야 하는 모듈 개수도 극적으로 증가했고 이에 따라 성능 병목 현상이나 모듈 간 의존성(연결성)이 깊어지는 현상이 발생하여 특정 문제가 어떤 모듈 간의 문제인지 파악하기가 매우 어려워졌다.

⇒ 복잡하고 깊은 모듈 간 의존성 문제를 해결하기 위한 도구가 필요해짐 = Bundler

 

• Bundler

여러 모듈과 파일을 하나 또는 여러 개의 번들로 묶어 최적화하여 애플리케이션에서 사용할 수 있게 만들어주는 도구

번들러가 하는 작업을 Bundling 이라고 하는데, 의존성 관리, 코드 최적화, 리소스 관리 등이 있다.

 

• node_modules

Node.js 프로젝트에서 사용되는 외부 패키지들이 저장되는 디렉토리

프로젝트의 의존성 모듈을 저장하고 관리하는 공간

프로젝트가 실행될 때 필요한 라이브러리와 패키지들을 포함한다.

용량이 매우 커서 .gitignore에 작성되어있다.

 

• package-lock.json

패키지들의 실제 설치 버전, 의존성 관계, 하위 패키지 등을 포함하여 패키지 설치에 필요한 모든 정보를 포함한다.

패키지들의 정확한 버전을 보장하여 여러 개발자가 협업하거나 서버 환경에서 일관성 있는 의존성을 유지하는 데 도움을 준다.

npm install 명령을 통해 패키지를 설치할 때 명시된 버전과 의존성을 기반으로 설치한다.

⇒ Django의 requirements 같은 것

 

• package.json

프로젝트의 메타 정보와 의존성 패키지 목록을 포함한다.

프로젝트 이름, 버전, 작성자, 라이선스 등과 같은 메타 정보를 정의

⇒ package-lock.json 과 함께 프로젝트의 의존성을 관리하고, 버전 충돌을 막고 일관성을 유지하는 역할을 담당한다.

 

• public 디렉토리

주로 소스코드에서 참조되지 않거나 항상 같은 이름을 갖고 import 할 필요 없는 정적 파일들이 있는 곳이다.

항상 root 절대 경로를 사용하여 참조한다.

 

• src 디렉토리

프로젝트의 주요 소스 코드를 포함하는 곳이다.

컴포넌트, 스타일, 라우팅 등 프로젝트의 핵심 코드를 관리한다.

 

• src/assets

프로젝트 내에서 사용되는 자원 (이미지, 폰트, 스타일 시트 등)을 관리한다.

컴포넌트 자체에서 참조하는 내부 파일을 저장하고 있다.

컴포넌트가 아닌 곳에서는 public 디렉토리에 위치한 파일을 사용한다.

 

• src/components

Vue 컴포넌트들을 작성하는 곳

 

• src/App.vue

Vue 앱의 최상위 Root 컴포넌트

다른 하위 컴포넌트들을 포함한다.

애플리케이션 전체의 레이아웃과 공통적인 요소를 정의한다.

 

• src/main.js

Vue 인스턴스를 생성하고 애플리케이션을 초기화하는 역할

필요한 라이브러리를 import 하고 전역 설정을 수행한다.

( ⇒ Django 의 settings.py)

 

• index.html

Vue 앱의 기본 HTML 파일, 앱의 진입점 (entry point)

Root 컴포넌트인 App.vue가 해당 페이지에 mount 된다.

필요한 스타일 시트, 스크립트 등의 외부 리소스를 로드할 수 있다.

 

전체 프로젝트에서 html 파일은 이거 하나이다.

지금 만드는 것이 페이지가 하나인 SPA 이기 때문이다.

하나의 페이지에 구성하는 컴포넌트만 갈아끼우고 있는 것이다.

여기에 최상위 컴포넌트인 App.vue 가 마운트 되어있다.

 

• 컴포넌트 사용 단계

1. 컴포넌트 파일 생성하기
2. 최상위 컴포넌트(App.vue)에 컴포넌트 등록하기 (import)

 

• Virtual DOM

가상의 DOM을 메모리에 저장하고 실제 DOM과 동기화하는 프로그래밍 개념

실제 DOM과의 변경사항 비교를 통해 변경된 부분만 실제 DOM에 적용하는 방식이다.

웹 애플리케이션의 성능을 향상시키기 위한 Vue의 내부 렌더링 기술

 

• Virtual DOM 패턴의 장점

효율성 ⇒ 실제 DOM 조작을 최소화하고 변경된 부분만 업데이트하여 성능을 향상

반응성 ⇒ 데이터의 변경을 감지하고 효율적으로 갱신하여 UI를 자동으로 업데이트

추상화 ⇒ 개발자는 실제 DOM 조작을 Vue에게 맡기고 컴포넌트와 템플릿을 활용하는 추상화된 프로그래밍 방식으로 원하는 UI 구조를 구성하고 관리할 수 있다.

 

• Virtual DOM 주의사항

실제 DOM 에 직접 접근하지 말 것

→ 자바 스크립트에서 사용하는 DOM 접근 관련 메서드 사용 금지 (querySelector, createElement, addEventListener 등)

→ Vue의 ref() 와 Lifecycle Hooks 함수를 통해 간접적으로 접근하여 조작할 것

 

• 모든 컴포넌트에는 최상단 HTML 요소가 작성되는 것이 권장

가독성, 스타일링, 명확한 컴포넌트 구조를 위해 각 컴포넌트에는 최상단 HTML 요소를 작성해야 한다. (single root element)

 

• SFC의 CSS scoped 기능

scoped 속성을 사용하면 해당 CSS는 현재 컴포넌트의 요소에만 적용된다.

부모 컴포넌트의 스타일이 자식 컴포넌트로 유출되지 않는다.

그러나 자식 컴포넌트의 최상위 요소는 부모 CSS와 본인 CSS 모두에게서 영향을 받는다.

자식 컴포넌트의 최상위 요소는 부모에서 사용되기 때문

 

• Scaffolding (스캐폴딩)

새로운 프로젝트나 모듈을 시작하기 위해 초기 구조와 기본 코드를 자동으로 생성하는 과정

개발자들이 프로젝트를 시작하는 데 도움을 주는 틀이나 기반을 제공하는 작업

초기 설정, 폴더 구조, 파일 템플릿, 기본 코드 등을 자동으로 생성하여 개발자가 시작할 때 시간과 노력을 절약하고 일관된 구조를 유지할 수 있도록 도와준다.