[Vue.js] Vue.js로 간단한 todolist 만들기

Vue.js란?

Vue.js는 Evan You에 의해 개발된 JavaScript 프론트엔드 프레임워크

특징:

• 직관적인 문법: Vue.js는 HTML 기반의 템플릿 구문과 JavaScript 기반의 컴포넌트 옵션을 제공하여 직관적인 문법을 가지고 있습니다.
• 반응형 시스템: Vue.js는 데이터의 변화를 감지하고 자동으로 UI를 업데이트하는 반응형 시스템을 가지고 있습니다.
• 컴포넌트 기반: Vue.js는 컴포넌트 기반 아키텍처를 사용하여 재사용 가능한 UI 컴포넌트를 구축할 수 있습니다.
• 단일 파일 컴포넌트: Vue.js는 템플릿, 스타일, 로직을 한 파일에 모두 포함하는 단일 파일 컴포넌트를 지원하여 개발 편의성을 제공합니다.

NPM

Vue를 사용하여 대규모 애플리케이션을 구축할 때 NPM를 이용한 설치를 권장하고 있습니다. NPM은 Webpack 또는 Browserify와 같은 모듈 번들러와 잘 작동합니다. Vue는 싱글 파일 컴포넌트를 만들기 위한 도구도 제공합니다.

CLI

Vue.js는 단일 페이지 애플리케이션를 빠르게 구축할 수 있는 공식 CLI를 제공합니다. 최신 프론트엔드 워크 플로우를 위해 사전 구성된 빌드 설정을 제공합니다. 핫 리로드, 저장시 린트 체크 및 프로덕션 준비가 된 빌드로 시작하고 실행하는데 몇 분 밖에 걸리지 않습니다. 상세한 내용은 Vue CLI 문서에서 찾아보실 수 있습니다.

 

VUE CLI 란?

vue-cli 는 기본 vue 개발 환경을 설정해주는 도구입니다. vue-cli 가 기본적인 프로젝트 세팅을 해주기 때문에 폴더 구조에 대한 고민, lint, build, 어떤 라이브러리로 구성을 해야되는지 webpack 설정은 어떻게 해야되는지에 대한 고민을 덜을 수 있습니다.

여기서 CLI 란 ?

명령 줄 인터페이스(CLI, Command line interface) 또는 명령어 인터페이스는 텍스트 터미널을 통해 사용자와 컴퓨터가 상호 작용하는 방식을 뜻한다. 즉, 작업 명령은 사용자가 컴퓨터 키보드 등을 통해 문자열의 형태로 입력하며, 컴퓨터로부터의 출력 역시 문자열의 형태로 주어진다. (위키백과)

 

Vue 설치

npm install vue // npm으로 vue 설치
npm vue -v // vue 설치 확인
npm install -g @vue/cli // vue-cli 설치

여기서 이런 에러가 났다.

zsh : command not found: vue

zshrc 환경변수 PATH 아래와 같이 수정

sudo로 vue cli 설치

sudo npm install -g @vue/cli
sudo npm i -g @vue/cli-init
vue --version // @vue/cli 5.0.8 이렇게 나오면 설치된 것임

프로젝트 시작하기

vue create [프로젝트명]

프로젝트를 시작하면 version 2 와 version 3을 고르라고 한다.

Vue 버전 2에는 제한된 typescript 지원, 성능 병목 현상, 까다로운 유지 보수, 제한된 스케일링 성능 등의 단점이 있습니다. Vue 버전 3은 성능, 가독성, 유지 보수, 보안 향상을 위해 아키텍처와 함수를 변경하여 이러한 문제를 해결하려고 합니다.

그래서 버전3으로 시작함

Hello, Vue! 설렌다~

 

vs code extension 추천! 이거 설치하면 코드 하이라이팅 됨.

 

그리고 정말 간단한 Vue 로 ToDoList 만들기! 설치부터 지금까지 2시간 걸렸다.

