[vue.js] vue에 대한 지식들

안녕하세요✌️

 

 

vue를 접하게 되면서 알게된 vue에 관한 잡다한 지식들을 정리해보려고 합니다😌

 

 

이렇게라도 정리를 안해둔다면 점점 까먹고 제 머릿속은 비어있을게 분명하기 때문.......

 

 

 

 

그렇기 때문에 여기에 vue에 관한 잡다한 지식은 차곡차곡 정리해두려고 해요!

 

 

▷ Vue.js 란 

: vue.js란 구글에서 일하던 직원 에반유의 의해 창시된 웹 페이지 화면을 개발하기 위한 프레임워크 (vue는 라이브러리이자 프레임워크라고 볼수있음)

 

 

▷ Vue.js의 특징

: 컴포넌트 기반 프레임워크

레고 블럭을 잘 조합해서 쌓고 조립하면 원하는 모형을 만들 수 있듯이 컴포넌트들을 모아서 화면을 만듦

 

 

▷ Vue.js의 라이프사이클

1) beforeCreate : 인스턴스가 가장 처음 실행되고 제일 첫 라이프사이클 단계 ( 돔과 같은 화면 요소에 접근 불가 )

2) created : data & methods 속성이 정의 된 단계 ( this.data 사용 가능한 단계, 단 template에 접근 불가 )

3) beforeMount : template에 지정한 마크업 속성을 el 속성에 지정한 화면 요소에 인스턴스를 부착하기 전 단계

4) mounted: template에 정의한 화면요소에 접근할 수 있는 단계

5) beforeUpdated : el 속성에서 지정한 화면 요소에 인스턴스가 부착되고 나면 인스턴스에서 정의한 속성들이 화면에 치환됨 ( 데이터가 변경되면 가상 돔으로 화면을 다시 그리기 전 단계 )

6) updated : 데이터가 변경되고 나서 가상 돔으로 다시 화면을 그리고 나면 실행되는 단계

7) beforeDestory : 뷰 인스턴스가 파괴되기 직전에 호출되는 단계 ( 아직 인스턴스에 접근 가능함 )

8) destroyed :  뷰 인스턴스가 파괴된 후의 단계 

 

 

 

▷ Vue.js의 컴포넌트

: 화면의 영역을 컴포넌트로 쪼개서 재활용할 수 있는 형태로 화면을 구성할 수 있는 하나의 블록

 

 

▷ Vue.js  - props

: 상위(부모) - 하위(자식)  컴포넌트간에 데이터를 전달하기 위해 쓰이는 속성임 

 

▷ npm & yarn

: npm은 node package management로 node를 설치할때 같이 설치되어짐

  npm으로 전세계 사람들이 다양한 패키지 다운로드 가능

  yarn은 페이스북에서 리액트 개발당시 npm의 취약점을 보완하여 개발함 (속도, 안정성)