[펌] VueJS 로 개발하면서 겪은 삽질들

출처 : [VueJS] VueJS 로 개발하면서 겪은 삽질들

[VueJS] VueJS로 개발하면서 겪은 삽질들

위 링크가 본문이며 퍼온글입니다.

현재 VueJS + Vuex + Nuxt 로 학습 & 개발하고 있다.
우선 api 만 보면서 열심히 학습하면서 삽질을 하고 있는데, api 내용에 정확히 명시되지 않아서 고생했던(?) 것들을 남겨본다.

1. api에 용어는 한글이 아닌 영어 그대로 명시했으면 좋겠다.

(번역하신 분께 테클은 아닙니다)

computed: 계산된,
watch: 감시자,
method: 메소드
computed: set () {}

=> 계산된 setter 계산된은 도대체 무엇이며 watch는 왜 감시자에서 감시된으로 바뀌어 표기되는 것인가..

2. 띄어쓰기, 콤마, 세미콜론, camelCase등 에서 틀리면 에러가 발생해서 코드가 실행이 안된다. warning이 아니라 에러다. 처음에 왜 실행이 안되는지 헤매다가 터미털 보고 깜짝 놀랐다.

3. component에서 헬퍼를 이용해서 state, getters, mutations, actions를 가져올 때, 위치 꼭 지켜야 한다. mapState와 mapGetters는 computed 안에 들어가야 되고, mapMutations와 mapActions는 methods안에서 있어야 한다.

this.~~~ 이렇게 호출은 created든 mounted든 어디서든 불러서 쓸 수는 있다. 처음에 어디에 두든 상관 없는 줄 알고 여기저기 막 옮겼는데, getter로 넘어오는 값을 보면 undefined거나 혹은 recursive object다.

4. package.json에 host, port 수정할 때, “dev”: “port=x.x.x.x nuxt” 보다는 configuration을 따로 명시하기를 권한다. 이유는 제대로 작동 안하는 환경이 있다.

5. 다수의 모듈로 store 가 구성되어 있는 환경에서 다른 store에 있는 내용을 가져와 mutations을 실행하고 싶을 때, 어떻게 해야 할까?

• component의 script안에서 getters(혹은 mapState)를 이용하여 다른 store의 값을 받아서 mutation의 인자로 전달
• action의 3번째 인자인 rootState를 이용하여, mutation을 commit할 때 인자로 전달한다.

6. 크롬 개발자 모드에서 vue devtools 를 사용하면 console에 아래와 같은 메세지가 나온다.

[Vue warn]: Error in mounted hook: “TypeError: Cannot read property ‘_modulesNamespaceMap’ of undefined

정확한 이유를 모르겠으나, vue devtools 를 한번 사용하고 나면 탭을 새로 열어서 작업한다.
(2018.04) 이거 해결 되서 에러 안난다;;

7. memory leak 으로 터지면 그냥 dump 떠서 확인하자.

https://medium.com/@Dongmin_Jang/nuxt-analyze-memory-leaks-f9e2f9804206

[Nuxtjs] Analyze Memory leaks (not solved)