코린이[코딩 어린이]

defineEmits

자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달해 줄 때 사용하는 단방향 데이터 전달 방식입니다.

Child.vue ( MainHeader.vue )

// 검색 내용을 부모 컴포넌트에 전해주기 예

<script setup>
    import { onMounted, inject, ref, defineEmits } from '@vue/runtime-core'
    
    const emit = defineEmits(["create:input"]);
    
    const inputData = (e) => {
        emit('create:input', e.target.value)
    }
</script>

<template>
    <input type="text" @input="inputData($event)" placeholder="서치 바" />
</template>

Parent.vue

<script setup>
    import { ref } from 'vue'
    
    const text = ref('')
    const handleUpdate = (item) => {
        text.value = item
        console.log(text.value)
    }
</script>

<template>
    <MainHeader @create:input="handleUpdate" />
</template>

defineProps

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달해 줄 때 사용하는 단방향 데이터 전달 방식입니다.

Parent.vue

<script setup>
    import ReadContents from '@/components/read/ReadContents.vue'
    const test = {
        id: 'hello',
        pass: 'world'
    }
</script>

<template>
    <ReadContents :test="test" />
</template>

Child.vue

<script setup>
    import { defineProps, onMounted, ref } from 'vue'
    
    const props = defineProps(['test'])
    console.log(props.test) // { id: "hello" pass: "world" }
    
</script>

Vuex 개념

vuex는 뷰의 상태관리 라이브러리로 애플리케이션의 모든 컴포넌트에 저장소 역할을 하며, 의도적인 방법으로 상태를 변경 및 관리 할 수 있습니다. Vuex는 Flux의 아키텍처를 따라가고 있으며 React의 Redux와 비슷하다고 볼 수 있습니다.

규모가 작은 애플리케이션의 경우 Event Bus를 사용해도 무방하지만 규모가 커지면 관리가 어려워지므로 Vuex를 사용하는 것을 권장합니다.

Vuex 구조

Vuex는 state, mutations, action, getters의 4가지 형태로 관리가 되며, 이때 store패턴을 사용하고 통상 store라고 불립니다.

이 4가지는 서로간의 간접적인 영향이 있으며 단방향 데이터 흐름으로 볼 수 있습니다.

State

스테이트는 Vue 컴포넌트에서 data로 불 수 있습니다. 원본 소스의 역할을 하며, View와 직접적으로 연결되어 있는 Model이다. 이 스테이트는 직접적인 변경이 불가능하며, 뮤테이션을 통해 스테이트가 변경이 일어나면 반응적으로 View가 업데이트 됩니다.

Mutations

뮤테이션은 스테이트를 변경하는 방법이고 이벤트와 유사합니다. 뮤테이션은 함수로 구현되며 첫 번째 인자는 스테이트를 받을 수 있으며, 두 번째 인자는 payload를 받을 수 있습니다.

:: payload : 여러 필드를 포함할 수 있는 객체의 형태도 가능합니다. 뮤테이션은 일반적으로 직접 호출 할 수 없으며, commit을 통해서만 호출 할 수 있습니다.

store.commit('setData', payload)

Actions

액션은 뮤테이션과 비슷하지만 뮤테이션과 다르게 비동기 작업이 가능합니다. 또한 뮤테이션에 대한 commit이 가능하여 액션에서도 뮤테이션을 통해 스테이트를 변경할 수 있습니다. 액션에서는 첫 번째 인자를 context인자로 받을 수 있으며, 이 context에는 state, commit, dispatch, rootstate와 같은 속성들을 포함합니다. 두 번째 인자는 뮤테이션과 동일하게 payload로 받을 수 있습니다.

commit을 통해 뮤테이션을 호출했다면 액션은 dispatch를 통해서 호출합니다. context속성을 보면 dispatch가 있는 것으로 보아 액션에서는 서로 다른 액션을 호출할 수 있다는 것을 볼 수 있습니다.

store.dispatch('setData', payload)

Getters

게터는 쉽게 Vue 컴포넌트에서 computed로 볼 수 있습니다. 게터의 결과는 종속성에 따라 캐시되고 일부 종속성이 변경된 경우에만 다시 재계산됩니다. 즉, 특정 스테이트에 대해 어떤 연산을 하고 그 결과를 View에 바인딩할 수 있으며, 스테이트의 변경 여부에 따라 게터는 재계산 되고, View 역시 업데이트를 합니다. 이때 스테이트는 원본 데이터로서 변경이 일어나지 않습니다.

Vuex 설치하기

npm install

