📚 공부한 내용

Vue

Javascript 프레임워크 vue에 대해서 학습했다.
기존 Vanilla JS를 이용하여 여러 프로젝트를 만들면서 직접 구현해야 했던 내용들을 자체적으로 지원한다.

시작하기

• Vue.createApp({})
  입력값: 어플리케이션과 관련된 옵션들을 저장한 객체 리터럴
  반환값: 어플리케이션 인스턴스
  실행 결과 반환된 어플리케이션 인스턴스의 mount()메소드를 이용해서 DOM에 마운트할 수 있으며, ViewModel을 반환한다. mount()에는 자신이 마운트하고 싶은 html element의 선택자를 매개변수로 넣어 사용한다.

// 옵션 객체
const App = {
  data() {
    return {
      attr: "class",
    };
  },
};
// 어플리케이션 인스턴스
const app = Vue.createApp(App);
// ViewModel, id="app"인 html element에 마운트
const vm = app.mount("#app");

옵션 객체

위의 Vue.createApp({})의 입력인 옵션 객체는 이후 루트 컴포넌트 구성에 사용된다.

1. data

컴포넌트에서 사용할 데이터를 객체 리터럴로 선언한다. data안에 존재하는 값들은 반응형 데이터로 해당 값이 변경될 때 자동으로 DOM이 변경된다.
옵션 객체는 하나의 컴포넌트로 재사용이 가능하다. 만약 data를 일반 객체 리터럴로 작성한다면 객체는 참조형 데이터이기 때문에 다른 컴포넌트에서의 data값 변경이 영향을 미칠 수 있다. 따라서 객체를 return하는 함수로 작성해서 컴포넌트 생성시 서로 다른 주소를 가진 객체를 사용하도록 한다.

2. methods

컴포넌트에서 사용할 함수를 객체 리터럴로 선언한다.

3. watch

반응형 데이터가 변경되었을 때 수행할 동작들을 객체 리터럴로 선언한다.

• handler
  data가 변경되었을 때 수행할 동작이 담긴 함수. handler 함수 이외의값이 없다면 key-value쌍 대신 data와 동일한 이름을 가진 함수로 대체 가능하다.
  매개변수 지정시 첫번째 매게변수에는 변경된 새로운 값이, 두번째 매게변수에는 변경되기 전 기존 값이 입력되며 생략이 가능하다.

    // 아래 두 코드는 동일하게 동작함.
    // key-value 쌍
    name: {
      handler() {
        // data의 name이 변경시 실행되는 코드
      }
    }
    // 함수로 대체
    name() {
      // data의 name이 변경시 실행되는 코드
    }    

• deep
  Array, Object와 같은 참조형 데이터의 경우 참조하는 주소의 변경 없이 내부의 값만 변경된다면 동작하지 않는다. 이 경우는 deep값을 true로 설정해야 한다.
• immediate
  immediate가 true일 경우 값의 변경이 없어도 실행 즉시 핸들러가 동작한다. 기본값에도 동일한 처리가 필요할 경우 주로 사용한다.

// 아래와 같이 작성한다.
watch: {
  name(newName, oldName) {
    console.log('watch', newName, oldName);
  },
  fruits: {
    handler() {
      console.log(this.fruits);
    },
    deep: true,
    immediate: true
  }
},

4. computed

반응형 데이터를 이용해 새로운 값을 만들어 사용해야 할 때, 이 값을 효율적으로 사용하기 위한 옵션이다. 새롭게 만들어진 값은 캐싱되어 재사용시에 여러 동작을 생략할 수 있으며, 반응형 데이터가 변경된 경우에도 캐싱된 값을 갱신한다.
getter와 setter로 구성되며, getter만 사용시 아래와 같이 하나의 함수로 선언이 가능하다.

computed: {
  // 객체로 선언
  computedValueName: {
    get() {
      // data값을 가공
      return computedValue;
    }
  },
  // 함수로 선언
  computedValueName() {
    //data값을 가공
    return computedValue;
  }
}

템플릿 문법

1. 보간법

• Mustache 기법
  Mustache라 불리는 이중 중괄호 안에 반응형 데이터를 넣어 html안에 포함시킬 수 있으며 간단한 Javascript 표현식을 사용할 수 있다.

    <!--문자열 보간-->
    <h1>data: {{ data }}</h1>
    <!--Javascript 표현식-->
    <h2>{{ number * 2 }}</h2>
    <!--Javascript 표현식: 삼항 연산자-->
    <h3>{{ number % 2 === 1 ? 'yes' : 'no' }}</h3>

• v-html
  <h2 style="color: yellowgreen;"> Raw HTML</h2> 등과 같은 html 형식의 문자열은 v-html 디렉티브를 이용해서 html 요소로 출력시킬 수 있다. 하지만 XSS 공격에 취약하므로 v-html을 사용하는 부분에서는 유저의 입력이 관여해서는 안된다.

    <div v-html="rawHTML"></div>

    data() {
      return {
        rawHTML: '<h2 style="color: yellowgreen;"> Raw HTML</h2>'
      }
    }

2. 디렉티브

• v-show
  값이 truthy한 값인지 falsy한 값인지에 따라서 display 스타일 속성을 조정한다.
• v-if
  값이 truthy한 값인지 falsy한 값인지에 따라서 렌더링 여부를 정한다.

  v-show vs v-if
v-show의 경우 무조건 렌더링 이루어지고 display: none과 같이 스타일로 표시 여부를 지정한다. 따라서 초기 렌더링 비용이 v-if보다 큰 대신 변경시에는 추가적인 렌더링이 필요하지 않다.
  반대로 v-if의 경우는 표시하지 않는 요소는 렌더링하지 않아 초기 렌더링 비용이 적다. 하지만 변경시마다 렌더링이 필요하여 변경시 비용이 크다.
  즉, 변경이 잦은 경우 v-show를, 변경이 없는 경우 v-if를 사용하는 것이 좋다.

• v-bind
  html element의 attribute에 반응형 데이터를 적요할 때 사용한다. : 로 줄여서 사용이 가능하다.

	<!-- class attribute가 data의 className으로 적용된다. -->
	<div v-bind:class="className"></div>

	<!-- 약어로 ':'만 입력해도 동일하게 동작한다. -->
	<div :class="className"></div>

	<!-- attribute의 key값 또한 '[]'를 사용하여 동적으로 적용이 가능하다. -->
	<div v-bind:[keyName]="keyValue"></div>

• v-on
  이벤트를 처리하는 디렉티브, DOM 이벤트명과 함깨 사용하여 해당하는 이벤트 발생시 methods에 있는 함수를 동작하게 한다. @로 줄여서 사용이 가능하다.

    <!-- click 이벤트 발생 시, methods의 doSomething() 함수가 동작함. -->
    <button v-on:click="doSomething" />

    <!-- 약어인 '@'로 대체가 가능하며 위의 element와 동일하게 동작한다. -->
    <button @click="doSomething" />

---

Reference

1. 프로그래머스 프론트엔드 데브코스
2. Vue 3 가이드 https://v3.vuejs-korea.org/guide/introduction.html