728x90 PROGRAMMING77 [Vue] Components Component (컴포넌트) 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화하는데 도움을 줌 CS에서는 다시 사용할 수 있는 범용성을 위해 개발된 소프트웨어 구성 요소를 의미 유지보수, 재사용성 up Vue 컴포넌트 === Vue 인스턴스 SFC (Singel File Component) Vue 컴포넌트 기반 개발의 핵심 특성 하나의 컴포넌트는 .vue 확장자를 가진 하나의 파일 안에서 작성되는 코드의 결과물 화면의 특정 영역에 대한 HTML, CSS, JavaScript 코드를 하나의 파일(.vue)에서 관리 Vue 컴포넌트 === Vue 인스턴스 === .vue 파일 Vue Component 구조 한 화면 안에서도 기능 별로 각기 다른 컴포넌트 존재 (하나의 컴포넌트는 여러 개의 하위.. 2021. 11. 20. [Vue] Vue CLI Vue CLI Vue.js 개발을 위한 표준 도구 프로젝트 구성을 도와주는 역할 Vue 개발 생태계에서 표준 tool 기준을 목표로 함 - Node.js JS를 브라우저가 아닌 환경에서도 구동할 수 있도록 하는 JS 런타임 환경 브라우저 밖을 벗어날 수 없던 JS언어의 한계 해결 Chrome V8 엔진을 제공하여 여러 OS 환경에서 실행할 수 있는 환경 제공 단순히 브라우저에서만 조작할 수 있던 JS를 SSR 아키텍처에서도 사용할 수 있도록 함 - NPM (Node Package Manage) JS언어를 위한 패키지 관리자 Node.js 설치 시 함께 설치됨 Vue CLI 사용하기 - 설치 # 설치 $ npm insatll -g @vue/cli # 버전 확인 $ vue --version - 프로젝트 생성.. 2021. 11. 20. [Vue] Lifecycle Hooks, lodash Lifecycle Hooks 각 vue 인스턴스를 생성될 때 일련의 초기화 단계를 거침 그 과정에서 사용자 정의 로직을 실행할 수 있는 Lifecycle Hooks 호출 특정 시점에서 동작을 수행할 경우 사용한다고 생각하자! ex) vue인스턴스가 생성되자마자 수행할 작업이라면? created 사용 lodash library array, object 등 자료구조를 다룰 때 사용하는 유틸리티 함수 제공 reverse, sortBy, range, random 등 2021. 11. 15. [Vue] Template Syntax Template Syntax 렌더링된 DOM를 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩할 수 있는 HTML 기반 템플릿 구문 사용 Interploation (보간법) - Text 메시지: {{ message }} - Raw HTML - Attributes - JS 표현식 {{ number + 1 }} {{ message.split('').reverse().join('') }} Directive (디렉티브) v- 접두사가 있는 특수 속성 속성 값은 단일 JS 표현식이 됨 표현식의 값이 변경될 때 반응적으로 DOM에 적용하는 역할 전달인자 (Arguments) : ':' (콜론)을 통해 전달인자 받을 수 있음 수식어 (Modifiers) : '.' (점)으로 표시되는 특수 접미사, directive.. 2021. 11. 15. 이전 1 2 3 4 5 6 7 ··· 20 다음 728x90
