Emma.log()

더보기 이 글은 doit vue.js 입문을 보고 그냥은 머리에 도저히 안들어와서 내용을 거의 옮겨적다시피 정리한 글이다... 이 글을 다시봐도 모르겠음 책 코드부분의 표시를 보면 그땐 이해가 잘될것같다. 컴포넌트 간 통신과 유효범위 앵귤러 1이나 백본과 같은 초기 자바스크립트 프레임워크에선 한 화면을 하나의view 로 간주했다. 따라서 한화면의 데이터를 해다 화면 영역 어디서든 호출할수 있었다. 하지만 뷰의경우 컴포넌트로 화면을 구성하므로, 같은 웹페이지라도 데이터를 공유할수가 없다. > 앞서 말했듯 컴포넌트 마다 자체적으로 고유한 유효범위(Scope)를 갖고있기 때문이다. 이는 뷰 프레임워크 내부적으로 정의된 특징이다. 따라서 각 컴포넌트의 유효범위가 독립적이기 때문에 다른 컴포넌트의 값을 직접적으로..

컴포넌트 컴포넌트란 조합해서 화면을 구성할수 있는 블록(화면의 특정 영역)을 의미한다. 컴포넌트를 활용하면 화면을 빠르게 구조화 하여 일괄적인 패턴으로 개발할수있다. 이렇게 화면의 영역을 컴포넌트로 쪼개서 재활용할수있는 형태로 관리하면 나중에 코드를다시 사용하기가 훨씬 편리하다. 또 모든 사람들이 정해진 방식으로 컴포넌트를 등록하고나 사용하게 되서 다른 사람들의 코드도 직관적으로 이해할수있다. 뷰에서는 웹화면을 구성할때 흔히 사용하는 네비게이션 바, 테이블, 리스트, 인풋박스 등과 같은 화면 구성요소들을 잘게 쪼개어 컴포넌트로 관리한다. 화면 전체를 header / content/ footer 로 분할하고 다시 content부분을 list1 과 list2 로 분할 했다. 이는 화면 전체를 3개의 컴포넌트..

뷰 인스턴스 뷰 인스턴스는 뷰로 화면을 개발하기 위해 필수적으로 생성해야하는 기본단위이다. Hello Vue.js 라는 index.html의 텍스트가 화면에 표시되는것도 인스턴스가 있어서가능하다. 인스턴스는 뷰로 화면을 개발하기 위해 빠질수 없는 필수조건이다. 뷰 인스턴스 생성 인스턴스 생성하기 위해서는 아래와 같은 형식으로 생성한다. new Vue({ ... }); {{message}} Hello Vue.js ! 를 화면에 표시하기 위해 new Vue()로 뷰 인스턴스를생성하였다. 그리고 인스턴스 안에 el 속성으로 뷰 인스턴스가 그려질 지점을지정한다. data속성에 message 값을 정의해서 div 태그 안의 {{message}} 에 연결한다. 뷰 인스턴스 생성자 new Vue()로 인스턴스를 생성..

프로젝트 생성하기 우선 vs 코드에서 작업할 소스들을 저장해둘 폴더를 생성한다. 나는 C:\vue\source 이렇게 경로를 지정했다. vs 코드에서 open folder로 소스코드들을 저장해둘 폴더를 열어준다. File > Open Folder 그럼 이렇게 왼쪽 explorer 아래에 지정한 폴더가 열려있는것을 볼수있다. 프로젝트 생성을 위해서 터미널 창을 열어준다. 터미널 창에 vue create [프로젝트명] 해도 되고 > vue ui 로 열어서 프로젝트를 생성해도 된다. 이때 터미널 창 앞에 경로가 내가 생성한 경로가 맞는지 확인한다. 참고로 프로젝트 이름에는 대문자알파벳이 들어갈수없다. 입력하면 vue 3 과 vue 2중에 선택하라고 나오는대 화살표 키를 이용해서 원하는 버전을 선택하면된다. 그..