JavaScript (8) 썸네일형 리스트형 Vue.js 슬롯 (slot) 정리 Vue.js 컴포넌트는 기본적으로 시작 태그와 종료 태그 사이에 오는 컨텐츠(다른 컴포넌트, 요소, 텍스트 노드)를 무시하고 렌더링된다. 그러나 컴포넌트가 사용되는 상황에 따라 외부로부터 컨텐츠를 전달 받는 편이 컴포넌트를 재사용하기에 유리한 경우가 있다. 이렇게 외부로부터 컨텐츠를 전달받는 수단을 슬롯(slot) 이라고 한다. 모달 윈도우 컴포넌트를 예로 들어보자. 모달 윈도우의 내용은 해당 모달 윈도우가 사용되는 상황에 따라 달라진다. 단순히 텍스트로 된 내용만 표시하는 것이라면 속성을 통해 텍스트를 전달받기만 하면 될 수도 있다. 그러나 메시지에 강조 표시를 추가하고 싶다거나 메시지에 삽입된 URL을 링크로 만들어야 하는 경우 등이 있을 수 있다. 단순히 속성으로 값을 전달하는 것만으로는 이런 기능.. Vue Router :: Router 인스턴스와 Route 객체 비교 $router 객체와 $route 객체는 이름은 비슷하지만, 전혀 다른 것이기 때문에 주의가 필요하다. $router는 Router 인스턴스를 가리킨다. Router 인스턴스는 웹 애플리케이션 전체에서 딱 하나만 존재하는 것으로 전반적인 라우터 기능을 관리한다. 예를 들면 애플리케이션 전체에서 히스토리를 어떻게 관리할지에 대한 설정이나 router-link 요소 없이 프로그램적인 방법으로 페이지를 이동(this.$router.push())할 때 이 Router 인스턴스를 사용한다. 이와 달리 this.$route.params 등의 코드에 나오는 $route 는 Route 객체다. 페이지 이동 등으로 라우팅이 발생할 때마다 생성되며, 현재 활성화된 라우트의 상태를 저장한 객체이다. 즉, 현재의 경로 및 U.. npm, yarn 패키저와 package.json 파일 npm install, yarn add 명령어는 Node.js 패키지(라이브러리)를 설치할 수 있는 명령어이다. 설치 모드는 크게 4가지다. - npm install [패키지명1] [패키지명2] 이 명령어는 '로컬 모드'로 설치한다. 로컬 모드는 현재 디렉터리의 node_modules 디렉터리에 패키지를 설치하는 것이다. - npm install -g [패키지명1] [패키지명2] -g 옵션은 패키지를 전역(global)에 설치한다. 전역으로 설치한 패키지는 현재 컴퓨터 내의 모든 프로젝트에서 이용할 수 있다. - npm install --save [패키지명1] [패키지명2] --save 옵션은 로컬 모드와 유사하지만 현재 프로젝트의 package.json에 의존성(dependencies)으로 기록한다. .. VUE.JS의 EVENT 처리 HTML 문서에서 다이나믹한 UI는 요소에서 발생하는 이벤트 처리를 통해서 구현되는 경우가 많다. 예를 들어 키보드를 누를 때 발생하는 `keyup`, `keypress`, `keydown` 이벤트, 마우스를 클릭할 때 발생하는 `click`, `doubleclick` 이벤트, 마우스를 움직일 때 발생하는 `mousemove` 이벤트 등이 있는데, 다음 페이지에서 이런 이벤트 종류에 대해서 참고할 수 있다. https://developer.mozilla.org/ko/docs/Web/Events 이벤트 참조 DOM 이벤트는 발생한 흥미로운 것을 코드에 알리기 위해 전달됩니다. 각 이벤트는 Event 인터페이스를 기반으로한 객체에 의해 표현되며 발생한 것에 대한 부가적인 정보를 얻는데 사용되는 추가적인 커스.. ES6 (ECMAScript 2015) 변경사항 요약정리 let과 const ES2015가 등장하기 전까지는 변수를 선언하기 위해 var 키워드를 주로 사용했다. var 키워드는 이름이 같은 변수를 중복 선언해도 오류가 발생하지 않는다. 또한 블록 단위의 스코프를 지원하지 않는다. var 키워드는 함수 단위의 스코프만 지원한다. { }로 묶여진 블록 내에서 선언한 변수는 별도의 스코프를 만들지 않는다는 것을 의미한다. ES2015에서는 이러한 문제를 해결하기 위해 let 키워드를 지원한다. 블록 단위의 스코프도 해결했고, 변수의 중복 선언을 방지할 수 있다. const는 상수 기능을 제공한다. 즉 한 번 값이 주어지면 다시 변경할 수 없다. const 또한 블록 스코프를 제공한다. 기존 var 키워드는 중복 선언을 허용한다. 즉 아래 코드는 오류를 일으키지 않.. [Vue.js] 뷰 컴포넌트 컴포넌트란?컴포넌트(Component)란 조합하여 화면을 구성할 수 있는 블록을 의미한다. 컴포넌트를 활용하면 화면을 빠르게 구조화하여 일괄적인 패턴으로 개발 할 수 있으며, 코드를 쉽게 이해하고 재사용할 수 있다. 컴포넌트 등록하기컴포넌트를 등록하는 방법은 전역(Global)과 지역(Local)의 두 가지가 있다. 지역 컴포넌트는 특정 인스턴스에서만 유효하고, 전역 컴포넌트는 모든 범위의 여러 인스턴스에서 공통으로 사용할 수 있다. 전역 컴포넌트 등록전역컴포넌트는 뷰 라이브러리를 로딩하고 나면 접근 가능한 Vue 변수를 이용하여 등록한다. 전역 컴포넌트를 모든 인스턴스에 등록하려면 아래와 같은 형식으로 Vue 생성자에서 .component() 를 호출하여 수행하면 된다. Vue.component('컴포.. [Vue.js] 뷰 인스턴스 뷰 인스턴스의 정의와 속성뷰 인스턴스(Instance)는 뷰로 화면을 개발하기 위해 필수적으로 생성해야 하는 기본 단위이다. 뷰 인스턴스 생성 new Vue({ .. }); 뷰 인스턴스를 사용하기 위해 위 코드와 같은 형식으로 뷰 인스턴스를 생성한다. 아래 예제 코드에서 인스턴스와 관계된 부분을 다시 한 번 살펴보자. {{ message }} 먼저 ‘Hello Vue.js!’ 텍스트를 화면에 표시하기 위해 new Vue()로 뷰 인스턴스를 생성하였다. 그리고 인스턴스 안에 el속성으로 뷰 인스턴스가 그려질 지점을 지정하고, data 속성에 message 값을 정의하여 화면의 {{ message }}에 연결하였다. 그럼 각 요소에 대해 자세히 알아보자. 뷰 인스턴스 생성자new Vue()로 인스턴스를 생성.. [Vue.js] 뷰 템플릿 뷰 템플릿이란?뷰의 템플릿(Template)은 HTML, CSS 등의 마크업 속성과 뷰 인스턴스에서 정의한 데이터 및 로직들을 연결하여 사용자가 브라우저에서 볼 수 있는 형태의 HTML로 변환해 주는 속성이다. 템플릿 속성을 사용하는 방법은 두 가지로, 첫 번째는 ES5에서 뷰 인스턴스의 template 속성을 활용하는 방법이다. 예를 들어 template: Hello {{ message }}와 같은 코드가 템플릿을 의미한다. 여기서 템플릿 속성에 대해 한 가지 알아 둘 특징이 있다. 사용자가 볼 수는 없지만 라이브러리 내부적으로 template 속성에서 정의한 마크업 + 뷰 데이터를 가상 돔 기반의 render()함수로 변환한다. 두 번째는 싱글 파일 컴포넌트 체계의 코드를 활용하는 방법이다. Hell.. 이전 1 다음
