SFC

Compnent(컴포넌트)

• 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화 하는데 도움을 줌
• CS에서는 다시 사용할 수 있는 범용성을 위해 개발된 소프트웨어 구성 요소를 의미
• 즉, 컴포넌트는 개발을 함에 있어 유지보수를 쉽게 만들어 줄 뿐만 아니라, 재사용성의 측면에서도 매우 강력한 기능을 제공
• Vue 컴포넌트 === Vue 인스턴스

SFC란

• Single File Component
• Vue 의 컴포넌트 기반 개발의 핵심 특징
• 하나의 컴포넌트는 .vue라는 하나의 파일 안에서 작성되는 코드의 결과물
• 화면의 특정 영역에 대한 HTML, CSS, JavaScript 코드를 하나의 파일(.vue)에서 관리
• 즉, vue확장자를 가진 싱글 파일 컴포넌트를 통해 개발하는 방식
• Vue 컴포넌트 === Vue 인스턴스 === .vue 파일

Vue CLI

• Command Line Interface
• Vue.js 개발을 위한 표준 도구
• 프로젝트의 구성을 도와주는 역할을 하며 Vue 개발 생태계에서 표준 tool 기준을 목표로 함
• 확장 플러그인, GUI, ES2015 구성요소 제공 등 다양한 tool 제공
• https://cli.vuejs.org/

Node.js

• 자바스크립트를 브라우저가 아닌 환경에서도 구동할 수 있또록 하는 자바스크립트 런타인 환경
  • 브라우저 밖을 벗어날 수 없던 자바스크립트 언어의 태생적 한계를 해결
• Chrome V8 엔진을 제공하여 여러 OS 환경에서 실행할 수 있는 환경을 제공
• 즉, 단순히 브라우저만 조작할 수 있던 자바스크립트를 SSR에서도 사용가능하도록 함
• https://nodejs.org/ko/

NPM

• Node Package Manage

• 자바스크립트 언어를 위한 패키지 관리자

  • python의 pip이 있다면 Node.js에는 NPM
  • pip 과 마찬가지로 다양한 의존성 패키지를 관리

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

• Node.js와 함께 자동으로 설치됨

Vue CLI 설치

• vue-cli 설치
  • $ npm install -g @vue/cli
• 버전확인
  • $ vue --version
• 프로젝트 생성
  • $ vue create my-first-vue-app
• run server
  • $ npm run serve

Babel

• JavaScript Trans-compiler
• 자바스크립트의 신버전 코드를 구버전으로 번역/변환 해주는 도구
• 자바스크립트 역사에 있어서 파편화와 표준화의 영향으로 작성된 코드의 스펙트럼이 매우 다양
  • 최신 문법을 사용해도 브라우저의 버전별로 동작하지 않는 상황이 발생
  • 같은 의미의 다른 코드를 작성하는 등의 대응이 필요해졌고 이러한 문제를 해결하기 위한 도구
• 원시 코드(최신버전)을 목적 코드(구버전)으로 옮기는 번역기가 등장하면서 개발자는 더이상 내 코드가 특정 브라우저에서 동작하지 않는 상황에 대해 크게 고민하지 않을 수 있음

webpack

• static module bundler
• 모듈 간의 의존성 문제를 해결하기 위한 도구

Module

• 모듈은 단지 파일 하나를 의미( ex. 스크립트 하나 === 모듈 하나 )

• 배경

  • 브라우저만 조작할 수 있었던 시기의 자바스크립트는 모듈 관련 문법 없이 사용 되어짐

  • 하지만 자바스크립트와 애플리케이션이 복잡해지고 크기가 커지자

    전역 스코프를 공유하는 형태의 기존 개발 방식의 한계점이 드러남

  • 그래서 라이브러리를 만들어 필요한 모듈을 언제든지 불러오거나

    코드를 모듈 단위로 작성하는 드으이 다양한 시도가 이루어짐

• 과거 모듈 시스템

  • AMD, CommonJS, UMD

• 모듈 시스템 2015년 표준으로 등재되어 있으며 현재는 대부분의 브라우저와 Node.js가 모듈시스템을 지원

Module 의존성문제

