프로그래머스 데브코스 TIL - Day 37

 

✅ 오늘의 학습

📌 Vue (4)

 

- 컴포넌트 기초

- Parcel SFC 프로젝트 구성

- Webpack SFC 프로젝트 구성

- ESlint 설정

 

 

 

하위 컴포넌트의 이벤트 수신하기

 

props는 외부에서 들어오는 데이터이기 때문에 readonly이다.
그래서 데이터를 수정하려면 데이터가 들어오는 외부에서 변경을 해주어야 한다.

<div id="app">
  <upper-name
    v-for="fruit in fruits"
    :name="fruit.name"
    :key="fruit.id"
    @to-upper="toUpper(fruit, $event)"
  ></upper-name>
  <!-- fruit의 정보를 수정하기 위해 fruit 데이터를 첫 번째 인자로 전달 -->
  <!-- 커스텀 이벤트에서 $event 객체는 $emit에서 두 번째 인자로 올려준 데이터 -->
</div>

 

 const App = {
    data() {
      return {
        fruits: [
          { id: 1, name: "apple" },
          { id: 2, name: "orange" },
          { id: 3, name: "banana" },
        ],
      };
    },
    methods: {
      toUpper(fruit, upperText) {
        fruit.name = upperText;
        // 받은 fruit 데이터를 대문자로 변경한 데이터로 수정해준다
      },
    },
  };

  const app = Vue.createApp(App);
  app.component("upper-name", {
    props: ["name"],
    template: `<div @click="capitalize"> {{ name }}</div>`,
    methods: {
      capitalize() {
        this.$emit("to-upper", this.name.toUpperCase());
        // 데이터를 컴포넌트 바깥으로 올려준다.
      },
    },
  });
  const vm = app.mount("#app");

 

 

단순하게 생각하면 하위 컴포넌트에서는 상위에서 props로 내려준 데이터를 수정할 수 없고

하위 컴포넌트 내부에서 emit 커스텀 이벤트를 통해 상위에 전달을 해주고

상위에서 그 이벤트를 받으면 상위에서 작성해놓은 이벤트를 실행시켜서 데이터를 변경하는 방식인 듯 하다.

 

여기서 헷갈렸던 개념은

커스텀 이벤트의 경우 $event객체가 $emit의 두번째 인자의 값이라는 점과

클릭한 fruit의 데이터를 전달할 때 상위의 fruit 데이터를 보낸다는 점이다.

 

 

 

vue 환경설정

 

정리를 하다 내용이 길어져서 포스팅을 따로 했다.

 

Vue SFC 환경설정 - Parcel

Vue SFC 환경설정 - Webpack

 

이전에 Webpack 설정을 해보고 싶었는데 강의에서 다루어 주셔서 감사했다.

절차가 좀 많기는 했지만 어떤 기능을 위해 설치를 하고 적용을 하는지 잘 설명해주셔서

개념들을 좀 알게 되어 도움이 많이 되었다.

 

 

vue import

vue의 경우는 기본 내보내기로 만들어져있지 않고 이름을 가지는 내보내기를 가지고 있다.
이름을 가진 내보내기를 전부 Vue라는 이름으로 사용을 하기 위해 * as를 사용할 수 있다.

import * as Vue from 'vue';
import App from './App.vue';

Vue.create(App).mount('#app')

 

물론 아래와 같이 꺼내서 사용할 수도 있다.

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

createApp(App).mount('#app')

 

지역 컴포넌트 등록

App 컴포넌트에 Hello컴포넌트를 포함시키기

 

Hello.vue

<template>
  <h1>반가워</h1>
</template>

 

App.vue

<template>
  <h1>{{ msg }}</h1>
  <Hello />
</template>

<script>
import Hello from "./components/Hello.vue";

export default {
  components: {
    Hello,
  },
  data() {
    return {
      msg: "Hello~",
    };
  },
};
</script>

컴포넌트를 사용할 때 케밥케이스를 사용했었는데
webpack설정에서는 compiler-sfc 패키지를 통해서 파스칼케이스로도 작성이 가능하다.👍

 

 

 

프로젝트에 ESlint 설정하기

 

Vue 프로젝트에 ESlint 적용

 

ESlint의 존재는 알고 있었으나,

이전에는 vscode 내부에서 pritter를 사용하고 있어서

프로젝트 자체에 eslint를 적용을 해본 적은 없었다. 

이번 강의를 통해 규칙들을 꽤나 세부적으로 조정할 수 있다는 것을 알게 되었고

프로젝트 별로 규칙들을 지정해 볼 예정이다.

 

---

✍느낀 점

 

이번 강의는 이전에 궁금했었던 webpack설정과 ESlint설정에 관해서 다루었는데

강의를 듣고 나니 혼자서 이것 저것 빌드 설정을 할 수 있을 것 같고

ESlint의 규칙들을 내 스타일에 맞게 추가도 해 볼 수 있을 것 같다.

이전엔 복잡하다고 느꼈던 것들이었지만 사용하는 이유들과 사용하는 방식들을 접하고 나니

생각보다 간단하다고 느끼게 되었고 꼭 알고 있어야 하는 개념들이라고 생각하게 되었다.