IT 잡동사니

오류

Vue에서 Swiper를 사용할 경우 인터넷 익스플로러에서 작동 안하며 콘솔에서 아래와 같이 에러 메시지를 볼 수있다.

"개체가 'isNaN' 속성이나 메서드를 지원하지 않습니다."

원인

IE에서는 ES6 문법에 속하는 isNan이나 entries를 사용할 수 없다.

해결

vue.config.js 파일의 transpileDependencies에 dom7, swiper를 추가해준다.

아래 2개 링크는 참고한 사이트다.

github.com/surmon-china/vue-awesome-swiper/issues/665

sjquant.tistory.com/38

nodejs에서 vue를 사용할때 대부분의 예시나 튜토리얼은 꽤나 복잡하게 다뤘다.

특히 데이터를 넘길때 기존 express에서 render를 사용하여 데이터를 넘기는 것처럼 넘기지 않고 무조건 ajax와 비슷한 axios를 사용하여 데이터를 주고 받는 것을 보면서 불편함을 느꼈다.

않이;; 나는 그냥 데이터 최초로 넘겨주기만 할껀데 굳이 내가 axios를 써야하나?

render처럼 데이터를 초기에 넘겨주는 방식은 없나?

찾아보니 express-vue라는 npm이 있었다.

방식은 ejs에서 render를 통하여 데이터를 넘겨주는 방식과 비슷하다.

(ejs 렌더링 코드)

그냥 설명서에 나와있는대로 코드를 썼더니 

"Error: render function or template not defined in component: anonymous". 오류가 나면서 안된다.

해결방법을 찾으려고 했는데 정확한 원인도 모르고 해결방법도 별로 안나와있었다.

느낌상 템플릿쪽에서 나는 문제고 템플릿이 선언이 안되어 있어서 그런 것 같았다.

포기하려다가 express-vue 프로젝트의 example / starter라는 항목을 발견했다.(진작 발견했으면 편했을텐데...)

https://github.com/express-vue/express-vue-mvc-starter

express-vue의 프로젝트를 사용하는 방법에 대해서 알 수 있는 샘플 프로젝트이다.

프로젝트에서 app폴더 내에 main.vue를 까보면 아래와 같다.

나도 저렇게하면 되겠지? 하고 가져다가 썼다.

일단 페이지는 저런식으로 나와버리고 콘솔에서도 "Unexpected token export"라는 오류가 발생했다.

먼가 느낌상 코드상의 문제는 아니라고 생각이 들었다.

main.vue쪽에서 export부분이 es6용 코드를 es5에서 가져다가 써서 생긴 문제라고 생각이 들었다.

그래서 아래의 export 부분을 es5코드로 바꾸었다.

이후 잘 된다.

아무래도 불편하기도 하고 es6로 빨리 업그레이드를 해야할 것 같다.

서버단에서 이런 데이터들이 모여져있는곳에서 데이터를 정렬한다던가 데이터를 수정할때 미쳤다고 JQuery나 자바스크립트를 사용할 수 없다고 생각이 들었다.

언젠가는 Vue, React, Angular(얘는 좀 오바)를 사용해서 관리자 페이지를 구성해야겠다고 생각하고 있었다.

C#도 공부해야하는데 흠...

이러다가 정말 잡부가 되는건 아닌지... 걱정은 들지만 저기서 사용하려는 Vue는 익혀두면 정말 도움이 많이 될 것같다.