기능은 정상적으로 실행이 되는데 콘솔창에 들어가보면 위와 같이 [Vue warn]이 발생하는 경우가 종종 있다.
오늘 Vue warn을 발견한 김에 지금까지 개발하면서 Vue warn 발생했던 경우를 정리해 보려고 한다.
기능상의 문제가 없어도 속도나 가독성, 원활한 유지보수 등을 위해 꼭 잡아줘야 한다.
1. 선언해 놓고 사용하지 않은 변수 또는 함수가 있는 경우
위에 예시로 올려 둔 사진이 1번 경우의 예시이다. 이런 경우에는 친절하게 어떤 변수나 함수가 사용되고 있지 않은지 알려주기 때문에 후다닥 달려가서 삭제 또는 주석처리를 해준다.
2. Sass파일에서 주석 처리된 속성이 중간 또는 아래 줄에 존재할 경우
위와 같은 경우에도 Vue warn이 발생한다.
이런 경우에는
주석 처리된 속성을 맨 위로 올려주면 Vue warn을 해결 할 수 있다.
3. Sass, Scss에서 justify-content: start; 또는 justify-content: end;를 사용한 경우
display: flex; 속성을 사용할 때 요소간의 가로축을 정렬하는 justify-content 속성을 쓰곤 하는데, Sass에서는 최상단 정렬이나 최하단 정렬로 start; 또는 end;를 사용하면 Vue warn이 발생한다.
justify-content: start; 는 justify-content: flex-start;로, justify-content: end;는 justify-content: flex-end;로 변경해주면 Vue warn을 해결할 수 있다.
justify-content: start; 와 justify-content: end; 를 사용하면 왜 Vue warn이 발생하는지는 더 알아봐야겠다!
나의 경우 위의 세가지 경우가 가장 많이 Vue warn으로 발견되었다.
앞으로 새로운 케이스가 나오면 추가할 예정이다.
