hyeoneee's blog

vue 에서 code Mirror를 쓰는 방법과

더나아가 MaxLength를 설정하는 방법을 알아보좌!

1. Code mirror 설치

npm install vue-codemirror --save

 그러면 package.json에 codemirror가 추가된걸 확인 할 수 있다.

2. main.js 에 선언

import Codemirror  from 'vue-codemirror';

Vue.use(Codemirror);

3. code mirror 컴포넌트 사용

<codemirror v-model="query" :options="options" ref="codeMirror" />

v-model에는 codemirror에 입력되는 값을 변수 선언한 뒤 넣어주고

다양한 모드와 옵션이 있는데 그건 부모 컴포넌트에서 options 로 선언해주고 props로 내려주면된다.

나같은 경우에는 query를 입력하는 창이라 관련되어서 옵션을 data에 선언해 주었다.

예)

                options: {
                    tabSize: 4,
                    styleActiveLine: true,
                    mode: 'text/x-sql',
                    lineNumbers: true,
                    line: true,
                    lineWrapping: true,
                    theme: 'default'
                },

더 다양한 옵션은 다음을 참고해보자

https://github.com/surmon-china/vue-codemirror#readme

4. max Length 설정하기

options에 따로 max Length 관련 지원이 없어서 직접 구현하였다.

먼저 기존 options에 maxLength라고 선언해준다.

                options: {
                    tabSize: 4,
                    styleActiveLine: true,
                    mode: 'text/x-sql',
                    lineNumbers: true,
                    line: true,
                    lineWrapping: true,
                    theme: 'default',
                    maxLength: 4000,
                },

그 뒤 , 다음 링크를 참고하여 구현 하였다.

https://github.com/codemirror/CodeMirror/issues/821

codemirror 소스를 보니 모든 event가 발생하면 emit 해주고 있었다.

        const allEvents = [
          'scroll',
          'changes',
          'beforeChange',
          'cursorActivity',
          'keyHandled',
          'inputRead',
          'electricInput',
          'beforeSelectionChange',
          'viewportChange',
          'swapDoc',
          'gutterClick',
          'gutterContextMenu',
          'focus',
          'blur',
          'refresh',
          'optionChange',
          'scrollCursorIntoView',
          'update'
        ]
        .concat(this.events)
        .concat(this.globalEvents)
        .filter(e => (!tmpEvents[e] && (tmpEvents[e] = true)))
        .forEach(event => {
          // 循环事件，并兼容 run-time 事件命名
          this.cminstance.on(event, (...args) => {
            // console.log('当有事件触发了', event, args)
            this.$emit(event, ...args) // EMIT !!!!
            const lowerCaseEvent = event.replace(/([A-Z])/g, '-$1').toLowerCase()
            if (lowerCaseEvent !== event) {
              this.$emit(lowerCaseEvent, ...args)
            }
          })
        })

그래서 부모 컴포넌트에서 codeMirror를 사용하는쪽에서 emit 하는 function을 받아주었다.

<codemirror v-model="query" :options="options" ref="codeMirror" @beforeChange="enforceMaxLength" />

 그리고 다음과 같이 더이상 입력되지 않도록 function 을 선언해주었다. 

            enforceMaxLength(cm, change) {
                let maxLength = cm.getOption('maxLength');
                if (maxLength) {
                    let str = change.text.join('\n');
                    let delta = str.length - (cm.indexFromPos(change.to) - cm.indexFromPos(change.from));
                    this.cmLength = cm.getValue().length + delta;
                    if (this.cmLength > maxLength) {
                        this.cmLength = maxLength;
                    }
                    delta = cm.getValue().length + delta - maxLength;
                    if (delta >= 0) {
                        str = str.substr(0, str.length - delta);
                        change.update(change.from, change.to, str.split('\n'));
                    }
                }
                return true;
            },

그리고 현재 length를 세어주기 위해 cmLength를 선언해주고 length를 넣어주었다. 

vue 개발을 하다가 data의 값이 잘 바꼈는데

컴포넌트 rerendering이 잘안돼서 그대로 이상한 값이 남아 있는 경우가 있었다.

그래서 찾아보니 좋은 stackOverFlow를 발견..

강제로 rerendering을 시켜주고 싶었다!

https://stackoverflow.com/questions/32106155/can-you-force-vue-js-to-reload-re-render

이중에 어떤 방법을 할까하다가

처음엔 당연히

this.$forceUpdate()를 쓰려고 했지만 잘안돼서.. 그치만 다시 찬찬히 읽어보니 방법이 생각났지만

여기 나온 방식중에서 가장 Best way라고 나온  key를 이용하는 방식을 써서 해결하였다.

그럼 forceUpdate와 Key를 이용해서 강제 rerendering하는 것을 알아보자 

