
오늘 회사동료가 재미있어 보이는 걸 하길래 한번 해보았다. Vue를 가지고 프로젝트를 하는데, 기존의 프로젝트는 Vue2의 인라인 템플릿을 활용하여 구축했었는데, Vue3를 이용해서 한다는 것, 그래서 인라인 템플릿을 사용 못하는 상황이라는데.. 공식 홈페이지에서 Vue를 cdn으로 가져오니 실제로 cdn을 통해 가져 온 Vue는 2.6.14버전이었다.. -- 수정 Vue 공식홈페이지에서는 안정화 되어 있는 2.6.14버전만 cdn으로 배포하는 것 같고.. Vue3 버전의 cdn을 가져오려면 아래 스크립트를 넣으면 될 것 같다. -- 가장 최신 버전의 Vue를 가져옴 2022.03.05 기준 3.2.31버전 -- Vue 3.1.1 버전 각설하고 바로 jsp환경에서 import, export를 해서 c..

간단히 설명하면 컴포넌트는 블록과 같이 생각하면 되고, 여러 곳에서 재활용하기 위해 만드는 것이다. 예를 들면 게시판의 검색기능이 있다고 하면, 검색기능은 이곳저곳에서 많이 쓴다. 그럴때마다 검색기능 코드를 쓰는 것보다 "검색기능" 이라는 컴포넌트를 만들어 놓고 각 게시판에 해당 컴포넌트는 넣기만 하면 되는 것이다. 그럼 바로 컴포넌트(전역)를 만들어 보자 ============================================================================ 1. 컴포넌트 생성 Vue.component('컴포넌트 이름', { //컴포넌트 내용 }); 자 이렇게 컴포넌트를 등록하였다. 로 감싸서 화면에 helloWorld!!!라는 문구를 찍어준다. template 속성은 ..