저번 포스팅으로 Vue의 기본 개발환경을 설정하였습니다.
오늘은 기존 웹 개발방식은 어땠고, 왜 Vue를 사용하는지, Vue 인스턴스 대해 다뤄보겠습니다.
이전 포스팅 👀
[vue.js] 시작하기 : 기본 개발환경 설정하기
[ 개발 환경 설정 ] - Visual Studio Code : 자신이 사용하는 코딩 편집 프로그램. - Vue.js devtools : 크롬 브라우저 확장프로그램 - Node.js : 구글 크롬의 JavaScript 런타임. JS를 웹브라우저에서만 쓰는..
yeonzzy.tistory.com
💬
프론트앤드 개발자가 되기위해 vue에 처음 입문하게된 초보 개발자입니다. 많은 강의들을 찾아봤지만 Vue.js는 입문자들이 배우기엔 정보가 부족한 것 같아 인프런 '캡틴판교 (장기효)'님의 Vue.js 시작하기를 보며 공부하고 있습니다. 따라서 포스팅 내용이 '캡틴판교 (장기효)'님 강의를 참고하여 작성되어 집니다!
1. Vue.js 란 ?
뷰란 소프트웨어 아키텍처 패턴 중 하나인 뷰-모델-뷰모델 MVVM(Model-View-ViewModel) 레이어에 해당하는 화면(View)단 라이브러리.
사용자의 인터페이스를 만들기위한 프레임워크.
-MVVM 모델 설명-
View = html을 이용해 브라우저에서 보여지는 화면
ViewModel = DOM Listeners, Data Bindings
- DOM Listeners = 화면을 보고 사용자의 이벤트(마우스,키보드)가 입력되는 것을 Model에 전달
- Data Bindings = Model에서 이벤트를 받아 자바스크립트의 데이터가 변한것을 이용해 View로 다시 전달
Model = 전달받은 이벤트를 실행, 변화된 값을 전달
2. 기존 웹 방식과 다른 점
기존에 알고 있는 자바스크립트와 제이쿼리 방식으로 'hello wrold'의 문자열을 #app에 나타내고 싶을 때는 'hello wrold'를 변수에 담아 innerHTML로 나타내주는 방식을 사용하였습니다.
만약, 문자열을 'hello wrold!!!'로 바꿔주고 싶다면? 아래 코딩처럼 다시 변수에 담고 innerHTML을 이용해야합니다.
<body>
<div id="app">
<!--hello world-->
</div>
<script>
// $('#app'); jQuery경우
var div = document.querySelrctor('#app');
var str = 'hello world'
div.innerHTML = str;
//문자열이 변경되었을 경우
str = 'hello world !!!'
div.innerHTML = str;
</script>
</body>
그렇다면 Vue에서는?! 👉 Vue는 반응성 Reactivity를 가지고 있습니다.
Reactivity는 데이터의 변화를 라이브러리에서 감지하여 자동으로 화면을 그려주는 기능을 가지고 있어 위의 예제처럼 매번 함수를 생성하지 않는다는 최대 강점이 있습니다.
3. Vue Reactivity
예를들어 :
변수 var a = 10; 이라면 -> a에 10이 "할당" , a를 출력하는 것을 "접근"
viewModel이라는 객체를 선언 후 Object.defineProperty를 사용해 Vue의 Reactivity를 살펴보면
Object.defineProperty는 대상객체-객체속성-정의내용으로 구성!! (대상객체=viewModel / 객체속성='str' / 정의내용 = get ~ set까지)
<body>
<div id="app"></div>
<script>
var div = document.querySelector('#app');
// 객체선언
var viewModel = {};
// Object.defineProperty : 객체 속성의 동작을 재정의하는 API
Object.defineProperty(viewModel, 'str',{
// 속성에 접근했을 때의 동작을 정의
get: function(){
console.log('접근');
},
// 속성에 값을 할당했을 때의 동작을 정의
set: function(newValue) {
console.log('할당', newValue);
div.innerHTML = newValue;
}
});
</script>
</body>
이렇게 get과 set에 동작을 정의하여 매번 함수를 재정의 하지않고 변화하는 문자열을 화면에 바로 보여지게 됩니다.
4. Reactivity 코드 라이브러리화
Reactivity 코드를 라이브러리화 하기 위해서는 즉시 실행 함수라는 개념을 짚고 넘어가야합니다.
즉시 실행 함수란, 정의되자마자 말그대로 즉시 실행되는 함수입니다.
❔ 그렇다면 즉시 실행 함수는 왜 사용할까
✔️ 다른 변수들의 접근을 방지
✔️ 전역변수들에 의한 오염 방지
✔️ 역할표현 내부의 변수는 외부로부터의 접근이 불가능
3번의 예시 코딩을 init()함수와 render()함수로 분류 후 외부로부터 접근이 불가능, 애플리케이션 로직에 노출되지 않도록 또 다른 유효범위인 즉시 실행 함수에 넣어줍니다.
<body>
<div id="app"></div>
<script>
var div = document.querySelector('#app');
var viewModel = {};
// Object.defineProperty : 객체 속성의 동작을 재정의하는 API
// Object.defineProperty(대상객체, 객체의 속성, {
// 정의할 내용
// });
//즉시 실행 함수 : (function(){})();
//init()과 reander()의 코드를 애플리케이션 로직에 노출되지 않게 또다른 유효범위에 넣어줌.
(function() {
function init(){
Object.defineProperty(viewModel, 'str',{
// 속성에 접근했을 때의 동작을 정의
get: function() {
console.log('접근');
},
// 속성에 값을 할당했을 때의 동작을 정의
set: function(newValue) {
console.log('할당', newValue);
render(newValue);
}
});
}
function render(value){
div.innerHTML = value;
}
init();
})();
</script>
</body>
쪼개진 두 함수가 즉시 실행 함수 안으로 들어갔을 때, 3번의 결과물처럼 변화하는 문자열을 화면에 그대로 출력된다면 간단한 Reactivity 라이브러리화가 작동되는 것입니다.
5. Vue Instance
뷰 인스턴스를 설명하기 전, Vue CDN을 가지고 와야합니다.
아래의 코드를 넣어주거나 직접 다운받아 빌드하여 사용가능.
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
다운받아 사용할 경우엔 아래의 링크로 접속하여 "프로덕션 버전"을 클릭하여 다운받아 사용.
설치방법 — Vue.js
Vue.js - 프로그레시브 자바스크립트 프레임워크
kr.vuejs.org
❔ 그럼 뷰 인스턴스는 무엇인가
Vue Instance란 뷰로 개발할 때 필수로 생성해야는 코드로 인스턴스 생성은 new Vue();
아래의 코드로 인스턴스를 생성하고나면 인스턴스안에 어떤 속성과 API가 있는지 콘솔창에서 확인할 수 있습니다.
var vm = new Vue();
consloe.log(vm);
6. 생성자 함수
함수를 이용하여 인스턴스를 생성하는 법 = 생성자 함수
// 함수 이름이 대문자일경우 생성자함수로 인식하는 것은 암묵적인 룰.
function Car(model, year) { //매개인자로 model과 year을 받음
this.model=model;
this.year=year; //model과 year을 인자로 받아 계속 인스턴스로 찍어낼 수 있음.
}
var c = new Car('audi', '2020'); // c라는 객체를 생성하여 car의 정보를 담음.
> c 출력
car {model="audi", year='2020'} //car라는 객체에 모델과 연식이 선택되어 내용이 나타남
💡 함수를 이용하여 어떤 정보를 담은 객체를 생성하는 것이 생성자 함수의 객체 생성 패턴!
❔ 그렇다면 왜 뷰를 생성자 함수로 나타낼까
Vue라는 생성자 함수 안에 hello를 출력하는 logText() 함수를 정의.
이후 변수 vm으로 new Vue()를 생성할 때마다 // 즉, 생성자 함수로 어떤 객체를 찍을 때마다 객체 안에는 미리 정의한 logText()가 들어가져있기 때문에 매번 함수를 생성하지않고 재사용이 가능.
Vue에서 API와 속성들을 정의해 놓고 가져다 쓰는 패턴이 가능하기 때문.
더 나아가 여러개의 생성자 함수를 사용하여 서로의 인자값을 받아 적용 또는 새로운 인자와 정보를 추가 가능.
이해가지않거나 더 알고 싶은 분들은 링크를 확인하세요!
Using a Constructor Function
다른 방법으로, 다음 두 단계를 거쳐서 개체를 만들 수도 있습니다.
developer.mozilla.org
7. 인스턴스 속성, API
생성자 함수에서 재사용 될 수 있는 인스턴스 속성과 API = el / template / data / methods / created / watch = Key
키 값 옆에 할당되는 값 = value
el : 인스턴스가 그려지는 화면의 시작점 (특정 HTML 태그) → 항상 지정되어져야 함.
tamplate : 화면에 표시할 요소 (HTML, CSS 등)
data : 뷰의 반응성(Retivity)가 반영된 데이터 속성
methods : 화면의 동작과 이벤트 로직을 제어하는 메서드
created : 뷰의 라이프 사이클과 관련된 속성
watch : data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성
<body>
<div id="app"></div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app', //body태그안 #app를 가지고 있는 태그에게 instance를 붙인다.
data: {
message: 'hi'
},
methods: {
},
});
</script>
</body>
부족함이 많은 초보 프론트앤드 개발자에게 좀 더 좋은 방법이나 팁, 조언해주실만한 얘기들이 있다면 거침없이 남겨주세요..
오늘도 조금이라도 성장할 수 있는 초보 개발자였습니다 !
'study > vue.js' 카테고리의 다른 글
| [Vue.js] 컴포넌트 : 맨위로 버튼(Scroll Top Button) 만들기 (0) | 2024.01.05 |
|---|---|
| [Vue.js] 알아보기(4) : Vue 탬플릿문법과 Watch, 최신 Vue CLI (0) | 2020.09.25 |
| [Vue.js] 알아보기(3) : Vue Router 와 Axios (0) | 2020.09.07 |
| [Vue.js] 알아보기(2) : Vue Component (0) | 2020.09.07 |
| [Vue.js] 시작하기 : 기본 개발환경 설정하기 (6) | 2020.09.01 |
