Vue. js의 3가지 핵심구조
Vue.js를 구성하는 Vuex, Vue CLI, Vue Rout
시작하는글
Vue.js는 2세대 자바스크립트 프레임워크들 중에서, 가장 손쉽게 배울 수 있는 기술이다. 그러나 웹개발을 충분히 경험해보지 않은 사람들에게는 여전히 어려울 수 있는 내용이다. 웹상에도 알기쉽게 전반적인 내용을 정리한곳이 없고, 그것도 생초보 개발자들에게는 너무나 난이도가 높은 자료들이 많다. 그래서 Vue. js를 본격적으로 공부하기에 앞서서, Vue. js가 어떤식으로 만들어졌고. 각 파트들은 어떤 역할을 하는지를 알아봤다. 그리고 그걸 다시 알기쉽게 정리하는 과정을 거쳐보려고한다.
자바스크립트 프레임워크에 대해 내용을 잘 알지 못하시는 분이라면 - 다음 게시글을 먼저 참조하세요.
https://brunch.co.kr/@clay1987/93
Vue.js에 대한 기본정리
Vue. js는 Java Script 기반의 프레임워크
기본적으로 Vue. js는 끝부분에 써있는 js에서도 알 수 있듯이. 자바스크립트 (이하 js) 기반으로 만들어진 웹 개발을 위한 2세대 프레임워크들 중에 하나다. 일반적으로 js 프레임워크들은 - js에 대해서 어느정도는 이해를 해야만 사용할 수 있는 경우가 대부분이다. 그러나 Vue. js는 특이하게도, HTML 구조를 거의 그대로 사용할 수도 있도록 만들어졌다. 그래서 js를 많이 알지 못하더라도 기본적인 구조를 읽고, 쓰는 - 학습에 대한 내용이 상대적으로 쉬운 편이다. 물론 제대로 깊게 들어가려면 js에 대해서 기본적인 이해를 필요로하는건 마찬가지다. 단지 React나 Angular같은 - 다른 js 프레임워크에 비해서 진입장벽이 낮을 뿐이다.
만약 프레임워크라는 것이 무엇인지 알지 못한다면 아래의 문서를 참조하자.
https://brunch.co.kr/@clay1987/92
Vue.js에 대한 기본정리
React에서 영향을 받은 Vue.js 프레임워크
자료를 찾아보더라도 자꾸만 Vue보다 React 얘기가 많이 나오길래. 좀더 확인을 해보니 - 실제 Vue.js는 React에서 많은 영향을 받았다고한다. 실제로 Vue.js의 공식 홈페이지에서도 - React를 언급하고있다.
VUE 공식 페이지 - 타 프레임워크와의 상대적 비교
https://kr.vuejs.org/v2/guide/comparison.html
- React에서는 모든 것이 JavaScript입니다. JSX를 통해서 HTML 구조가 들어와있을 뿐만 아니라 요즘에는 CSS 관리도 JavaScript에서 하는 추세죠. 이 접근 법도 나름대로 장점이 있습니다만 모든 개발자들에게 적합하다고 하기에는 단점이 좀 있습니다.
Vue. js가 어떤 방향성을 갖고 만들어졌는지를 추론해볼 수 있는 좋은 사례다. 모든걸 js 기반으로 처리하려하다보니, 자연스럽게 난이도가 올라가게됐고. 이런 방향성이 과연 정말 편리할까 - 라는 의문을 갖고 만들어진 것이 바로 Vue.js라는 것. 그렇다보니 실제 소스를 확인해보더라도 이런 내용들을 확인할 수 있다. V-Dom으로 변형된 명칭들을 제외하면, 기본적으로 HTML구조에 Vue를 얹는 방식으로도 사용이 가능하다. 이는 굳이 js를 많이 알지 않더라도, 기본적인 사용이 가능하고. 사용하면서 더 깊게 배워나갈 수 있도록 '낮은 진입문턱'을 제공하고있다는 이야기다.
HTML에 Vue를 얹는 간단한 방식HTML에 Vue를 얹는 간단한 예제
https://flaviocopes.com/vue-first-app/
여기에서, 다시 Vue.js의 공식 소개멘트중 일부를 확인해보자.
React와 Vue는 많은 공통점을 공유합니다.
- 가상 DOM을 활용합니다.
- 반응적이고 조합 가능한 컴포넌트를 제공합니다.
- 코어 라이브러리에만 집중하고 있고 라우팅 및 전역 상태를 관리하는 컴패니언 라이브러리가 있습니다.
너네가 누구냐고 묻는 말에, '우린 React랑 비슷해요'를 자꾸만 이야기하는 동문서답. 그래서 리액트의 구조나, 간단한 역사를 알아둘 필요가 있을듯해서 좀 자료를 찾아봤다.
리액트란 무엇인가에 대한 정리본
(본문 중 발췌)
요즘의 웹은요, 단순히 웹 페이지 가 아니라, 웹 애플리케이션이에요. 브라우저 상으로도 정말 자연스러운 흐름으로 매우 많은것들을 할 수가 있죠. 자, 그런데 어떠한 유저인터페이스를 동적으로 나타내기위해서는 정말 수많은 상태를 관리해줘야합니다.예를 들어서 다음과 같은 HTML 코드가 있다고 가정해봅시다.
우리가, 버튼을 눌러서 저 숫자 0 값을 바꿔주려면 각 DOM 엘리먼트에 대한 레퍼런스를 찾고, 해당 DOM 에 접근하여 원하는 작업을 해줘야하죠.
여러분의 프로젝트가 사용자와의 인터랙션이 별로 없다면, 사실상 프론트엔드 라이브러리는 필요하지 않습니다. 그냥 직접 구현하는 것도 나쁘지 않아요. 하지만! 프로젝트가 규모가 커지고, 정말 다양한 유저 인터페이스와 인터랙션을 제공하게 된다면, 그 많은 DOM 요소들을 직접 관리하고 코드 정리하는건 진짜 진짜 갈수록 힘든 일 일것입니다. 물론, 제대로된 컨벤션을 가지고, 여러 규칙을 세워서 진행을 한다면 불가능한 일은 아닙니다만, 여전히 번거로운 것은 사실입니다. 웹 개발을 하게 될 때, 귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화하고, 오직 기능 개발, 그리고 사용자 인터페이스를 구현하는 것에 집중 할 수 있도록 하기위해서 정말 여러 라이브러리들 혹은 프레임워크들이 만들어졌습니다. 대표적으로 Angular, Ember, Backbone, Vue, React 등이 있죠.
(중략)
간단히 말해서 '규모가 커져서 라이브러리를 직접 컨트롤하기가 어려워졌고. 그걸 해결하기 위해 등장한게 2세대 프레임워크들이란 이야기. 그리고 여기에서 등장한 것이 바로 V-Dom. 가상돔에 대한 내용이라는것.
Vue.js에 대한 기본정리
Virtual Dom은 대체 뭐야?
Vue.js를 이용하려면 면 Virtual DOM (이하 V-Dom)에 대한 이해가 꼭 필요하다. 그렇다면 V-Dom이란 무엇이고 또 왜 쓰는걸까? DOM 구조를 하나하나 체크하고 변경하는 방식이 너무 복잡해서, 이걸 단순화 / 자동화 시키려고 만든게 V-Dom이었다. 기능 하나를 바꾸려고 하더라도 - 해당 컴포넌트의 어느 위치에, 다시 어디로 들어가서 - 무슨 기능을 바꿔야할지를. 하나하나 써줘야했고, 그 결과 렌더링 속도도 느려진다. 게다가 코드를 쓰는 개발자가 바라보기에도 직관성이 많이 떨어졌다.
예를 들자면 기존의 DOM 방식은 친구를 불러오려고해도. 얘가 어느 나라, 시, 구, 동, 거리와 건물이름, 아파트 호수까지 알아야만 친구를 불러올 수 있었다. 한명만 해도 복잡한데, 웹사이트 하나를 만들려면 여러 내용을 동시에 다루고, 바꿔치기해야하니. 사람으로 치면 수십명의 친구의 집주소를 일일히 기억하고있어야한다는 얘기다. 그래서 이걸 '주소록'처럼 간단히 정리하고, 친구가 어디에 사는지 알기 쉽게 만들어놓은것이 Virtual DOM. 줄여서 V-Dom의 등장 이유라고 생각하면 되겠다. 실제로 V-Dom을 사용하면, 복잡한 세부 DOM 트리구조를 하나하나 적어주지 않아도 - 원하는 내용을 좀더 쉽게 찾을 수 있다. 또한 그 친구가 현재 집에 있는지, 외출했는지 - 상태값을 알아서 확인하고 내게 알려주니. 친구들과 함께 놀기도 훨씬 편리해졌다.
리액트 기반의 V-Dom에 대한 이야기
V-Dom 개념을 사용하는 것이, 대표적으로 2세대 js 프레임워크들이고. 그건 작업의 편의성을 위한 것이라는거. 그리고 이런 '편의성'이야말로 2세대 js 프레임워크가 등장한 가장 큰 이유라는것 까지만 알면 된다! 혹시라도 여기까지 정리했는데도 이해가 안되는 사람들을 위해서. 알기쉬운 영상을 준비했다.
리액트와 V-Dom에 대한 관계 (한글자막 있음)
https://www.youtube.com/watch?v=muc2ZF0QIO4
간단히 말해서, 하나하나 찾아서 그리기 힘든 View를 도와주기 위해. React가 변경된거 찾고, 업데이트하는 식의 자동화 업무를 해주고있다는 거. 이거까지만 이해하면 된다. 자, 이젠 Vue.js의 중요 구성원들에 대해서 알아보도록 하자.
Vue.js에 대한 기본정리
Vue. js는 크게 세가지 구성으로 나뉘어있다
Vue.js를 사용하기 위해서는 Vue 삼형제. Vuex와 Vue CLI, 그리고 Vue Router에 대해서 알아둘 필요가 있다. 일단 요걸 만든 개발자들은 기본적으로 React라는 프레임워크에서 많은 영감을 얻었고. 그보다 더 쉽고, 편리하고, 가벼운 형태의 프레임워크를 만들어내고자했다. 나중에도 이야기하겠지만, Vue는 React와 연관이 깊은 프레임워크다.
Vuex
Vuex는 가상 돔 (Virtual DOM)이라 불리는 녀석들을 관리하기 위한, 매니저 역할을 한다. 앱이나 웹을 이루는 개별 요소들의 정보가 변경되는지를 확인하고, 해당 값들을 업데이트시켜주는 역할을 한다. 간다히 말해서 내가 관리해야할 아이들의 집주소를 모두 외우고있지 않아도, 얘가 알아서 비서 역할을 해준다는 이야기다.
Vue CLI
Vue CLI는 Vue Command Line Interface의 약자로서. 프로젝트를 자동으로 생성 / 세팅해주는 자동화 역할을 한다. 웹개발에 사용되는 여러 기능들을 모아둔 웹팩 (Webpack)을 자동으로 모아, 간단하게 몇번의 클릭만으로 기본적인 세팅을 해주는 역할을 한다. NPM같은 패키지 매니저 역할을 한다고 생각하면 편한데, 실제로 Vue CLI는 NPM을 통해서 동작한다.
Vue Router
Vue Router는 개별적인 vuex가 돌아다니며 확인을 해야할 V-Dom들을 향해 이동할 통로의 역할을 한다. Vuex상에 개별 컴포넌트들을 올려놓고, 그걸 Router를 통해 간단히 끌어다가 다른 곳에서 반복적으로 사용할 수 있다. Vuex가 할일을 다 할 수 있도록 통로 역할을 하면서도 - 이곳으로 이동하시오 - 같은 '표지판 역할'도 한다고 보면 된다.
Vue.js의 세가지 핵심요소
Vuex는 V-Dom을 챙기는 매니저 역할을 한다
Vue를 쓰는 이유중 대표적인것이 바로 SPA (싱글 페이지 앱)을 만들 수 있기 때문이다. 말 그대로 웹페이지처럼 화면 새로고침을 통해 내용이 바뀌는게 아니라. 한 화면 내에서 모든 변화가 이뤄진다. 이게 무슨소리냐고? js는 기본적으로 HTML 구조를 변경 / 변형하기 위한 언어이고. 데이터를 주고받을 수 있는 언어규격이기도하다. 그렇기에 이걸 기반으로 사용자에게 필요한 UI 컴포넌트 / 기능들을 불러와 재배치할 수 있다. 그 과정에서 화면 새로고침은 일어나지 않고, 깔끔하게 해당 위치만 새로 그려내는 - 정밀한 컨트롤이 가능해진다. 굉장히 눈여겨 보지않는 한, 이게 앱인지, 웹사이트인지 구분이 안 갈 정도인데. 이걸 가능하게하는 것이 바로 'Vuex'의 역할이다.
Vuex는 Vue에서 사용되는 컴포넌트들을 만들어내기 위한 명령어들을 담고있고. 실제 V-Dom들에게 영향을 줘서, 원하는 컴포넌트들을 만들어낸다. 사용자의 입장에서는 이때 화면이 나타나게되니, 당연히 추가적인 행동이 일어난다. 그러면 다시 백엔드와 통신하면서 필요한 내용을 불러와서 - 기존의 V-Dom들을 변형하는 - 반복적인 흐름이 만들어진다. 우리는 여기에서 Vuex가 Vue.js의 심장부같은 역할을 한다는 것을 알 수 있다. 또한 이런 기능이야말로 Vue.js같은 2세대 js 프레임워크가 등장한 본질적인 이유이기도하다. Dom좀 자동으로 / 편리하게 관리하려고!
Vuex의 역할과 흐름에 대해서 잘 설명해둔 영상 (영어버전)
https://www.youtube.com/watch?v=_2_C9j-8CtM
간단하게 Vuex는 무조건 써야하는 거고. 얘를 '어떻게 잘 써야' 고생좀 덜 하고 몸이 좀 더 편해질지를 생각하면 편하다. 그럼 이번에는 Vue CLI에 대해서 알아보자.
Vue.js의 세가지 핵심요소
Vue CLI는 Vue 프로젝트를 만드는 간편설정 도우미
1세대의 js 기반 프레임워크들은 태생적으로 간단한 녀석이 아니었다. 그중 가장 악명높은 것이 바로 웹팩(Webpack) 세팅인데. 각자가 다 흩어져있는데다, 프로젝트 하나를 만들려고해도 여러 '소규모 단위의 기능'들을 연결해서 설치해야하다보니. 너무 복잡하고, 시간도 오래걸렸다. 그래서 그걸 해결하기 위해 나온 것이 Vue.js의 Vue CLI라는 녀석이다. Vue CLI는 Vue 기반 프로젝트를 만들 때. 하나하나 복잡한 웹팩 세팅을 - 클릭 몇번으로 간단하게 진행할 수 있도록 도와주는 '텍스트 기반의 인터페이스'다.
Vue CLI가 그냥 기능들만 모아서 설치해주는 역할이냐고 묻는다면 그런것만도 아니다. 실시간으로 업데이트된 내용들을 실제 웹페이지에 그대로 반영해준다. 간단히 말하면 우리가 개발에 집중할 수 있도록, 환경을 만들어주고, 업데이트되는 내용 있으면 그때그때 화면에 반영해주는 - 든든한 지원자 역할을 해준다. 알기 쉽게 말하자면 - Vuex가 Dom들 돌보는 매니저 역할이라면, Vue CLI는 개발자인 우리를 돌봐주는 집사같은 역할이다.
Vue CLI에 대해서 잘 정리되어있는 영상 (영어 버전)
https://www.youtube.com/watch?v=cP9bhEknW_g
필자는 기존에 Vue의 구조나, 기능에 대해서는 손톱만큼도 모르면서 - 무작정 Vue CLI를 NPM으로 설치 / 세팅하는 과정을 진행해본적이 있었다. 만약 본인이 IDE (통합 개발환경 / 개발용 에디터) 를 사용해본적이 없고, Vue CLI 설치도 잘 모르겠다면. 필자가 작성한 게시글을 한번 확인해보길 바란다.
자, Vuex와 Vue CLI까지 알아봤으니. 이제 남은건 Vue Router 뿐이다!
Vue.js의 세가지 핵심요소
Vue Router는 Vuex가 이동하는 통로 역할
SPA (싱글페이지 앱)을 만들려면 결국 Vuex를 꼭 사용해야하는데. '미리 만들어진 컴포넌트들'을 모아서 변경된 값을 체크하고. 업데이트하는게 Vuex의 역할이다. 그리고 여기에서 Vuex가 이동하기 위해, 통로를 만들어야한다. 그 목적으로 사용되는 것이 바로 Vue Router이고, Vuex와 Vue CLI에 비해서 규모나, 역할이 상대적으로 많이 작은 녀석이다.
Vue Router는 한번 만들어진 여러 컴포넌트들을 - Vuex가 여러곳에서 동시에 재배치 / 변형해 사용할 수 있도록 도와준다. 알기쉽게 생각하면 - 물건이 가득 담겨있는 창고에서 물건을 꺼낼수있게, '통로'를 열어준다고 생각하면 된다. 그 통로를 통해 맘대로 원하는 내용을 꺼내와서 사용하고. 동시에 각각의 컴포넌트들이 특정 동작을 했을 때 - 해당 내용을 업데이트해서 다른 화면의 컴포넌트들에게도 연결을 해준다. 사실상 Vue Router는 Vuex의 길잡이 역할을 한다고 볼 수 있다. Vuex가 각각의 컴포넌트들의 DOM을 관리하러 열나게 뛰어다닐때. 그걸 가능하게 해주는 통로이자, 표지판의 역할을 하는게 바로 Vue Router다.
Vue Router와 Vuex를 함께 사용하는 방법에 대한 글
http://vuejs.kr/update/2017/01/08/using-vue-with-vuex-vue-rotuer/
(본문중 발췌)
vue-router와 라우트에 대한 내용(routes.js)을 가져오고(4번, 6번), Vue에 vue-router를 사용할 것을 알려줍니다.(10번) 그리고 router 인스턴스를 만든 후(11번 ~ 15번) 이 것을 실제 사용할 Vue에 넣어 인스턴스를 만듭니다.(19번)
(중략)
위의 글에서도 이야기가 나오지만. Vue Router는 선언을 해주고 - 어디에 길을 뚫을지를 지정해주면 되는 간단한 방식이다.
마무리
자, 여기까지 Vue. js에 대한 내용을 알아보았다. Vue.js가 어떤 이유에서 만들어졌고. 또 어떤 핵심 요소들로 이뤄져있는지. 각자의 역할은 무엇인지를 알아보는 과정까지, 꽤 많은 시간이 걸린 것 같다. 필자도 계속 개발을 배워나가는 입장이다보니, 이런 '정보정리'의 과정이 꼭 필요한 상황이다. 추후에는 js 관련된 내용 중에서 ES 5, 6와 ES Lint, 그리고 자바스크립트의 실제 사용사례에 대해서 알아보도록 하겠다.
이 내용은 UI 디자인 연구소 - 단톡방에 올려진 자료를 정리하여 만들어진 컨텐츠입니다.
저희 단톡방은 잡담이 불가능한 방입니다. 단톡방에 들어오시려는 분은 - 이용안내문을 꼭 확인해주세요!
단톡방 이용안내
https://brunch.co.kr/@clay1987/113
