재밌고 어려운 IT를 이해해보자~!
Vue.js의 구조 본문
Vue. js는 Java Script 기반의 프레임워크
일반적으로 js 프레임워크들은 - js에 대해서 어느정도는 이해를 해야만 사용할 수 있는 경우가 대부분이다. 그러나 Vue. js는 특이하게도, HTML 구조를 거의 그대로 사용할 수도 있도록 만들어졌다. 그래서 js를 많이 알지 못하더라도 기본적인 구조를 읽고, 쓰는 - 학습에 대한 내용이 상대적으로 쉬운 편이다. 물론 제대로 깊게 들어가려면 js에 대해서 기본적인 이해를 필요로하는건 마찬가지다.
HTML에 vue를 얹는 간단한 예제
<html>
<body>
<div id="example">
<p>{{ hello }}</p>
</div>
<script src="https://unpkg.com/vue"></script>
<script>
new Vue({
el: '#example',
data: { hello: 'Hello World!' }
})
</script>
</body>
</html>
요즘의 웹은 단순히 웹 페이지 가 아니라, 웹 애플리케이션이다.
어떠한 유저인터페이스를 동적으로 나타내기위해서는 정말 수많은 상태를 관리해줘야합니다.예를 들어서 다음과 같은 HTML 코드가 있다고 가정해봅시다.
우리가, 버튼을 눌러서 저 숫자 0 값을 바꿔주려면 각 DOM 엘리먼트에 대한 레퍼런스를 찾고, 해당 DOM 에 접근하여 원하는 작업을 해줘야한다.
프로젝트가 규모가 커지고, 정말 다양한 유저 인터페이스와 인터랙션을 제공하게 된다면, 그 많은 DOM 요소들을 직접 관리하고 코드 정리하는건 진짜 진짜 갈수록 힘든 일 일것입니다.
따라서 웹 개발을 하게 될 때, 귀찮은 DOM 관리와 상태값 업데이트 관리를 최소화하고, 오직 기능 개발, 그리고 사용자 인터페이스를 구현하는 것에 집중 할 수 있도록 하기위해서 정말 여러 라이브러리들 혹은 프레임워크들이 만들어졌습니다.
Virtual Dom이란 ?
Vue.js를 이용하려면 면 Virtual DOM (이하 V-Dom)에 대한 이해가 꼭 필요하다.
DOM 구조를 하나하나 체크하고 변경하는 방식이 너무 복잡해서, 이걸 단순화 / 자동화 시키려고 만든게 V-Dom이었다. 기능 하나를 바꾸려고 하더라도 - 해당 컴포넌트의 어느 위치에, 다시 어디로 들어가서 - 무슨 기능을 바꿔야할지를. 하나하나 써줘야했고, 그 결과 렌더링 속도도 느려진다. 게다가 코드를 쓰는 개발자가 바라보기에도 직관성이 많이 떨어졌다.
기존의 DOM 방식은 친구를 불러오려고해도. 얘가 어느 나라, 시, 구, 동, 거리와 건물이름, 아파트 호수까지 알아야만 친구를 불러올 수 있었다.
그래서 이걸 '주소록'처럼 간단히 정리하고, 친구가 어디에 사는지 알기 쉽게 만들어놓은것이 Virtual DOM이다.
Vue. js는 크게 3가지로 구성
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가 할일을 다 할 수 있도록 통로 역할을 하면서도 - 이곳으로 이동하시오 - 같은 '표지판 역할'도 한다.
Vuex는 V-Dom을 챙기는 매니저 역할
Vue를 쓰는 이유중 대표적인것이 바로 SPA (싱글 페이지 앱)을 만들 수 있기 때문이다. 말 그대로 웹페이지처럼 화면 새로고침을 통해 내용이 바뀌는게 아니라. 한 화면 내에서 모든 변화가 이뤄진다. js는 기본적으로 HTML 구조를 변경 / 변형하기 위한 언어이고. 데이터를 주고받을 수 있는 언어규격이기도하다. 그렇기에 이걸 기반으로 사용자에게 필요한 UI 컴포넌트 / 기능들을 불러와 재배치할 수 있다. 그 과정에서 화면 새로고침은 일어나지 않고, 깔끔하게 해당 위치만 새로 그려내는 - 정밀한 컨트롤이 가능해진다. 굉장히 눈여겨 보지않는 한, 이게 앱인지, 웹사이트인지 구분이 안 갈 정도인데. 이걸 가능하게하는 것이 바로 'Vuex'의 역할이다.
Vuex는 Vue에서 사용되는 컴포넌트들을 만들어내기 위한 명령어들을 담고있고. 실제 V-Dom들에게 영향을 줘서, 원하는 컴포넌트들을 만들어낸다. 사용자의 입장에서는 이때 화면이 나타나게되니, 당연히 추가적인 행동이 일어난다. 그러면 다시 백엔드와 통신하면서 필요한 내용을 불러와서 - 기존의 V-Dom들을 변형하는 - 반복적인 흐름이 만들어진다. 우리는 여기에서 Vuex가 Vue.js의 심장부같은 역할을 한다는 것을 알 수 있다. 또한 이런 기능이야말로 Vue.js같은 2세대 js 프레임워크가 등장한 본질적인 이유이기도하다. Dom좀 자동으로 / 편리하게 관리하기 위해
Vue CLI는 Vue 프로젝트를 만드는 간편설정 도우미
1세대의 js 기반 프레임워크들은 태생적으로 간단한 녀석이 아니었다. 그중 가장 악명높은 것이 바로 웹팩(Webpack) 세팅인데. 각자가 다 흩어져있는데다, 프로젝트 하나를 만들려고해도 여러 '소규모 단위의 기능'들을 연결해서 설치해야하다보니. 너무 복잡하고, 시간도 오래걸렸다. 그래서 그걸 해결하기 위해 나온 것이 Vue.js의 Vue CLI라는 녀석이다. Vue CLI는 Vue 기반 프로젝트를 만들 때. 하나하나 복잡한 웹팩 세팅을 - 클릭 몇번으로 간단하게 진행할 수 있도록 도와주는 '텍스트 기반의 인터페이스'다.
Vue CLI는 실시간으로 업데이트된 내용들을 실제 웹페이지에 그대로 반영해준다. 간단히 말하면 우리가 개발에 집중할 수 있도록, 환경을 만들어주고, 업데이트되는 내용 있으면 그때그때 화면에 반영해주는 - 든든한 지원자 역할을 해준다. 알기 쉽게 말하자면 - Vuex가 Dom들 돌보는 매니저 역할이라면, Vue CLI는 개발자인 우리를 돌봐주는 집사같은 역할이다.
Vue Router는 Vuex가 이동하는 통로 역할
SPA (싱글페이지 앱)을 만들려면 결국 Vuex를 꼭 사용해야하는데. '미리 만들어진 컴포넌트들'을 모아서 변경된 값을 체크하고. 업데이트하는게 Vuex의 역할이다. 그리고 여기에서 Vuex가 이동하기 위해, 통로를 만들어야한다. 그 목적으로 사용되는 것이 바로 Vue Router이고, Vuex와 Vue CLI에 비해서 규모나, 역할이 상대적으로 많이 작은 녀석이다.
Vue Router는 한번 만들어진 여러 컴포넌트들을 - Vuex가 여러곳에서 동시에 재배치 / 변형해 사용할 수 있도록 도와준다. 알기쉽게 생각하면 - 물건이 가득 담겨있는 창고에서 물건을 꺼낼수있게, '통로'를 열어준다고 생각하면 된다. 그 통로를 통해 맘대로 원하는 내용을 꺼내와서 사용하고. 동시에 각각의 컴포넌트들이 특정 동작을 했을 때 - 해당 내용을 업데이트해서 다른 화면의 컴포넌트들에게도 연결을 해준다. 사실상 Vue Router는 Vuex의 길잡이 역할을 한다고 볼 수 있다. Vuex가 각각의 컴포넌트들의 DOM을 관리하러 열나게 뛰어다닐때. 그걸 가능하게 해주는 통로이자, 표지판의 역할을 하는게 바로 Vue Router다.
vue-router와 라우트에 대한 내용(routes.js)을 가져오고, Vue에 vue-router를 사용할 것을 알려줍니다.
그리고 router 인스턴스를 만든 후 이 것을 실제 사용할 Vue에 넣어 인스턴스를 만듭니다.
프로젝트 생성 후 주요 파일 및 설정
- build/ : webpack 빌드 관련 설정이 모여 있는 디렉토리입니다.
- config/ : 프로젝트에서 사용되는 설정이 모여 있는 디렉토리입니다.
- dev.env.js : npm start 시 적용되는 설정입니다.
- prod.env.js : npm run build 로 배포 버전에 적용되는 설정입니다.
- dist/ : 배포버전의 Vue 어플리케이션 파일들이 모여 있는 디렉토리입니다. npm run build 명령어 실행시 생성됩니다.
- node_modules/ : npm으로 설치되는 서드파트 라이브러리들이 모여 있는 디렉토리입니다.
- src/ : 실제 대부분의 코딩이 이루어지는 디렉토리입니다.
- assets/ : 이미지 등.. 어플리케이션에서 사용되는 파일들이 모여 있는 디렉토리입니다.
- components/ : Vue 컴포넌트들이 모여 있는 디렉토리입니다.
- router/ : vue-router 설정을 하는 디렉토리입니다.
- App.vue : 가장 최상위 컴포넌트입니다.
- main.js : 가장 먼저 실행되는 javascript 파일입니다. Vue 인스턴스를 생성하는 역활을 합니다.
- index.html : 어플리케이션의 뼈대가 되는 html 파일입니다.
2. 실무에서 많이 사용하는 폴더 구조
*참조
https://brunch.co.kr/@clay1987/138
https://zooootil.tistory.com/15
