Web

아톰 (7)

이벤트 버스(관계없는 컴포넌트 간 통신)

  • Note&pen
  • Vue.js
  • 2018. 4. 3. 21:42

이벤트 버스는 개발자가 지정한 2개의 컴포넌트 간에데이터를 주고받을 수 있는 방법이다.이전 포스팅에서 컴포넌트간 통신은 항상 상위-하위구조를 유지해야 데이터를 주고받을 수 있었다.이벤트 버스를 사용하면 이런 상위-하위 관계를유지하고 있지 않아도 데이터를 한 컴포넌트에서다른 컴포넌트로 전달할 수 있다. 먼저 아래 그림을 보자. 최하위에 있는 하위컴포넌트B에서 상위 컴포넌트A로데이터를 전달하려면 Vue에서 제시하는 기본적인컴포넌트 통신 방식을 생각해야한다.하위컴포넌트B 상위컴포넌트B 최상위컴포넌트를 거쳐서상위 컴포넌트A까지 가야한다. 하지만 웹이 커져컴포넌트가 많아지면 이런식의 데이터 전달 방식은 번거롭다.이럴 경우 이벤트버스를 사용하면 중간 컴포넌트들을 거치지 않고하위컴포넌트B 에서 바로 상위 컴포넌트A로..

더 읽기

하위에서 상위 컴포넌트로 이벤트 전달하기

  • Note&pen
  • Vue.js
  • 2018. 3. 30. 16:02

이전 포스팅에서 props에대해 알아보았다.props는 상위에서 하위 컴포넌트로 데이터를 전달 하는 방식이다. 이번엔 그 반대로 하위컴포넌트에서 상위 컴포넌트로의 통신에대해알아보자. 먼저 하위에서 상위로 통신을 하기위해선이벤트를 발생시켜 상위 컴포넌트에 신호를 보내는 방법이 있다.상위 컴포넌트에서 하위컴포넌트의 특정 이벤트가 발생하기를 기다리다가하위 컴포넌트에서 특정 이벤트가 발생되면 상위 컴포넌트에서해당 이벤트를 수신해서 상위 컴포넌트의 메소드를 호출하면 된다. 먼저 이벤트 발생과 수신은 $emit()과 v-on: 속성을 사용한다.각각의 형식은 아래와 같다. $emit()을 사용하게되면 괄호 안의 이벤트가 발생된다.(보통 $emit()을 호출하는 위치는 하위컴포넌트의 특정 메소드 내부)따라서 $emit..

더 읽기

뷰 컴포넌트간 통신(props)

  • Note&pen
  • Vue.js
  • 2018. 3. 30. 15:42

앵귤러1이나 백본과 같은 초창기 자바스크립트프레임워크에서는 한 화면을 한 개의 뷰로 정의했다.그래서 한 화면의 데이터를 해당 화면 영역 어디서든지호출할 수 있었다. 하지만 뷰의 경우 컴포넌트로 화면을구성해서 같은 웹 페이지라도 데이터를 공유할수 없었다.왜냐하면 컴포넌트마다 자체적으로 고유한 유효범위(scope)를갖기 때문이였다. 이는 뷰 프레임워크 내부에서 정의된 특징이다.따라서 각 컴포넌트의 유혀범위가 독립적이라 다른 컴포넌트의값을 직접 참조할수가 없다. 먼저 간단하게 예제를 보자. 1234567891011121314151617181920212223242526272829303132333435363738394041424344 Vue Component Scope // 첫 번째 컴포넌트 var cmp1 = ..

더 읽기

뷰 컴포넌트

  • Note&pen
  • Vue.js
  • 2018. 3. 30. 15:03

