전체 글92 [Vue.js] Vue.js Style - CSS scoped vs CSS module SFC에서의 CSS Single File Component로 개발을 하면 생성한 .vue 파일에는 각각의 코드 블록에 HTML, JavaScript, CSS를 작성할 수 있다. 그중, CSS는 Style이라는 코드 블록에 작성을 한다. 각 .vue 파일은 여러 개의 style 태그를 포함할 수 있다. style 태그는 현재 컴포넌트에 스타일을 캡슐화하는 데 도움이 되도록 scoped 또는 module 속성을 가질 수 있다. 캡슐화를 통해 다른 컴포넌트들과의 중첩을 방지할 수 있다. 두 방법 모두 캡슐화를 할 수 있기 때문에 동일하게 느껴지지만 다른 점이 있다. 아래서는 이 차이점에 대해 알아보도록 하겠다. scoped style 태그에 scoped 속성을 추가함으로써 사용할 수 있다. 해당 CSS는 현재.. 2023. 5. 26. [Vue.js] Single File Component: SFC Single File Component 전역 컴포넌트는 Vue.component를 사용해 정의되고, 다음에 모든 페이지의 app 요소를 대상으로 하는 new Vue({el: '#app'})가 정의된다. 이 방법은 중소 규모 프로젝트에서는 유용하지만 복잡한 프로젝트나 프론트엔드가 JavaScript 기반인 경우에는 아래와 같은 단점이 생긴다. 전역 정의로 인해 모든 컴포넌트에 고유의 이름을 붙여야 함 문자열 템플릿 사용으로 html의 문법 강조가 되지 않음 HTML과 JavaScript가 컴포넌트로 모듈화 되어 있으나 css 스타일링 작업은 거의 불가 ES5를 이용하여 계속 앱을 작성할 경우 Babel 빌드가 지원되지 않음 SFC, Single File Component란 HTML과 유사한 문법을 사용하여.. 2023. 5. 25. [Vue.js] Vue Template (v-bind, v-on, v-if, v-show) Template 템플릿이란 Vue로 화면을 조작하기 위해 제공되는 문법이다. 크게 데이터 바인딩과 디렉티브 두 가지로 나눌 수 있다. Data Binding Vue 인스턴스에서 정의한 속성들을 화면에 표시하는 방법이다. 가장 기본적인 방식이며 콧수염 문법인 "{{ }}"을 활용하여 인스턴스의 data, computed, props 속성을 연결할 수 있다. 간단한 표현식 또한 표시할 수 있다. {{ str }} {{ number + 1 }} {{ message.split('').reverse().join('') }} Directive Directive는 Vue의 화면 요소를 더 쉽게 조작하기 위한 문법이다. 일반적으로 id, class 등 표준 속성을 제외하고 v- 접두사가 붙은 속성을 모두 일컫는다. 주.. 2023. 5. 25. [Vue.js] Vue (MVVM, Props와 Event, v-model) Vue란? Vue는 사용자 인터페이스를 구축하기 위한 JavaScript 프레임워크다. 표준 HTML, CSS, JavaScript를 기반으로 구축되며, 단순한 것부터 복잡한 것까지 사용자 인터페이스를 효율적으로 개발할 수 있는 컴포넌트 기반의 프로그래밍 모델을 제공한다. 선언적 렌더링과 반응성 Vue에는 표준 HTML을 템플릿 문법으로 확장하여 JavaScript 상태를 기반으로 선언적 렌더링을 할 수 있으며, JavaScript 상태 변경을 추적하고, DOM 요소에 연결되어 변경이 발생하면 DOM을 효율적으로 자동 업데이트 하는 반응성이라는 두 가지 핵심 기능이 있다. 이를 바탕으로 Vue는 접근하기 쉽고(Approachable), 변하기 쉬우며(Versatile), 효율적이며(Performant),.. 2023. 5. 24. [Vue.js] Vue의 Instance와 속성 Instance 인스턴스는 뷰로 개발할 때 필수로 생성해야 하는 코드이다. Vue를 설치한 후, new 키워드로 Vue 생성자 함수를 호출해 새로운 인스턴스를 만들 수 있다. new Vue( ... ); Vue의 정보를 객체 상태로 넘겨주기만 하면 앱을 생성할 수 있다! 인스턴스 내부에는 여러 속성이 올 수도 있는데 자주 사용하는 속성들에 대해서 나열하면 다음과 같다. new Vue({ el: 인스턴스가 그려지는 화면의 시작점 (특정 html 태그) components: 화면에 표시할 요소 data: 뷰의 반응성이 반영된 데이터 속성 computed: 계산된 데이터 속성 methods: 화면의 동작과 이벤트 로직을 제어하는 메소드 created: 뷰의 라이프 사이클과 관련된 속성 watch: data에서.. 2023. 5. 24. [Vue.js] Vue에서의 Virtual DOM DOM DOM이란 Document Object Model이라는 뜻으로 웹 페이지, 즉 HTML 문서를 계층적 구조와 정보로 표현하며, 이를 제어할 수 있는 프로퍼티와 메서드를 제공하는 트리 자료구조이다. HTML 파일을 받으면 문자열을 파싱해서 DOM 트리로 만든다. 이 DOM 트리와 CSS로 만든 CSSOM 트리를 결합하여 Render 트리를 만들고 레이아웃과 페인팅 작업을 하면 비로소 우리의 화면이 우리의 눈에 보이게 된다. Virtual DOM JavaScript의 경우, DOM을 조작할 때마다 트리를 수정하여 레이아웃을 다시 그리고 리페인팅을 해야 한다. 이 과정이 반복되게 되면 비용이 커지게 되고 충분히 무거워질 수 있는 작업이 된다. 이때 등장한 것이 바로 Virtual DOM이다. Virtu.. 2023. 5. 24. 이전 1 2 3 4 5 6 ··· 16 다음