• 모듈의 수가 많아지고 라이브러리 혹은 모듈 간의 의존성(연결성)이 깊어지면서 특정한 곳에서 발생한 문제가 어떤 모듈 간의 문제인지 파악하기 어려워짐(의존성 문제)
• Webpack은 모듈 간의 의존성 문제를 해결하기 위해 존재하는 도구

Bundler

• 모듈 의존성 문제를 해결해주는 작업이 Bundling이고 이러한 일을 해주는 도구가 Bundler 이다.

  Webpack은 다양한 Bundler 중 하나

• 모듈들을 하나로 묶어주고 묶인 파일을 하나(혹은 여러개)로 만들어짐

• Bundling 된 결과물은 더 이상 서-순에 영향을 받지 않고 동작하게 됨

• Bundling 과정에서 문제가 해결되지 않으면 최종 결과물을 만들어 낼 수 없기 때문에 유지 & 보수의 측면에서도 매우 편리해짐

  • snowpack. parcel, rollup.js 등의 webpack 이외에도 다양한 모듈 번들러 존재

• VueCLI는 이러한 Babel, Webpack에 대한 초기 설정이 자동으로 되어 있음

Vue project 구성요소 살펴보기

• node_modules
  • node.js의 여러 의존성 module이 설치되어있음.
  • webpack이나 babel도 여기 들어있음
• public
  • favicon.ico
    • 브라우저 탭에 뜨는 아이콘
  • index.html
    • vue app의 뼈대가 되는 html
    • main.js에서 mount 되는 대상이 됨
    • 실제로 npm run build를 했을 때 열리는 문서다.
• src
  • assets
    • 정적인 파일들의 위치(이미지, 기타 멀티미디어 등 파일)
  • components
    • App.vue의 하위 컴포넌트들을 넣어두는 곳
    • components의 이름들은 파스칼케이스로 네이밍
      • ComponentName <- 이렇게
  • App.vue
    • 최상위 컴포넌트
  • main.js
    • webpack이 build를 시작할 때 가장먼저 시작하는 시작점
    • vue instance를 생성하는 역할
    • vue 전역에서 사용하는 모듈들을 등록할 수 있음
• package-lock.json 과 package.json
  • node_modules에 설치되는 모듈과 관련해서 모든 의존성을 설정 및 관리
    • 약간 python 가상환경에서 requirements.txt 와 비슷한 역할
    • 팀원 및 배포환경에서 정확히 동일한 종속성을 설치하도록 보장하는 표현
    • 사용할 패키지의 버전을 고정
    • 개발 과정 간의 의존성 패키지 충돌 방지
  • scripts
    • 사용할 명령어
  • dependencies
    • 개발환경 + 배포환경에 필요한 모듈들
  • devDependencies
    • 개발환경에서 사용하는 모듈들

vue 파일 구조

• vue 쓰고 tap키 누르면 기본 형태 만들어짐

<template>
</template>

<script>
</script>

<style>
</style>

App.vue

• 자식의 컴포넌트를 불러오고 - > components에 등록하고 -> 사용

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <MyNewComponent msg="Welcome to Your Vue.js App"/> <!-- 3. 쓴다.-->
</template>

<script>
import MyNewComponent from './components/NewComponent.vue' // 1. 불러오고

export default { // 2. components 등록하고
  name: 'App',
  components: {
    MyNewComponent,
  },
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

하위 컴포넌트

• 하나의 파일 안에는 여러개의 컴포넌트를 넣을 수 없음
  • 여러개의 컴포넌트를 사용하고 싶다면 상위 컴포넌트를 하나 만들고 그 안에 집어넣는 형태를 취해야함

<template> <!-- vue 하고 tap -->
  
  <!-- <h1>This is New componenet</h1> -->
  <!-- <h1>This is New componenet</h1>  -->
  <!-- 하나의 파일 = 하나의 vue = 하나의 컴포넌트 / 그래서 컴포넌트가 여러개 있으면 에러-->

  <!-- 만약 여러개를 쓰고 싶다면 / 이런식으로 div 안에 넣어야함-->
  <div>
    <h1>This is New componenet</h1>
    <h1>This is New componenet</h1>
    <h1>{{ msg }}</h1>
  </div>
</template>

<script>
export default {
  name : 'MyNewComponent', // Vue 탭에 뜨는 이름을 의미함
  props : {
    msg : String,
  }, 
}
</script>

<style>

</style>