역시 우선 만들어 보는 게 제일 재밌다!

이제 하나씩 뜯어보며 공부하자!

template이 뭘까?

공식문서

템플릿 문법
Vue는 컴포넌트 인스턴스의 데이터를 서술적으로 렌더링된 DOM에 바인딩할 수 있는 HTML 기반 템플릿 문법을 사용합니다. 모든 Vue 템플릿은 사양을 준수하는 브라우저 및 HTML 파서에서 문법을 분석할 수 있는 문법적으로 유효한 HTML입니다.
내부적으로 Vue는 템플릿을 고도로 최적화된 JavaScript 코드로 컴파일합니다. 반응형 시스템과 결합된 Vue는 앱 상태의 변경 사항을 적용할 때, 다시 렌더링할 필요가 있는 최소한의 컴포넌트를 지능적으로 파악하고 DOM 조작을 최소화 합니다.
가상 DOM 개념에 익숙하고 JavaScript의 원시적인 작동법을 선호하는 경우, JSX 지원 옵션을 사용하여 템플릿 대신 렌더링 함수를 직접 작성할 수도 있습니다. 그러나 템플릿과 동일한 수준의 컴파일 시간 최적화를 기대할 수 없다는 점에 유의하십시오.

chatGPT

Vue.js에서의 template은 Vue 컴포넌트의 HTML 템플릿을 정의하는 부분입니다. template은 사용자 인터페이스의 구조와 레이아웃을 기술하며, Vue.js가 화면을 렌더링하는 데 사용됩니다.
Vue 컴포넌트는 일반적으로 template 옵션을 포함하고 있으며, 이 옵션에 HTML 코드를 작성합니다. template은 Vue.js의 템플릿 문법을 사용하여 데이터 바인딩, 조건부 렌더링, 반복문 등을 처리할 수 있습니다.
template은 Vue.js에서 가상 DOM(Virtual DOM)을 통해 실제 DOM과 동기화되며, 변경된 데이터에 따라 자동으로 화면이 업데이트됩니다.

 

ToDoList.vue

<template>
  <div>
    <h1>Todo List</h1>
    <input
      v-model="newTodo"
      placeholder="Add a new todo"
      @keyup.enter="addTodo"
    />
    <ul>
      <li v-for="(todo, index) in todos" :key="index">
        {{ todo }}
        <button @click="deleteTodo(index)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [],
      newTodo: "",
    };
  },
  methods: {
    addTodo() {
      if (this.newTodo !== "") {
        this.todos.push(this.newTodo);
        this.newTodo = "";
      }
    },
    deleteTodo(index) {
      this.todos.splice(index, 1);
    },
  },
};
</script>

<style>
ul {
  padding: 0;
}
li {
  list-style: none;
  margin-bottom: 5px;
  font-size: 30px;
}
button {
  margin-left: 10px;
}
</style>

이 ToDoList라는 컴포넌트는 todo라는 데이터를 가지고 있고, {{ todo }}와 같이 중괄호로 데이터 바인딩을 수행할 수 있다.

키보드 엔터 '@keyup.enter', 버튼 클릭 '@click' 이벤트 핸들러를 통해 'addTodo', 'deleteTodo' 메서드를 호출하여 todo 데이터를 추가하고 삭제한다.

 

-> 여기까지 설명을 읽으니 마치 React.js 의 return문과 비슷한 역할을 한다고 생각했다.

또 chatGPT 물어보기

