Vue.js

vue를 사용하다 보면 위와 같은 코드가 있는데, name이라는 속성이 존재한다. 그런데 이 name은 있거나 없거나 상관이 없다. 그래서 이 속성을 어디에 쓰이는지 궁금해서 구글링해보았다. name속성의 명시 name 속성을 명시하는 것은 선택이나 두 가지 경우에는 꼭 명시해야만 한다. 컴포넌트 구조가 재귀적일 때 : 이말은 즉슨 재귀 컴포넌트를 말한다. 재귀 컴포넌트 : 템플릿에서 자기 자신을 호출하는 컴포넌트를 의미한다. name 속성이 없으면 컴포넌트를 재귀적으로 구성할 수 없다. Vue 개발자 도구를 사용할 때 좌 : name 속성에 "CustomComponent" 라는 값을 주었을 때 / 우 : name 속성을 명시하지 않았을 때 Vue 개발자 도구를 사용해 디버깅을 할 때는 컴포넌트의 nam..

1. 메타 컴포넌트 동적 컴포넌트를 랜더링하기 위해서 is prop에 의해 결정된다. 이를 메타 컴포넌트라고 한다. 1) 예제 2-1. 동적 컴포넌트 1) 컴포넌트 전환과 라이프 사이클 // About.vue I'm About Component // Home.vue I'm Home Component : 8 add home count → Home.vue와 About.vue는 create훅을 가져와 콘솔에 로그를 출력해준다. // App.vue Home; About → 그리고 App.vue에서는 위의 두개의 컴포넌트를 가져온다. 그리고 클릭시 로그가 출력된다. 저기서 component는 해당 컴포넌트에서 작성한 것이 보여지는 것이다. 2) 컴포넌트 전환 실행 결과 실행 결과 화면을 보면 상단의 Home, A..

Vue의 인스턴스나 컴포넌트가 생성될 때, 미리 사전에 정의된 몇 단계의 과정을 거치게 된다. 이를 **라이프사이클(lifecycle)**이라 한다. 즉, Vue 인스턴스가 생성된 후 우리 눈에 보여지고, 사라지기까지의 단계를 일컫는 말이다. 공식 문서에서 다이어그램을 제공한다. 이는 위의 그림이다. Vue 인스턴스는 크게 생성(create)되고, DOM에 부착(mount)되고, 업데이트(update)되며, 없어지는(destroy) 4가지 과정을 거치게 된다. 1. Creation 컴포넌트 초기화 creation hooks은 라이프사이클에서 가장 먼저 실행된다. 컴포넌트가 DOM에 추가되기 전에 수행하며, 서버 렌더링 중에도 실행된다. 클라이언트 렌더링 및 서버 렌더링 과정 모두에서 컴포넌트를 설정할 필..

Vue를 초기에 프로젝트를 생성하려고 보니 만져야 되는 설정이 많았다. 까먹을까봐 적어둔다. 1. formatter 설정 나는 에디터를 vscode를 쓰고 있기에 vscode맞춰 설명하겠다. 우선 왼쪽 하단에 보면 톱니바퀴가 있는데 이는 설정이므로 클릭해보면 위와 같은 메뉴가 나온다. 이에 설정을 눌러준다. 그리고 검색에 formatter라고 검색하면 저렇게 나오니 위와 같은 사진처럼 설정해준다. 그래야 코드가 알맞게 정렬되어 보기 쉽다. 2. eslint, prettier 설정 두번째로 eslint와 prettier인데,, 이는 다른 프로젝트와 조금씩 설정이 다르므로 각각 나에 맞게 설정해준다. 공식문서에도 이와 같은 설정이 자세히 나와있으니 참고하는 것을 추천한다. 3. Vue snippets 만들기..

버튼을 클릭시에 기능을 실행하는 경우를 글로 써볼려고 한다. js와 vue의 비교 {{products[0]}} 50만원 허위매물신고 신고수 : {신고수} 자바스크립트는 onclick="" 이라는 이벤트 핸들러를 HTML태그에 달았지만, Vue에서는 @click="" 이라고 사용한다. 이벤트 종류 @click : 마우스로 클릭했을 때 이벤트가 실행된다. @mouseover : 마우스를 갖다 댔을 때 자바스크립트를 실행가능하다. @input : 인풋에 값을 입력했을 때 자바스크립트를 실행가능하다. → 이것말고도 여러 가지가 가능하다. 이는 실행하고자 하기 전에 검색해서 사용하면 좋을듯하다. 함수 사용 methods : { increase(){ this.신고수 += 1 } } 이는 script구문에서 meth..

데이터바인딩 js와 Vue의 데이터바인딩 문법 1. javascript의 경우 document.getElementById().innerHTML = 데이터; 자바 스크립트는 위와 같이 넣을 데이터를 우변에 넣고 태그를 가져와서 좌변에 쓴다. 2. vue의 경우 vue는 데이터를 script안에 data안에 넣어준다. 그리고 html부분에 {{}}을 써서 데이터를 가져와서 사용한다. 데이터 바인딩을 하는 이유 정적 데이터가 아닌 이상 데이터는 계속적으로 변경된다. 그래서 데이터를 따로 저장해놓을 경우 수정이 편리해진다. js로 조작이 편리하다. Vue의 실시간 렌더링기능 쓰려면 데이터바인딩이 필요하다. Vue는 data가 변경되면 data와 관련된 HTML에 실시간으로 반영된다. html속성에 데이터바인딩 ..

우연한 글에 vue.js를 시작하게 되었다. 새로운 언어에 대해 배우고 싶고, 다른 언어는 어떻게 사용하는지 궁금하는 차였다. 그래서 vue.js를 검색해보았는데, 코딩애플에 무료강의 몇개가 있어서 듣게 되어 이렇게 글을 작성한다. node.js 설치 node.js는 내가 이전에 react를 사용하고 있어서 사용할 필요는 없지만, 환경이 다를 경우를 대비해 작성한다. node.js 홈페이지에 들어가면 여러가지 버전이 있는데 대표적으로 두개가 있다. 왼쪽은 안정화 버전, 오른쪽은 최신 버전이다. 나는 항상 안정화 버전을 사용해서 이를 설치한다. 이를 설치하는 이유는 npm을 사용하기 위해서인데, npm은 오픈소스 라이브러리를 패키지 형태로 바로 설치해서 사용할 수 있게 해주는 도구이다. 그리고 에디터가 없..