컴포넌트(Component)란 조합하여 화면을 구성할 수 있는블록(화면의 특정 영역)을 의미한다. 컴포넌트를 활용하면화면을 빠르게 구조화해서 일괄적인 패턴으로 개발을 할수있다.이렇게 화면의 영역을 컴포넌트로 쪼개서 활용할수 있는 형태로관리하면 나중에 코드를 다시 사용하기가 편하다. 또한 다른 사람들이정해진 방식대로 컴포넌트를 등록하거나 사용하게 되므로남이 작성한 코드를 직관적으로 이해할 수 있다. 먼저 간단하게 컴포넌트를 사용해보자컴포넌트를 등록하는 방법은 전역과 지역의 두가지가 있다.지역컴포넌트는 특정 인스턴스에서만 유효한 범위를 갖고전역컴포넌트는 여러 인스턴스에서 공통으로 사용할 수 있다.전역변수와 지역변수를 생각하면 이해가 쉬울것이다. 먼저 전역컴포넌트를 사용해보자.전역컴포넌트는 뷰 라이브러리는 로..

더 읽기

뷰 인스턴스

  • Note&pen
  • Vue.js
  • 2018. 3. 30. 14:30

뷰 인스턴스(Instance)는 뷰로 화면을 개발하기 위해 필수적으로생성해야 하는 기본 단위이다. 이전 포스팅에서'Hello Vue.js!' 텍스트가 화면에 표시된것은 인스턴스가 있었기때문에 가능했던 것이다. 이렇게 인스턴스는뷰로 화면을 개발하기 위한 필수 조건이다. 뷰 인스턴스를 사용하기 위해선 아래와같은 new Vue({ 의 형식으로 인스턴스를 생성한다.nnew Vue 안의 소스들을 보면el 안의 #app는 el 속성이라 부른다.다음 data:{ 안의 값을 data 속성이라 부른다. 먼저 이전 포스팅에서 작성했던 Index.html을 보면 Hello Vue.js!를 출력하기 위해 new Vue()로 뷰 인스턴스를 생성하고, 인스턴스 안에 el 속성으로 뷰 인스턴스가 그려질 지점을지정한다. 다음 dat..

더 읽기

Hello Vue.js! 프로젝트 생성하기

  • Note&pen
  • Vue.js
  • 2018. 3. 30. 14:13

저번 포스팅에서 Vue.js 사용을 위한 셋팅을 했다.이번엔 프로젝트를 생성후 Hello World! 의 Vue.js판인Hello Vue.js! 를 출력해 보겠다. 먼저 이전 포스팅에서 설치한 Atom을 실행한다.아마 실행 화면은 아래와 같을 것이다. 다음 아톰의 좌측 상단에서 File탭의 Open Folder를 들어가자 오픈 폴더에 들어간후 이전포스팅에서 다운받은 Node.js 폴더를 선택해준다. Node.js폴더 우클릭후 New File을 눌러 Index.html을 만들어준다. 다음 Index.html을 아래와 같이 만들어주자. 간단하게 코드 리뷰를 해보자면, html기본 구조에 태그를하나 추가하고, 뷰 라이브러리를 로딩한 후 뷰로 Hello Vue.js!라는간단한 메세지를 출력하는 코드이다. 뷰 인..

더 읽기

Vue.js 개발환경 셋팅하기

  • Note&pen
  • Vue.js
  • 2018. 3. 28. 17:34

먼저 Vue.js 를 쓰기위해 개발환경을 셋팅해야한다.먼저 크롬을 써야한다. 크롬 다운방법은 따로 설명하지 않겠다. 다음 아톰(Atom)이라는 텍스트 에디터를 설치해준다.아톰은 깃허브에서 제작한 무료 텍스트 에디터로 유료 개발 도구와비교했을 때 아톰은 일단 무료일 뿐만 아니라 확장 플러그인들을이용하여 유용한 기능들을 추가할 수 있기 때문에 기능 면에서도 우수하여유료 개발 도구에 뒤지지 않는다. 또한 깃허브에서 꾸준히 에디터의 성능을개선해 나가고 있기 때문에 믿고 사용할 수 있는 개발 도구이다. 먼저 구글에 atom을 검색하여 사이트에 들어간후다운 받을수 있다. 다음 아톰을 실행해보자. 먼저 아톰에서 File -> Settings 들어가서 테마를 다운받아보도록 하자 아래의 이미지에서 Install을 누른후..

더 읽기

Copyright © Web All Rights Reserved

Designed by JB FACTORY

티스토리툴바