맞습니다. Vue.js에서의 template은 React의 return문과 유사한 역할을 합니다. template은 Vue 컴포넌트의 HTML 템플릿을 정의하는 부분으로, 사용자 인터페이스의 구조와 레이아웃을 기술합니다.
React에서 return문은 JSX 문법을 사용하여 컴포넌트의 렌더링 결과를 반환하는 역할을 합니다. JSX는 JavaScript를 확장한 문법으로, HTML과 JavaScript를 함께 사용하여 컴포넌트의 UI를 작성할 수 있게 해줍니다.
Vue.js의 template은 비슷한 역할을 수행합니다. Vue 컴포넌트의 template 내에서 HTML 코드를 작성하고, Vue의 템플릿 문법을 사용하여 데이터 바인딩, 조건부 렌더링, 반복문 등을 처리할 수 있습니다.
두 프레임워크에서 template 및 return문은 각각 해당 프레임워크의 컴포넌트를 렌더링하기 위한 구조를 제공합니다. 다만 문법적으로는 차이가 있을 수 있고, Vue의 template은 HTML을 직접 작성하는 반면, React의 return문은 JSX 문법을 사용하여 HTML과 JavaScript를 결합하는 방식으로 작성됩니다.

그리고 v3 공식문서 핵심가이드를 읽어보니 v-model의 의미나 export default{} 안의 구조를 이해할 수 있었다.

 

v3 공식문서

싱글 파일 컴포넌트

빌드 도구를 사용하는 대부분의 Vue 프로젝트에서는 HTML과 유사한 싱글 파일 컴포넌트(Single-File Component: SFC, *.vue 파일이라고도 함)라는 파일 형식을 사용하여 Vue 컴포넌트를 작성합니다. Vue SFC는 이름에서 알 수 있듯이 컴포넌트의 논리(JavaScript), 템플릿(HTML) 및 스타일(CSS)을 하나의 파일에 캡슐화합니다. 이전에 보았던 예제는 다음과 같이 SFC 형식으로 작성할 수 있습니다:

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

<template>
  <button @click="count++">숫자 세기: {{ count }}</button>
</template>

<style scoped>
button {
  font-weight: bold;
}
</style>

SFC는 Vue를 빌드 방식으로 사용하는 경우, 컴포넌트를 만들고 정의하는데 권장되는 방법입니다. SFC를 왜 그리고 어떻게 사용해야 할까에서 자세히 알아볼 수 있습니다. 하지만 지금은 Vue가 모든 빌드 도구 설정을 처리한다는 점만 알아두세요.

 

API 스타일 > 옵션 API

옵션 API를 사용하여 옵션의 data, methods 및 mounted 같은 객체를 사용하여 컴포넌트의 로직를 정의합니다. 옵션으로 정의된 속성은 컴포넌트 인스턴스를 가리키는 함수 내부의 this에 노출됩니다:

<script>
export default {
  // data()에서 반환된 속성들은 반응적인 상태가 되어 `this`에 노출됩니다.
  data() {
    return {
      count: 0
    }
  },

  // methods는 속성 값을 변경하고 업데이트 할 수 있는 함수.
  // 템플릿 내에서 이벤트 리스너로 바인딩 될 수 있음.
  methods: {
    increment() {
      this.count++
    }
  },

  // 생명주기 훅(Lifecycle hooks)은 컴포넌트 생명주기의 여러 단계에서 호출됩니다.
  // 이 함수는 컴포넌트가 마운트 된 후 호출됩니다.
  mounted() {
    console.log(`숫자 세기의 초기값은 ${ this.count } 입니다.`)
  }
}
</script>

<template>
  <button @click="increment">숫자 세기: {{ count }}</button>
</template>

 

템플릿 문법 > 디렉티브

 

 

리스트 렌더링 > v-for

v-for 디렉티브를 사용하여 배열을 리스트로 렌더링할 수 있습니다. v-for 디렉티브는 item in items 형식의 특별한 문법이 필요합니다. 여기서 items는 배열이고, item(이하 아이템)은 배열 내 반복되는 앨리먼트의 **별칭(alias)**입니다.

 

이벤트 핸들링 > 이벤트 리스닝하기

일반적으로 v-on 디렉티브는 단축 문법으로 @ 기호를 사용하며, DOM 이벤트를 수신하고 트리거될 때, 사전 정의해둔 JavaScript 코드를 실행할 수 있습니다. v-on:click="handler" 또는 줄여서 @click="handler"와 같이 사용합니다.

