개발 이야기/VueJS 3

컴포넌트 생명주기

VueJS는 컴포넌트 기반의 프레임워크다. 화면 속 보이는 랜더 영역이나 특정 기능들을 컴포넌트 단위로 나누어 개발하게 되고 이를 화면에 넣었다 뺏다, 업데이트하면서 동작한다. 그리고 이러한 컴포넌트는 Template과 Script로 구성된다. (원한다면 Style 포함 가능. Template 제외 가능) 당연하게도 이러한 이유로 Template는 어떠한 마크업 태그 안에 들어 있어야 한다. 위와 같은 동작을 하다 보니, 컴포넌트들은 필연적으로 생명주기를 가지게 되는데 이를 잘 알아두어야 개발할 때 편하다. VueJS 공식 문서에서 제공하는 생명주기 다이어그램은 다음과 같다. 1. beforeCreate 가장 먼저 실행되는 훅이다. this.$el로 대변되는 DOM이 아직 생성되지 않았기에 접근할 수는 ..

2. VueJS 와 기본 구성.

1. VueJS는 무엇인가? VueJS는 프레임워크다. 프레임워크는 라이브러리와 다르다. 개발구조의 껍대기, 뼈대, 밑바닥 원한다면 전체 구성을 담당한다. 쉽게 말해서 개발의 틀을 마련해준다. (필요에 의한 탄생이 해당 프레임워크의 방법론이다.) 틀이기에 강제하기도 하고 답답하게 느껴지기도 한다. 그렇다면 어떤 틀인가? 컴포넌트라는 틀이다. 우리는 VueJS를 이용해 재사용 가능한 컴포넌트를 설계하고, 조립해 나가면서 개발해 나갈 것이다. 2. VueJS의 장점은 무엇인가? 1. View 는 Vue에게 돔 생성과 업데이트에 관한 업무는 해당 분야의 프로인 Vue에게 맡기자. 우리는 비지니스 로직에 집중하면 된다. React처럼 특정 랜더 시점에 개입하지 않아도 된다. 전적으로 믿어주자. Vue는 가볍고 ..

1. Vue 시작.

VueJS 에 관심이 가는 개발자들은 다음 부류중 하나의 사람일 것이다.1. 컴포넌트 방식의 개발 패러다임이 필요한 프론트엔드 개발자.2. 컴파일과 빌드 시스템이 필요한 SPA 개발자.3. 일단 핫한걸 좋아하는 사람. 프론트엔드 개발자라면 모두가 생각은 했지만 만들지는 못(않)했던 VueJS를 같이 탐험해보려 한다.일단 https://kr.vuejs.org/ 에 기본적인 Vue의 개념이나 사용법이 자세히 나와 있지만 개인적으로 프로젝트를 하면서 얻고 체험한 내용과 함께 써보려 한다.그럼 다같이 고고싱 ; )