통째로 뒤집히게 되었음

주로 vue.js + spring boot 기반으로 작업을 하는 회사에 다니게 되어 기반 기술을 연습하기 위해 프로젝트 기반 기술을 바꾸려고 함.

 

일단 spring은 조금이나마 알고있긴 하니 vue.js 위주로 공부하면 되지 않을까 싶음.

 

vue.js 구축

https://oingdaddy.tistory.com/470

[Vue.js] #1. 개발환경 구성하기

 

https://www.youtube.com/watch?v=sqH0u8wN4Rs 

vue는 컴포넌트 기반의 spa(single page application)를 구축할 수 있게 해주는 프레임 워크

 

웹 프론트엔드 프레임워크중 하나.

vue, react, angular? 3개가 프론트엔드의 표준급...

순수 js나 jquery로 개발하는 경우는 이제 거의 없다.

프레임워크를 하나 선택해 개발하는게 대세

 

하나를 깊이 익히면 다른 기술 익히기는 쉽다...

 

컴포넌트는 UI요소?

재사용이 가능하도록 구조화

 

SPA는 하나의 페이지에서 필요한 영역 부분만 로딩 되는 형태(페이지 전체 로딩 X)

빠른 페이지 변환, 적은 트래픽.

 

vue cli?

command line interface, 프로젝트 구조 자동 세팅? 라이브러리? 웹 팩?

 

개발환경 구축

글로벌로 vue 설치

npm install -g @vue/cli

 

프로젝트 생성

vue create 폴더명

 

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

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

API Preference?

Vue Router ?

페이지 이동?

 

대충 pug? 뭐 그거랑도 비슷한거같기도 하고...

 

<script setup>
import { ref } from 'vue'

const titleClass = ref('title')

const count = ref(0)
const count1 = ref(0)

function increment() {
  count.value++
}
function increment1() {
  count1.value++
}
</script>

<template>
  <h1 :class="titleClass">나를 빨갛게 만들어 보세요</h1>
  <button v-on:click="increment">숫자 : {{ count }}</button>
  <button @click="increment1">숫자 : {{ count1 }}</button>
</template>

<style>
.title {
  color: red;
}
</style>

ref가 의미하는게 뭔지 모르겠다...