$ npm install vuex

1. app.config.globalProperties

main.js

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.config.globalProperties.$hello = "hello"

app.mount('#app')

app.vue

<script>
    import { defineComponent } from 'vue'
    
    export default defineComponent({
        mounted() {
            console.log(this.$hello) // hello
        }
    })
</script>

2. provide / inject

main.js

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.provide('$hello', 'hello')

app.mount('#app')

app.vue

<script setup>
    import { inject } from 'vue'
    
    console.log(inject('$hello')) // hello
</script>

node-sass 바로가기

sass-loader 바로가기

npm install

$ npm install node-sass

$ npm install sass-loader

App.vue

<style scoped lang="scss">

</style>

npm 사용하지 않을 경우 Error 내용

vue-router 바로가기

npm install

$ npm install vue-router

router.js

import { createRouter, createWebHistory } from "vue-router"

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      name : 'main',
      path: "/",
      component: () => import("@/pages/MainPage.vue"),
      meta: {
        requiresAuth: true
      }
    },
  ],

})

router.beforeEach(async (to, from, next) => {
  next()
})

export default router

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from '@/js/router'

const app = createApp(App)
app.use(router).mount('#app')

App.vue

<template>
  <router-view />
</template>

src/pages/MainPage.vue

<script setup>
import { } from 'vue'

</script>

<template>
  <section id="main_page">
    ㅁ메인페이지
  </section>
</template>

<style scoped lang='scss'>

</style>

Vue.JS 공식문서 바로가기

보통 vue에서 높이값을 구할때는 this.$refs를 사용하면 간단하게 값을 구할 수 있습니다.

그런데 v-if로 내용을 새로 추가하게 되었을 때는 this.$refs를 사용하면 undefined로 반환합니다.

이럴 때 this.$nextTick(() => {})를 사용합니다.

this.$nextTick(() => {}) ?

Vue가 데이터 변경 후, DOM 업데이트를 마칠 때까지 기다리려면 데이터가 변경된 직후 this.$nextTick(콜백)을 사용할 수 있습니다.

콜백은 DOM이 업데이트 된 후에 호출됩니다.

.vue ( html )

<div class="list" v-if="list">
    // '제목입니다'의 height값을 구하기 위한 내용입니다.
    <div id="list_title" class="list_title" ref="list_height">제목입니다.</div>
</div>

<button @click="btn()">리스트 보기</button>

.vue ( script )

methods: {
    btn() {
        this.list = true;
        this.$nextTick(() => {
            let height = this.$refs.list_height.clientHeight;
            
            let listHeight = document.getElementById("list_title");
            
            listHeight.style.height = `${height}px`;
        })
    }
}

예시 : dayjs 가져오기

dayjs.js

import dayjs  from 'dayjs'
import 'dayjs/locale/ko'
import relativeTime from 'dayjs/plugin/relativeTime'

dayjs.locale('ko')
dayjs.extend(relativeTime)

export default dayjs

main.js

import { createApp } from 'vue'
import App from './App.vue'
import dayjs from '@/assets/js/dayjs'


const app = createApp(App)

app.config.globalProperties.$dayjs = dayjs

app.mount('#app')

.vue

<script>
export default {
    data() {
        console.log(this.$dayjs(new Date()))
    }
}
</script>

Access to XMLHttpRequest at 'http://localhost:3000/memos' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

CORS오류 NodeJS에서 해결하는 방법 말고 Vue3에서는 proxy로 해결하는 방법이 있습니다.

해결방법

vue.config.js ( 없으면 생성해줍니다. 프로젝트 최상단 )

module.exports = {
  devServer: {
    proxy: {
      "/api": {
        target: "http://localhost:3000",
        changeOrigin: true
      }
    }
  }
}

vue

setup() {
    const url = '/api';
    
    axios.get(url + '/memos')
    .then(res => {
        console.log(res);
    })
}

Parsing error: No Babel config file detected for /Users/junhyeok/project/new/vue_crud/frontend/src/components/Main/MainComponent.vue. Either disable config file checking with requireConfigFile: false, or configure Babel so that it can find the config files

Vue3 파싱 오류입니다. eslint에서 인식하는 부분에서 나타나는 오류거나, 프로젝트 루트 디렉토리에 .eslintrc.json파일이 없으면 ESLint가 작업 디렉토리를 자동으로 찾지 못할 수 있다고 합니다.

해결방법

F1 -> setting -> 드래그 내용을 추가합니다.

"eslint.workingDirectories": [
    {"mode": "auto"}
],