Vue.js 스터디 - 1) 기본 설정 및 반복문

출처 : Vue.js 스터디 - 1) 기본 설정 및 반.. : 네이버블로그 (naver.com)

React.js, Node.js 등 javascript 기반으로 페이지를 꾸밀수 있는 프레임워크 중 Vue.js 라는 프레임워크가 있다.

​

Vue.js에 관한 내용을 얼마나 스터디를 지속할지는 확실치 않지만, 어느정도 스터디를 진행하는 동안 블로그에 공부한 내용들을 정리할 겸 다시 되새겨보고자 한다.

MVVM 패턴

https://ko.wikipedia.org/wiki/%EB%AA%A8%EB%8D%B8-%EB%B7%B0-%EB%B7%B0%EB%AA%A8%EB%8D%B8

​

Vue.js는 MVVM 패턴을 사용하고 있다.

​

MVVM 패턴은 Backend 로직과 Client의 마크업 & 데이터 표현단을 분리하기 위한 MVC 패턴 방식에서 기인된 방식으로, Model의 값들을 ViewModel에 넣어 로직을 수행한 결과값을 View를 통해 유저에게 보여주는 패턴이다.

​

- 구성요소

​

모델 : 실제 데이터가 있는 곳.

뷰 : 사용자들이 보는 화면, 사용자들이 뷰와 상호작용을 할 수 있음.

뷰 모델 : 뷰 모델에 있는 뷰에 연결된 속성과 뷰 사이의 통신을 자동화. 뷰 모델은 모델에 있는 데이터의 상태.

바인더 : 뷰와 뷰 모델사이의 동기화를 위해 상용구 로직을 작성해야 하는 개발자의 의무를 대신함.

​

비판 : UI 작업에 있어 MVVM 패턴은 구현하는 사람의 부담이 지나치게 과하다. 응용프로그램이 점점 커짐에 따라 뷰 모델을 폭 넓게 사용하기가 어려워지고, 아주 큰 응용프로그램에서 데이터 바인딩을 사용하게 되면 눈에 띄게 메모리를 소모하게 된다. - MVVM 제작자 존 구스만

기본 사용 방법

React.js를 사용할 때와 같이 Node.js 설치 후 npm 명령어를 통해 Vue.js를 설치 후 사용할 수 있으며, 또한 웹에 올라와 있는 Vue.js 스크립트 소스를 불러와 html 파일로 바로 Vue.js를 동작시킬수 있다.

​

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> New Vue({ }); </script>

Vue.js 를 동작시킬 때는 위와 같은 방식으로 동작시키게 된다.

Script 태그 사이에 작성한 Vue.js 명령어를 html의 다른 태그에서 불러와 보여주면 Vue.js를 통한 웹페이지 구현이 완료된다.

​

개인적으로 Vue.js에 관한 기초 설명은 다음 링크의 글이 쉽게 잘 설명되어 있다고 생각한다.

https://joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/

반복문 사용

Vue.js의 for문은 이해하기는 어렵지 않은데, 사용하기에는 귀찮은 느낌이 있다.

​

일반적으로 다른 언어들에서 쉽게 볼 수 있는

for(int i = 1 ; i <= 10 ; i++){ console.log(i); }

위와 같은 구조가 아닌,

<div id ="app"> <div v-for="index in number"> <div>{{index}}</div> </div> </div> <script> new Vue({ el:"#app", data:{ number: 10, }, }); </script>

로 표현된다.

​

​

이에 대한 결과는 html을 인터넷 브라우저로 열어보면 확인 가능하다.

​

v-for 반복문 사용은 다음 방법을 따라하면 가능하다.

​

1. div의 id와 el 값을 일치시켜야 한다.

2. v-for 뒤의 구문 중 in 뒤에는 데이터가 들어가 있는 위치의 변수명을 적어주고, 그 앞에는 값을 할당할 변수명을 적어준다.

3. v-for가 적힌 하위 태그에 {{값이 할당된 변수명}}를 태그로 감싸 작성해주면 반복문 사용이 가능하다.

​

v-for에 관한 설명은 다음 링크의 포스팅이 잘 되어있다.

https://kamang-it.tistory.com/entry/Vue-06%EB%B0%98%EB%B3%B5%EB%AC%B8

[출처] Vue.js 스터디 - 1) 기본 설정 및 반복문|작성자 마이와트