[Vue] Vue_CLI

Jinga·2023년 5월 2일

Vue

목록 보기

3/13

Vue CLI

Vue.js 프로젝트를 구성하고 관리하기 위한 CLI(Command Line Interface) 도구이다.

Vue.js 프로젝트를 쉽게 생성하고 구성할 수 있게 해주며, 프로젝트를 위한 기본 구성을 제공한다.

프로젝트의 개발 및 빌드를 위한 다양한 도구를 제공하고, 테스트, 배포 등 다양한 작업을 쉽게 수행할 수 있게 해준다.

Vue CLI 설치

vscode 터미널에서 진행

설치 : npm install -g @vue/cli

프로젝트 생성 : vue create vue-cli

Vue 버전 선택 : Default ([Vue 2] babel, eslint) 선택
안전성, 브라우저 호환성, 라이브러리 지원, 개발 생산성, 유지보수의 편의성 때문에 아직까진 Vue3말고 Vue2 사용

이동 및 실행 : cd vue-cli => npm run serve

Vue CLI 프로젝트 기본구조

node_modules/: 프로젝트에서 사용하는 모든 npm 패키지들이 설치되는 폴더이다.

Module

소프트웨어에서 일반적으로 하나의 기능을 담당하는 코드 조각을 뜻한다.

모듈은 프로그램의 여러 부분에서 사용되어, 코드의 재사용성을 높이고, 유지보수를 용이하게 만든다.

모듈의 수가 많아지고 라이브러리 혹은 모듈 간의 의존성(연결성)이 깊어지면서 특정한 곳에서 발생한 문제가 어떤 모듈간의 문제인지 파악하기 어려워진다.

이러한 모듈 간의 의존성 문제를 해결하기 위해 Webpack이 등장했다.

Babel : 최신 버전의 JavaScript 코드를 이전 버전의 JavaScript 코드로 변환하는 트랜스파일러(transpiler)이다.

Webpack : 웹 애플리케이션을 위한 정적 모듈 번들러(Static Module Bundler)이다.
웹 애플리케이션의 로딩 속도를 개선하고, 의존성 문제를 해결하기 위한 도구이다.

Bundler : 웹 애플리케이션에서 사용되는 여러개의 모듈을 하나의 파일로 묶어주는 도구이다.
모듈 의존성 문제를 해결할 수 있다.

public/: 정적 파일들이 위치하는 폴더이다.

src/: Vue.js 애플리케이션의 소스코드가 위치하는 폴더이다.

assets/: 이미지, 폰트 등과 같은 리소스 파일들이 위치한다.

components/: Vue.js 컴포넌트들이 위치하는 폴더이다.

App.vue: Vue.js 루트 컴포넌트이다.

main.js: 애플리케이션의 진입점이며, Vue 인스턴스를 생성하고 라우터 및 Vuex와 같은 필수 플러그인을 추가한다.

babel.config.js: Babel 설정 파일이다.

package.json: 프로젝트의 의존성과 스크립트 등을 정의하는 파일이다.

vue.config.js: Vue CLI 설정 파일입니다. 여기에서 프로젝트의 환경 변수, 빌드 구성, 웹팩 설정 등을 구성할 수 있다.

SFC

Component

UI를 독립적이고 재사용 가능한 조각들로 나눈 것을 뜻한다.

CS에서는 다시 사용할 수 있는 범용성을 위해 개발된 소프트웨어 구성 요소를 의미한다.

UI를 빠르게 개발하고 유지보수하기 위한 핵심적인 개념이다.

잘 구현된 컴포넌트는 코드의 가독성과 유지보수성을 높일 뿐 아니라, 개발 생산성을 향상시킬 수 있다.

Django에서의 예시

base.hmtl과 index.html을 분리해서 작성했지만, 하나의 화면으로 볼 수 있다.

즉, 한 화면은 여러 개의 컴포넌트로 이루어질 수 있다.

base.html을 변경하면 이를 extends하는 모든 화면에 영향을 미친다. (유지보수를 쉽게 해준다.)

index.html에서 for문을 통해 여러 게시글들을 하나의 형식에 맞추어서 출력해준다. (형식의 재사용)

Vue공식문서 Component

SFC(Single File Component)

Vue에서 말하는 component란 이름이 있는 재사용 가능한 Vue instance ( new Vue()로 만든 인스턴스)

하나의 .vue 파일이 하나의 Vue instance이고, 하나의 컴포넌트이다.

Vue.js에서 사용되는 컴포넌트 구현 방식 중 하나로, HTML, CSS, JavaScript 코드를 한 파일에서 관리할 수 있도록 지원하는 방식이다.

Vue component구조

템플릿(HTML)

HTML의 body부분이며, 눈으로 보여지는 요소를 작성한다.

다른 컴포넌트를 HTML요소처럼 추가 가능하다.

Vue.js에서는 Template 문법을 사용하여 동적으로 데이터를 렌더링할 수 있다.

스크립트(JavaScript)

JavaScript 코드가 작성되는 곳이다.

컴포넌트 정보, 데이터, 메서드 등 vue 인스턴스를 구성하는 대부분이 작성된다.

스타일(CSS)

CSS가 작성되며 컴포넌트의 스타일을 담당한다.

이러한 구조를 가지고, .vue 파일에서는 HTML, CSS, JavaScript 코드를 한 파일에서 관리할 수 있으며, 각각의 코드 블록이 어떤 역할을 수행하는지 명확하게 구분할 수 있다.

Vue component 실습

생성 기초

src/components/안에 파일이름.vue 생성

script에 이름 등록

template에 요소 추가(반드시 하나의 요소만 추가 가능하며 비어 있어도 안된다.)

App.vue에 등록

자식 component 작성

src/components/안에 파일이름.vue생성

사용 할 component에 자식 component 등록