Vue 추가

_posts/nuxt/2024-07-25-creatednuxt.md

@@ -0,0 +1,28 @@
+---
+title: '[ Nuxt.js ] Nuxt.JS'
+author: <author_id>
+categories: [ Nuxt.js ]
+tags: [ Nuxt.js ]
+math: true
+toc: true
+mermaid: true
+image: /images/backgrounds/nuxt.png
+---
+
+### 새로운 프로젝트 생성
+
+```javascript
+// npm
+npx nuxi@latest init <project-name>
+
+// yarn
+yarn dlx nuxi@latest init <project-name>
+
+```
+
+작년에 취업을 하면서 회사에서 `React.JS` 와 `Next.js`로 여러 프로젝트를 진행했었는데,
+몇 개월 전부터 다른 프로젝트에 투입이 되면서 `Vue.js`를 처음 접하게 되었습니다.
+막상 시작하기 전에는 Vue를 별로 좋아하는 편이 아니었었는데 막상 `Vue3`를 써보니
+생각보다 편하고 `생산성에서는 리엑트보다 빠르고 안정적인` 느낌까지 받았습니다.
+
+특히 `v-if`,`v-for`,`ref`,`reactive` 등 Vue의 기능등이 너무 편했고

_posts/vue/2024-07-25-startVue.md

@@ -0,0 +1,68 @@
+---
+title: '[ Vue.JS ] Vue.JS'
+author: <author_id>
+categories: [ Vue.JS ]
+tags: [ Vue.JS ]
+math: true
+toc: true
+mermaid: true
+image: /images/backgrounds/vue.png
+---
+
+### 새로운 프로젝트 생성
+
+```javascript
+// npm
+npx nuxi@latest init <project-name>
+
+// yarn
+yarn dlx nuxi@latest init <project-name>
+
+```
+
+작년에 취업을 하면서 회사에서 `React.JS`와 `Next.JS`로 여러 프로젝트를 진행했었는데,
+몇 개월 전부터 다른 프로젝트에 투입되면서 `Vue.JS`를 처음 접하게 되었습니다.
+막상 시작하기 전에는 Vue를 별로 좋아하지 않았었는데 막상 `Vue3`를 써보니
+생각보다 편하고 `생산성에서는 리액트보다 빠르고 안정적인` 느낌까지 받았습니다.
+
+특히 `v-if`, `v-for`, `ref`, `reactive` 등 Vue의 기능들이 너무 편했으며
+특히 `v-for`과 `v-if`는 진짜 편리했습니다.
+
+`v-for`과 `v-if` 사용법을 `React.JS`와 비교해보면
+
+#### React.JS
+
+```jsx
+const Test = () => {
+  const arr = [1,2,3,4,5]
+
+  return (
+    <div>
+      {arr.map((num) => {
+        return <div>{num}</div>
+      })}
+    </div> 
+  )
+}
+```
+
+#### Vue.JS
+
+```vue
+<script setup>
+  const arr = ref([1,2,3,4,5])  
+<script>
+
+<template>
+  <div>
+    <div v-for="num in arr">
+      {{num}}
+    </div>
+  </div>
+<template>  
+
+여기서 놀랐던 점은 `React.JS`의 경우 빈 배열이면 에러가 발생하지만 `Vue.JS`는
+그냥 렌더링을 안 한다는 점에서 안전성을 느끼면서 나름 만족하면서 사용하고 있습니다.
+
+이것 이외에도 장점도 많이 있지만 단점도 존재하기에 아직까지는 저는 `React.JS`가
+더 편하기는 하네요.