Vue.js 의 시작

Component

재사용 가능한 코드 블록

• UI를 독립적으로 재사용 가능한 일부분으로 분할하고 각 부분을 개별적으로 다룰 수 있음
• 그러면 자연스럽게 앱은 중첩된 Component의 트리로 구성됨

Single-File Components(SFC)

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

SFC 파일 예시

• Vue SFC는 HTML, CSS 및 JavaScript 3개를 하나로 합친 것
  <template>, <scirpt> 및 <style> 블록은 하나의 파일에서 컴포넌트의 뷰, 로직 및 스타일을 캡슐화하고 배치

SFC 문법 개요

• 각 *.vue 파일은 세 가지 유형의 최상위 언어 블록 <template>, <script>, <style>으로 구성됨
• 언어 블록의 작성 순서는 상관 없으나 일반적으로 template -> script -> style 순서로 작성

언어 블록 - <template>

• 각 *.vue 파일은 최상위 <template> 블록을 하나만 포함할 수 있음

언어 블록 - <script setup>

• 각 *.vue 파일은 하나의 <script setup> 블록만 포함할 수 있음(일반 <script>제외)
• 컴포넌트의 setup()함수로 사용되며 컴포넌트의 각 인스턴스에 대해 실행

언어 블록 - <style scoped>

• *.vue 파일은 여러 <style> 태그가 포함될 수 있음
• scoped가 지정되면 CSS는 현재 컴포넌트에만 적용

Vite (SFC build tool)

프론트 엔트 개발 도구

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

//vite 프로젝트 생성
$ npm create vue@latest
//Vue 프로젝트 서버 실행
$ npm run dev

Node Package Manager(NPM)

Node.js의 기본 패키지 관리자

node

Chrome의 V8 JavaScript 엔진을 기반으로 하는 Server-Side 실행환경

Node.js의 영향

• 기존에 브라우저 안에서만 동작할 수 있었던 JavaScript를 브라우저가 아닌 서버 측에서도 실행할 수 있게 함
• 프론트엔드와 백엔드에서 동일한 언어로 개발할 수 있게 됨

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

Vite 프로젝트 구조

node_modules

• Node.js 프로젝트에서 사용되는 외부 패키지들이 저장되는 디렉토리
• 프로젝트의 의존성 모듈을 저장하고 관리하는 공간
• 프로젝트가 실행될 때 필요한 라이브러리와 패키지들을 포함
• .gitignore에 작성됨

package-lock.json

• 패키지들의 실제 설치 버전, 의존성 관계, 하위 패키지 등을 포함하여 패키지 설치에 필요한 모든 정보를 포함
• 패키지들의 정확한 버전을 보장하여, 여러 개발자가 협업하거나 서버 환경에서 일관성있는 의존성을 유지하는데 도움을 줌
• npm install 명령을 통해 패키지를 설치할 때, 명시된 버전과 의존성을 기반으로 설치

package.json

• 프로젝트의 메타 정보와 의존성 패키지 목록을 포함
• 프로젝트의 이름,버전,작성자,라이선스 등과 같은 메타 정보를 정의
• package-lock.json과 함께 프로젝트의 의존성을 관리하고, 버전 충돌 및 일관성을 유지하는 역할

public 디렉토리

• 주로 다음 정적 파일을 위치 시킴
  • 소스코드에서 참조되지 않는
  • 항상 같은 이름을 갖는
  • import할 필요 없는
• 항상 root 절대경로를 사용하여 참조
  • public/icon.png는 소스코드에서 /icon.png로 참조할 수 있음

src 디렉토리

• 프로젝트의 주요 소스 코드를 포함하는 곳
• 컴포넌트,스타일,라우팅 등 프로젝트의 핵심 코드를 관리

src/assets

• 프로젝트 내에서 사용되는 자원 (이미지, 폰트, 스타일 시트 등)을 관리
• 컴포넌트 자체에서 참조하는 내부 파일을 저장하는데 사용
• 컴포넌트가 아닌 곳에서는 public 디렉토리에 위치한 파일을 사용

src/componenets

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

src/App.vue

• Vue 앱의 최상위 Root 컴포넌트
• 다른 하위 컴포넌트들을 포함
• 어플리케이션 전체의 레이아웃과 공통적인 요소를 정의

src/main.js

• Vue 인스턴스를 생성하고, 어플리케이션을 초기화 하는 역할
• 필요한 라이브러리를 import 하고 전역 설정을 수행

index.html

• Vue 앱의 기본 HTML 파일
• 앱의 진입점(entry point)
• Root 컴포넌트인 App.vue 가 해당 페이지에 마운트(mount)됨(Vue앱에 SPA인 이유)
• 필요한 스타일 시트, 스크립트 등의 외부 리소스를 로드할 수 있음(ex.bootstrap CDN)

Module

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

• 개발하는 어플리케이션의 크기가 커지고 복잡해지면서 파일 하나에 모든 기능을 담기가 어려워짐
• 따라서 자연스럽게 파일을 여러 개로 분리하여 관리를 하게 되었고, 이때 분리된 파일 각각이 모듈(module) 즉, js파일 하나가 하나의 모듈
• 모듈의 수가 많아지고 라이브러리 혹은 모듈 간의 의존성(연결성)이 깊어지면서 특정한 곳에서 발생한 문제가 어떤 모듈 간의 문제인지 파악하기 어려워 짐
• 복잡하고 깊은 모듈의 의존성 문제를 해결하기 위한 도구가 필요 -> Bundler

Bundler

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

• 의존성 관리, 코드 최적화, 리소스 관리 등
• Bundler가 하는 작업을 Bundling이라 함
• Vite는 Rollup 이라는 Bundler를 사용하며 개발자가 별도로 기타 환경설정에 신경쓰지 않도록 모두 설정해두고 있음

Scaffolding(스캐폴딩)

• 새로운 프로젝트나 모듈을 시작하기 위해 초기 구조와 기본 코드를 자동으로 생성하는 과정
• 개발자들이 프로젝트를 시작하는 데 도움을 주는 틀이나 기반을 제공하는 작업
• 초기 설정, 폴더 구조, 파일 템플릿, 기본 코드 등을 자동으로 생성하여 개발자가 시작할 때 시간과 노력을 절약하고 일관된 구조를 유지할 수 있도록 도와줌

SFC의 CSS 기능 - scoped

<style scoped></style>

• scoped를 사용하면 부모 컴포넌트의 스타일이 자식 컴포넌트로 유출되지 않음
• 단, 자식 컴포넌트의 최상위 요소(root element)는 부모와 자식의 CSS 모두의 영향을 받음
• 부모가 레이아웃 목적으로 자식 컴포넌트 최상위 요소의 스타일을 지정할 수 있도록 의도적으로 설계된 것

SFC의 CSS 기능 - scoped 예시

• MyComponent(자식)의 최상위 요소는 부모와 본인이 CSS 모두의 영향을 받기 때문에 부모의 스타일이 적용됨

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

• 가독성, 스타일링, 명확한 컴포넌트 구조를 위해 각 컴포넌트에는 최상단 HMTL 요소를 작성해야함(Single Root Element)