[Vuejs] Node 버전 업데이트시 deprecated message
상황
Vuejs 프로젝트를 작성 중에 배포를 위해 node 프로젝트를Dockerizing 하는 내용을 검색하기 위해 알아보았습니다.
그러다가 Dockerhub for nodejs 를 들어가게 되었더니….
두둥!!
제가 쓰는 nodejs 버전이 없네요? (7.8.0)
그래서 이 참에 최신버전(당시 8.9.0)으로 nodejs를 올리기로 결정했습니다.
맥용 nodejs 는 이 사이트에서 다운로드 | Node.js 받으시고 그냥 덮어 쓰시면 됩니다.
저는 이상하게 크롬에서 자꾸 다운로드가 실패해서 wget 으로 받았습니다.
$ wget https://nodejs.org/dist/v8.9.0/node-v8.9.0.pkg
문제
설치 후에 vuejs 프로젝트에서 npm install을 실행하고 npm run dev를 실행했더니 deprecated 메시지를 발견 했습니다.
“scope” attribute for scoped slots have been deprecated and replaced by "slot-scope"
몰랐는데 이건 또 뭐지? 싶어서 찾아봤더니
Vue 2.5 Scope attribute deprecated replaced by slot-scope · Issue #283 · ratiw/vuetable-2 · GitHub
이런 글이 있네요.
해결
원인은 scope 라는 키워드를 slot-scope 로 바꿔써 써야하는 것이었습니다.
보다 디테일한 내용은
https://kr.vuejs.org/v2/guide/components.html#범위를-가지는-슬롯\
여기서 확인가능합니다.
문서를 보면 위 github의 내용과는 조금 다르게 태그가 더이상 필요없습니다. 그냥 아무 태그나 가져다쓰면 됩니다.
전 이런 형태를, 이렇게 변경 했습니다. css 를 사용하다 보면 만나게 되는 단위인 위와 같이 설정을 한다면 이제 아래 내용을 봅시다. 이제 그럼 div 테그 안의 font-size를 고정하고 싶을 경우에는 어떻게 해야할까요? 바로 둘 차이를 JSFiddle 을 통해 손쉽게 확인 가능합니다.
Strings must use singlequote
관련해서 찾아보니 위 내용을 참고 해서 프로젝트 ROOT 폴더의 .eslintrc.js 파일에 해당 줄을 추가해줬습니다. .eslintrc.js 근데 이렇게 하니 반대의 에러가???
Strings must use doublequote
관련 문서 – Rule quotes – ESLint – Pluggable JavaScript linter 를 찾아보니 둘다. (Single and double quote) 되게는 못하는듯? lint를 사용하지 말아야하나….. 그리하여 결국, 관련 샘플 코드는 하단 참고하시면 됩니다. 라이브러리 변경 후 해결한 뒤, 또다른 라이브러리를 사용하려다 보니 같은 문제가 발생 했습니다. 혹시 필요하신 분이 있으실 까 해서 적어둡니다. In .eslintrc file 위의 내용을 요즘 마이크로 서비스가 대세입니다. 현재 시스템은 간단한 이때 Web app 에서 ajax를 이용해서 REST API 를 호출하면 Browser console window 에서 이런 에러를 만나게 됩니다. 보안 상의 이유로, 브라우저들은 스크립트 내에서 초기화되는 간단합니다. 만약 특정 도메인만 허용하고 싶다면, 이런 형태로 사용하시면 됩니다. 요즘 HTML5 History 모드 · vue-router Vuejs history mode를 테스트 해보기 위해서는 서버 설정이 필요한데, 그냥 express와 vue를 이용한 개발 환경 구성 살펴보기 – Vue.js 한국 사용자 모임 이 페이지를 참고하여 구성해보았습니다. 관심 있으신 분은 GitHub – 9to6/vue-router-express: Vuejs + Vue-router + express 여기 소스 및 REAMDE를 참고 해주세요. 만들어 놓고 보니 backend 와 연동하기 위해 vuejs를 컴파일해서 index.html을 얻어내야하는 불편함이… 이제 <template scope="props">
<div class="table-button-container pull-right">
...
</div>
</template>
<div slot-scope="props" class="table-button-container pull-right">
...
</div>
css 단위 rem, em
css 단위 rem, em
rem 과 em 에 대해 정리합니다.em
em 은 현재 font-size를 정의합니다.body {
font-size: 14px;
}
div {
font-size: 1.5em; // 14px * 1.5 = 21px
}
body안의 폰트는 모두 14px 정의 될 것입니다.
그런데 만약 div 안의 font-size 값은 어떨게 될까요?
정답: 21px<body>
<div>
A <!-- 14 * 1.5 = 21px -->
<div>
B <!-- 21 * 1.5 = 31.5px -->
<div>
C <!-- 31.5 * 1.5 = 47.25px -->
</div>
</div>
</div>
</body>
em은 이해가 된 듯 합니다.rem
rem 단위를 사용하면 됩니다. rem 에서 r 은 최상위(root)의 의미를 지니고 있습니다.body {
font-size: 14px;
}
div {
font-size: 1.5rem; // 14px * 1.5 = 21px
}
Strings must use singlequote 에러
Strings must use singlequote 에러
Prerequisite
문제점
Vuejs를 사용하면서 라이브러리를 사용하고 싶을 때가 생깁니다.
제 경우는 table 관련 라이브러리를 원해서 찾아보던 중,
GitHub – vuejs/awesome-vue: A curated list of awesome things related to Vue.js) 이 곳에서 본 vuetiful-datatable 을 사용하려고 코드에 적용해서 테스트를 해봤는데 이러한 에러가 발생했습니다.원인
eslint에서 quote 를 하나로 강제하는데, 제 프로젝트(vue-cli를 이용해 만든 webpack template)는 single quote를 사용하는데 반해 vue-datatable 의 코드는 double quote를 사용하고 있어서 였습니다.해결
"quotes": [2, "double", { "avoidEscape": false }],
'rules': {
// allow paren-less arrow functions
'arrow-parens': 0,
// allow async-await
'generator-star-spacing': 0,
"quotes": [2, "double", { "avoidEscape": false }],
// allow debugger during development
'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
}
해결은 어이없게 한것이….
라이브러리를 변경했습니다….
vue-datatable가 vuejs 1.x 지원인 듯한 관계로,
vue-data-tables – Vue2.0 DataTables, based on element-ui
위의 라이브러리로 변경 후에 테스트 모듈 작성 완료!
GitHub – 9to6/vue-data-tables-test추가
결국 quote error 를 무시하기로 결정!'quotes': ['off', 'single'],
rules에 추가하면 quote 를 무시하게 됩니다.크로스 도메인 이슈
서문
저는 요즘 Vuejs 를 이용한 Web app 을 만들려고 시도 중입니다.
이 웹앱을 마이크로 서비스로 만들려합니다. 이러한 경우에 만나는 문제가 바로 크로스 도메인 문제, CORS(Cross Origin Resource Sharing) 이슈입니다.환경
localhost:8080 에 떠있는 RESTful API Server 에. localhost:8082에 떠있는 Web App 에서 http 요청을 해서 데이터를 가져오는 형태입니다.문제점
SPA(Single Page Application) 어플을 만들 때, 이 웹 어플리케이션에 채워지는 데이터는 REST API 를 이용, 비동기 네트워크 통신으로 API 서버와 WEB APP의 서버가 다른 경우가 생깁니다.XMLHttpRequest cannot load http://localhost:8080/v1/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8082' is therefore not allowed access.
원인
cross-origin HTTP 요청을 제한하기 때문입니다.해결책
RESTful API서버의 RESPONSE HEADER 에 하나만 추가해주면 됩니다.Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: http://test.com, http://test2.com, …
Vuejs History mode 테스트 해보기
Vuejs History mode 테스트 해보기
Vuejs를 스터디 중입니다.
그래서 간단히 Vuejs 문서를 읽어 가면서 스터디 내용을 정리하던 중에 Vuejs history mode를 직접 테스트 해보고 싶어졌습니다.
읽어보다보니 history mode는 필수라고 생각 되었거든요.
위 문서 참조.
간단한 기본 껍데기만 만들어서 테스트 해보고 싶었으나(webpack 설정 없이..), node 알못 및 npm project settings 알못 인 관계로 간단한 서버(backend)위에 vuejs(frontend) 를 얻는 방법을 못찾아서 결국 포기…express 프로젝트에 vuejs를 연동하기로 마음 먹었습니다. (webpack을 이용해서)결론
물론 vuejs 코드만을 테스트 하려면 npm run dev로 가능하겠지만…history mode테스트도 해봤으니, 본격 vuejs를 이용한 프로젝트에 착수할 수 있으려나…