vue

"CSS만으로 매우 간단하게" 특정 숫자가 입력되었을 때, 숫자가 증가하고 감소하는 count component를 구현해보고자 한다. 완성 결과는 아래와 같을 것이다. 숫자 변화 하는 효과 (Count up, Count down) 구현 이번 포스트의 주요사항은 CSS의 conuter의 사용법이지만, 이를 조금 더 편리하게 사용하기 위해 나는 vue3를 이용하기로 했다. vue를 이용하지 않는 방법에 대해서도 마지막에 간단히 정리하고자 하니 잘 따라 와주면 좋겠다. 만약 JS변수를 바로 CSS에서 사용하는 방법에 대해 모른다면 이전 포스트를 참고하자. 1. 숫자 변하는 효과 - html, js 우선, Count라는 컴포넌트를 아래와 같이 만들었다. 매우 간단한 컴포넌트지만, 만들 때 범용성을 위해 고려한 ..

매번 Vue Project 생성 할 때 마다 발생하는 multi-word 컴포넌트 네이밍 에러를 해결하는 방법을 정리해보자. 원인 원인은 당연하게도 Component 네이밍을 하나의 단어로 했기 때문이다. 해결책 해결책은 공식 홈페이지에 나와있다. 참고링크: https://eslint.vuejs.org/rules/multi-word-component-names.html vue/multi-word-component-names | eslint-plugin-vue eslint.vuejs.org 공식 홈페이지에서는 ignores에 배열로 내가 원하는 컴포넌트 네임을 하나씩 넣어주라고 한다. package.json 파일에 eslintConfig 부분을 수정해주면 되는데, 아래코드는 Streaming.vue라는 컴..

분명 경로가 잘 설정 되어 있음에도 사진처럼 에러가 떴다. 정확한 에러 메시지는 아래와 같았다. An import path cannot end with a '.ts' extension. Consider importing '../utils/useMouse.js' instead. 해결방법은 간단했다.(참조링크) import할 때 ts를 빼고 import를 하니 정상적으로 작동하였다.