Programming/Vue60 뷰 컴포넌트 (Vue Component) 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! Vue.js 개발하기 전, Vue.js에 대한 기본적인 이론을 공부하고 정리한 내용입니다. Vue.js에 대한 이론을 잘 아시는 분들이라면 다음 단계를 진행하시면 됩니다. 뷰 컴포넌트 (Vue Component) 화면을 구성할 수 있는 블록단위의 특정 영역을 의미합니다. 즉, 컴포넌트를 조합하여 화면을 영역별로 구성할 수 있습니다. 뷰 컴포넌트는 트리 구조를 가지고 있습니다. 트리 구조: 각 노드별 부모-자식 관계가 생기는 구조 컴포넌트 종류 컴포넌트는 전역 컴포넌트와 지역 컴포넌트로 크게 두종류가 있습니다. 전역 컴포넌.. 2022. 11. 23. 뷰 인스턴스 (Vue Instance) 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! Vue.js 개발하기 전, Vue.js에 대한 기본적인 이론을 공부하고 정리한 내용입니다. Vue.js에 대한 이론을 잘 아시는 분들이라면 다음 단계를 진행하시면 됩니다. 뷰 인스턴스(Instance) 뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본 단위이며 필수 조건입니다. 형식 new Vue({ ... }); 옵션 속성 뷰 인스턴스 생성시 정의가 가능한 요소이자 속성을 의미합니다. 종류 el: 뷰로 만든 화면이 그려지는 시작점을 지정하는 속성 template: 화면에 표시할 HTML, CSS 등의.. 2022. 11. 22. 뷰(Vue)의 특징 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! Vue.js 개발하기 전, Vue.js에 대한 기본적인 이론을 공부하고 정리한 내용입니다. Vue.js에 대한 이론을 잘 아시는 분들이라면 다음 단계를 진행하시면 됩니다. Vue.js 란? 웹 페이지 화면을 개발하기 위한 프런트엔드 프레임워크이자 화면단 라이브러리입니다. 유사한 프레임워크로 리액트(React)와 앵귤러(Angular)가 있습니다. Vue.js(이하 '뷰')의 공식 사이트는 아래 링크를 참조해주세요. 공식 사이트: https://vuejs.org/ Vue.js의 특징 첫째, MVVM 패턴의 뷰 모델(View.. 2022. 11. 21. 뷰(.vue) 파일 구조 - 싱글 파일 컴포넌트 체계 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! Vue.js 개발하기에 앞서 Vue 파일의 구조를 먼저 살펴봅니다. 본 글에 대한 설명은 Vue 3를 기반으로 하였습니다. 뷰(.vue) 파일 뷰 파일은 "싱글 파일 컴포넌트(Single File Components) 체계"를 기반으로 하고 있습니다. 싱글 파일 컴포넌트 체계 뷰(.vue) 파일로 프로젝트 구조를 구성하는 방식 뷰(.vue) 파일 1개는 뷰 어플리케이션을 구성하는 1개의 컴포넌트와 동일 기본 구조 형식 설명 뷰(.vue) 파일은 크게 3개의 영역으로 구분하여 구현할 수 있습니다. (1): ... 화면에 표.. 2022. 11. 18. 뷰(Vue) 프로젝트(폴더, 디렉토리) 구조 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. 혹시라도 오입력된 정보가 있다면, 댓글 남겨주세요! Vue.js 개발하기에 앞서 Vue 프로젝트(폴더, 디렉터리)의 구조를 먼저 살펴봅니다. 본 글에 대한 설명은 Vue 3를 기반으로 하였습니다. Vue 프로젝트 기본 구조 Vue 프로젝트를 처음 생성하면, 아래와 같이 프로젝트 구조, 폴더/디렉터리 구조를 확인하실 수 있습니다. ▶ 구조 ▶ 설명 node_modules : npm으로 설치된 패키지, 모듈과 같은 3rd party 라이브러리가 모여있는 디렉터리 public : 정적 리소스 src : 실질적인 개발이 이루어지는 디렉터리 src/assets : 이미지, 폰트 등.. 2022. 11. 17. 뷰(Vue) 프로젝트에 Bootstrap 설치 후 적용이 안되는 문제 해결 방법 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. Vue 프로젝트에 Bootstrap 설치 후 스킨이 적용되지 않는 문제 상황 지난 글에서 "Vue 프로젝트에서 Bootstrap 연동하기"라는 글로 Vue 프로젝트에서 Bootstrap을 사용할 수 있도록 설치 및 연동, 마지막으로 테스트하는 작업까지 설명했습니다. 처음부터 깔끔하게 설치 및 정상 동작까지 완벽하게 됬으면 좋았겠지만, 설치 후 Bootstrap의 스킨들이 적용되지 않는 문제가 있었습니다. 콘솔창을 보니 아래와 같이 Warning message도 있더라구요. 원인 제가 생성한 Vue 프로젝트는 Vue3를 기본으로 하는 프로젝트이나 설치한 Bootstrap은 .. 2022. 11. 15. 뷰(Vue) 프로젝트에서 부트스트랩(Bootstrap) 연동하기 제목의 글을 설명하기에 앞서 정보전달의 목적도 있지만, 제가 잊지않기 위해서 공부 및 정리하며 쓰는 글이라는 사실을 미리 고지합니다. Vue.js 개발을 하는 도중, UI에 대해서 제가 신경쓰지 않아도 예쁘게 나왔으면 좋겠더라구요. 다들 많이 사용하는 Bootstrap을 연동하여 사용하기로 결정하였습니다. Bootstrap은 npm에서 설치할 수 있도록 지원한다고 하여 npm 명령어를 통해 설치 및 연동하였습니다. Bootstrap 설치 Bootstrap 설치시 주의해야할 사항이 있습니다. 첫번째, Vue 프로젝트의 최상위 디렉터리에서 작업해야 합니다. 두번째, Vue의 버전에 따라 설치해야할 Bootstrap의 버전도 달라지니 확인 후 설치해야 합니다. 명령어 Vue 3이 아닌 경우: npm insta.. 2022. 11. 14. 이전 1 ··· 5 6 7 8 9 다음