(https://michaelnthiessen.com/force-re-render/ 다음을 해석하였습니다. 잘쓰여져있네여)

1. forceUpdate();

이것은 vue에서 공식적으로 제공해주는 방식이다. (https://vuejs.org/v2/api/#vm-forceUpdate)

보통은 Vue에서 data의 변화를 감지하는데 이것을 보통 reactive 하다고 말합니다. 

그런데 아시다시피 Vue의 reactivity 시스템은 모든 변화를 감지하지 못합니다..(언제그러는지는 정확하게 모르겠으나 개발하다보면 왕왕 있습니다..)

그래서 변화를 감지하지 못할때 강제 리렌더링을 해줍니다.

forceUpdate를 하기위해서는두가지 방법이 있는데 , Global하게 forceUpdate 하는 것과component 단위로 forceUpdate 하는방법

단순하게 생각해도 Global한 방식은 잘안쓸거 같군요..

// Globally
import Vue from 'vue';
Vue.forceUpdate();

// Using the component instance
export default {
  methods: {
    methodThatForcesUpdate() {
      // ...
      this.$forceUpdate();  // Notice we have to use a $ here
      // ...
    }
  }
}

2. key 이용

key를 이용 하려면 Vue에서 제공하는 key에 대해서 알아야 하는데

Vue에서 key는 각 특정 component에 특정 값을 매핑해 두는데 이게 key라고 볼 수 있다.

그래서, key가 동일하면 component가 변하지 않지만

key가 변하면 Vue는 예전 component 를 지우고 새로운 component를 만듭니다.

<template>
   <component-to-re-render :key="componentKey" />
</template>

<script>
 export default {
  data() {
    return {
      componentKey: 0,
    };
  },
  methods: {
    forceRerender() {
      this.componentKey += 1;  
    }
  }
 }
</script>

그래서 다음과같이 자식 component에 key를 props로 내려주고

forceRerender라는 method에 key값을 변경해주도록 해주면

강제 Rerendering이 필요할때 forceRerender() method를 호출해주면

Vue에서 이전 component 를 지우고 새 component를 그려줍니다.

저도 이방법으로 쓰레기값이 남아있는 문제를 해결하였습니다!

굳굳!

이번에 vue.js 개발을 많이 하게되면서

가장 헷갈리게 된 포인트가 이것이다

언제 computed를 쓰고, 언제 watch를 쓰지?

사실 두개다 얻어지는 결과값은 엇비슷하기 때문이다

그래서 이 고민을 많이 했다

그러면 더 이상 고민하지 않도록 정리보도록 하쟈 ㅎㅎ

예제도 쓰면 좋지만 ㅎㅎ vue 공식문서에 있는것을 보면 될듯 싶다.

1. computed : 반응형 getter

- 사용하기 편하고, 자동으로 값을 변경하고 캐싱해주는 반응형 getter

- 선언형 프로그래밍 방식

- 계산된 결과가 캐싱된다. computed 속성은 해당 속성이 종속된 대상이 변경될때만 함수를 실행한다

• 이는 method와 다른 점이다. method를 호추하면, 렌더링을 할 때마다, 항상 함수를 실행한다.

- computed는 computed에 새로운 프로퍼티를 추가해 주어야한다. data와 혼재에서 사용 불가

2. watch : 반응형 콜백

- 프로퍼티가 변경될 때, 지정한 콜백 함수가 실행 : 반응형 콜백

- data에 새로 프로퍼티를 추가 할 필요 없고, 명시된 프로퍼티를 감시할 것이다~를 표현해주면된다.

- vue 공식 문서에, computed와 watch 둘다 가능 한 것은 computed를 쓰라고 명시되어 있다.

• 선언형 프로그래밍이 명령형 프로그래밍보다 코드 반복 및 우수해서

3. 언제쓸까?

1) data 에 할당 된 값들 사이의 종속관계를 자동으로 세팅 : computed

2) 프로퍼티 변경시점에 action이 필요할때 (api call , router ...) : watch

3) computed는 종속관계가 복잡할 수록 재계산시점을 알 수 없어서 종속관계의 값을 리턴하는것 이외에는 코드 지양

4) computed와 watch 둘다 가능 한 것은 computed

5) data의 실시간/빈번한 update가 필요한것은 watch,  한번 렌더링 되었을때만 update되면 되는것은 computed

 좀 애매할 수도 있지만 실제로 개발하면서 느꼈던 것이다.

여러 컴포넌트들 사이의 부모-자식관계가 있는데 이와중에 받은 props를 또 자식에서 변경하거나, 하는 요건이 많은데

페이지를 처음 렌더링 할때 1번만 해당 data를 update하면 된다면 compted를

계속해서 다른 컴포넌트 사이의 정보가 업데이트 되면서 해당 정보가 현재 달라졌는지? 실시간으로 보아야한다면 watch를 써 주었다.

6) computed는 이미 정의된 계산식에 따라 결과값을 반환할때,

  watch는 특정한 어똔조건에서 함수를 실행시키기 위한 트리거로 사용 가능

참고

kr.vuejs.org/v2/guide/computed.html

medium.com/@jeongwooahn/vue-js-watch%EC%99%80-computed-%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%99%80-%EC%82%AC%EC%9A%A9%EB%B2%95-e2edce37ec34

Front end Framework 3개중 고민하는 사람이 많을 것으로 생각한다.

예전에는 Angular가 대세였지만 요새는 React와 Vue 중에서 고민을 하는거같다

그래서 세개를 다양한 관점에서 비교해 봤다.

해당 사이트를 요약해서 표로 만들어 봤다 

(https://hackernoon.com/angular-vs-react-vs-vue-which-is-the-best-choice-for-2019-16ce0deb3847)

결론은,

Vue and React offers better performance and flexibility than Angular.

Vue and react are more suited for light-weight applications and angular is the best for large UI applications.

Angular is highly opinionated and unlike Vue and React, it offers everything
from routing, templates to testing utilities in its package.

Vue is the most popular, loved and growing framework of Javascript.

개인적인 의견을 붙여보자면,

저는 vue만 해봤는데 ..

해당 사이트에서는 react가 learning curve가 제일 낮다고 했지만 내 생각엔 vue가 제일 낮은거 같다

react를 안해봤지만 vue를 상당히 쉽게 배웠기 때문이다

react를 해보고 다시 리뷰해보자 ㅎㅎ '-'

react는 React Native가 있어 모바일앱을 구현하기 좋아서 모바일을 커버하고 싶다면 

react를 선택하는것도 좋을거 같다

그럼이만

뿅