핸들러 값은 다음 중 하나일 수 있습니다:

1. 인라인 핸들러: 이벤트가 트리거될 때 실행되는 인라인 JavaScript(네이티브 onclick 속성과 유사).
2. 메서드 핸들러: 컴포넌트에 정의된 메서드 이름 또는 메서드를 가리키는 경로.

Form 입력 바인딩

프론트엔드에서 폼을 처리할 때, 폼 입력 엘리먼트의 상태를 JavaScript의 상태와 동기화해야 하는 경우가 많습니다. 값 바인딩을 수동으로 연결하고 이벤트 리스너를 변경하는 것은 번거로운 작업입니다:

<input
  :value="text"
  @input="event => text = event.target.value">

 

v-model 디렉티브는 위의 내용을 다음과 같이 단순화하는 데 도움이 됩니다:

<input v-model="text">

또한 v-model은 다른 유형의 입력인 <textarea> 및 <select> 엘리먼트에 사용할 수 있습니다. 사용되는 엘리먼트에 따라 자동으로 다른 DOM 속성 및 이벤트 쌍으로 확장됩니다.

• 텍스트 유형의 <input>과 <textarea> 경우, value 속성과 input 이벤트를 사용합니다.
• <input type="checkbox">과 <input type="radio"> 경우, checked 속성과 change 이벤트를 사용합니다.
• <select>는 value를 속성으로 사용하고 change를 이벤트로 사용합니다.

생명주기 훅

 

React.js와 비교했을 때 Vue.js의 장점은 무엇일까?

우선 React.js는 라이브러리, Vue.js는 프레임워크이다.

 

프레임워크는 앱 개발 시 사용하는 구조적인 툴.

• 프레임워크가 앱 기반 구조를(파일 구조, URL 라우팅 방식) 제공하고 규칙도(인증 권한 관리) 제공 → 개발자는 비지니스 로직(주문 처리, 결제 등) 구현에 집중할 수 있음.
• 프레임워크는 특정 프로그래밍 언어로 작성되며, 애플리케이션의 라이프사이클 관리, 데이터베이스 연동, 라우팅, 세션 관리 등과 같은 공통 작업을 처리하는 라이브러리와 함께 제공됨.

라이브러리는 앱 개발에 사용하는 도구 모음.

• 특정 기능을 수행하기 위해 개발자가 호출할 수 있는 함수, 클래스, 모듈 등으로 구성됨.
• 필요한 라이브러리를 선택하고 필요한 기능을 호출하여 사용할 수 있음.
• 개발자가 필요로 하는 기능을 빠르게 구현할 수 있도록 도와주며, 애플리케이션의 특정 영역에 사용됨.

리액트와 뷰는 web-app, 페이지가 새로고침되지 않고 부드럽게 전환되는 사이트를 만들 때 사용함.

 

React.js와 비교했을 때 Vue.js의 장점?

러닝커브가 낮다, 코드 작성 방법이 정해져 있다...

 

*참고

https://v3-docs.vuejs-korea.org/

Vue.js - The Progressive JavaScript Framework | Vue.js

https://v2.ko.vuejs.org/v2/guide/

시작하기 — Vue.js

https://velog.io/@gillog/Vue-Vue-js-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8-%EC%83%9D%EC%84%B1-%EB%B0%8F-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0npm-node-%EC%84%A4%EC%B9%98

[Vue] Vue js 프로젝트 생성 및 시작하기(npm, node 설치)

https://stackoverflow.com/questions/58590890/how-to-fix-zsh-command-not-found-vue

How to fix "zsh: command not found: vue"?

https://codingapple.com/unit/why-use-vue-over-react/

카카오가 리액트 냅두고 왜 Vue 쓰는지 알려드림 - 코딩애플 온라인 강좌