Vue 독학공부 1일차

본의 아니게 다음 행선지가 뷰로 개발하는 곳으로 이동하기 때문에 뷰를 조금씩 보고 있다. 항상 스탠바이라고 말은 하지만 막상 또 시작하면 잘 생각이 안날수 있는 부분이 많아서 공부를 위해서 유데미 강의를 결재해서 정리하고 있다. 뷰는 참 특이한 놈이다. 투바인딩도 아닌데 투바인딩처럼 작동하는 것 같다. 변경된 부분만 작동하는게 참 독특하다.

1. 뷰만에 바인딩 기법
- v-on:input 같은 예약어를 사용하면 input에 이벤트를 걸 수 있다. input 같은경우에는 함수명()를 쓰지 않고 '함수명' 만으로 on을 걸어야 하는데 기본적으로 인자가 숨어있어 함수명($event) == 함수명 이건 같은 의미이다. 만약 인자가 두개라면 명시적으로 함수명($event, 1) 이런식으로 넘기면 된다. 참 독특하다. 이벤트 리스너를 거는 방법은 또 다른 방식이 있다. 좀더 편하게...
- @input 이렇게 골뱅이를 쓰면 좀더 간편하게 걸 수 있다. 어떤걸 쓰느냐 결정하는 것은 팀내에서 협의를 통해서 합일점을 찾아야 겠다. 공통표준을 정하는 것이 일관성있게 통일감 있게 보이기 때문에 반드시 필요한 룰이며 약속인 것 같다.

2. 바인딩 변수를 화면에 다이나믹하게 보여줄때 어떻게 해야 하나?
보통 뷰나 리액트 같은 프레임워크를 사용하면 자바스크립트로 선언한 변수를 html에 쉽게 노출이 가능한다. 뷰는 특수하게 괄호 두개를 넣고 변수명을 넣으면 다이나믹한 값을 노출할 수 있다. 여기서 다이나믹 이게란 말은 자바스크립트에서 값을 불러다 쓸수도 있고 편집도 가능하며 그 값을 그대로 html 태그쪽에 노출 할 수 있다는 뜻이다. 예시는 {{ name }} 이런식으로 말이다. 물론 스크립트에서는 간단한 설정이 필요 하다. 

3. 뷰를 함수형으로 설정한데 어떻게 초반에 셋팅할까? 
보통 함수형으로 뷰를 개발하고 싶다면 export default 으로 시작하면 된다. 클래스 같은 객체방식으로 할꺼면 당연히 class 으로 선언해서 사용하면 된다. 대규모 프로젝트에서는 보통 typescript를 많이 사용하는 편인데 여기는 자바스립크로 일단 보고 있다 타입스크립트로 가면 인터페이스나 타입을 선언해서 만드는 경우가 많고 코드가 불필요하게 길어지는 단점도 생겨서 뭐가 더 나은지는 해봐야 될 것 같다. 내 짧은 생각으론 조직이 작으면 JS으로 조직이 크면 TS으로 가는게 포퍼먼스가 났던것 같다. 

export default {
  name: "HomeView",
  components: {
    TheWelcome,
  },
  methods: {
    sayHello2() {
      const random = Math.random();
      if (random > 0.5) {
        return this.random1;
      } else {
        return this.random2;
      }
    },
    add() {
      this.counter++;
    },
    remove() {
      this.counter--;
    },
    // userId를 아래 함수를 통해서 변경한다. event는 input로 받은 값이고, lastName은 두번째 인자로 넘어오는 값이다.
    // 태그에서 특별한 예약어 $event 를 기억해야 한다.
    // 다시 모두 그리는게 아닌 변경된 부분만 다시 그린다.
    setUserId(event, lastName) {
      this.userId = event.target.value + lastName;
    },
  },
  data() {
    // 이벤트는 v-on 또는 @ 으로 설정 가능하다.
    return {
      random1: "Hello", // methods에서 this.random1로 접근 가능
      random2: "<h1>hi</h1>",
      title: "Home",
      vueLink: "https://naver.com",
      counter: 0,
      userId: "",
    };
  },
};

 

지금까지 강의를 보면서 정리하는 내용은 이정도 이해했고, 앞으로 좀더 모르는 내용들이 나올 것 같아. 흥분되고 기대된다. 결과보다는 과정을 사랑하고 즐기는 사람이 앞으로도 오래 더 살아 남는다고 하는데... 과정을 즐기자 라고 항상 애기하면서 외쳐봐야 겠다.