[KB IT's Your Life 7기] 4주차 교육 후기, Vue 개발(Closure, MVVM)

 

[KB] IT's Your Life - 4주차

 

[KB] IT's Your Life가 드디어 3월 4주차에 들어왔습니다

960시간 교육 언제 수료하지? 라는 생각도 있었는데

이 속도라면 프로젝트 커리큘럼까지 순식간에 도착할 것 같습니다

 

앞서 1~ 3주차에 HTML/CSS/JS를 모두 배우고

이제 본격적인 프론트엔드 파트 Vue.js 부분에 대한 내용을 학습했습니다

React.js 개발 경험이 2년 정도 있긴 하지만,

JS 엔진에 대해서 좀 더 상세하게 배울 수 있어서 좋았습니다

 

그래서 이제 기자단 활동 내용을 어떤걸 쓰면 좋을까? 하다가

TIL 형식으로 하기에는 정보 전달에 크게 유익하지 않을 것 같아서

중요했던 몇몇 부분만 다시 정리하려고 합니다!

 

-------- JS - 클로저 --------

-------- Vue - MVVM, proxy, Vue 디렉티브 --------

 

마지막으로는, 리액트와 비교했을 때 어떤 점이 달랐는지도 작성해보겠습니다!

 

---

 

 

1. Closure

 

1. Closure 개념

 

클로저를 한 문장으로 정의하자면 다음과 같습니다

 

함수가 선언될 당시의 환경(Scope)을 기억하여,
함수 실행이 끝난 후에도 그 환경에 계속 접근할 수 있는 JS 기능

 

 

그런데 당연히??

이렇게 들으면 이해가 안갑니다.

 

그래서 먼저, 이 기능이 어떤 상황에서 필요해서 등장했고

어떻게 적용하는지 알려드리겠습니다

 

2. Closure 가 필요한 이유

 

클로저가 왜 필요할까요?

여기서 비교를 하나 해보겠습니다

 

[컴파일 언어]

예를 들어, C++에서 함수 내부에 선언된 변수는 스택 영역에 저장됩니다

이 변수는 함수가 실행을 마치면 스택 메모리에서 해제됩니다

 

따라서 함수 종료 후에도 값을 유지하고 싶다면?

개발자가 직접 수동으로 동적할당을 합니다

 

new, malloc 등의 동작을 수행하고,

Heap에 저장한 뒤 delete를 통해 메모리에서 해제하는 것이죠

 

[스크립트 언어]

그러나 JS는 동적인 환경에서 실시간으로 스크립트를 실행합니다

이러한 특성때문에 개발자가 수동으로 메모리를 해제하는 것이 어렵습니다

따라서 Closure라는 메커니즘이 등장했다고 보시면 됩니다

 

Cloure를 이용해서,

함수 종류 이후에도 값을 메모리에서 지우지 않고 남겨두는 것이다!

 

3. Closure 사용 예시

 

클로저를 만드는 가장 기본적인 공식은 다음과 같습니다

 

1. 내부 함수가 외부 함수의 변수를 사용한다

2. 외부 함수는 반드시 그 내부 함수를 return 해야 한다

3. 변수가 아닌 함수 그 자체를 return해야 탈출에 성공한다

 

Closure 사용 예시

 

1번에 따라, 외부함수 outer()와 변수 counter

그리고 counter를 사용하는 내부함수 inner()를 만들어주었습니다

 

정말 간단합니다!!

이 counter 변수가 메모리에서 해제되지 않기 위해서,

inner 함수를 다시 return해주면 됩니다

 

주의사항은 변수 자체 counter를 return하는 것이 아니라,

내부 함수 inner를 return해야 하는 것입니다

실제 코드 작성 시, 주의하시길 바랍니다!!!

(제가 헷갈려서 ㅎㅎㅎ;;)

 

4. 활용

 

이 클로저는 이론에 그치지 않고,

앞으로 배우는 Vue의 Composition API에서 핵심적인 역할을 합니다

 

컴포넌트 함수를 유지하기도 하고,

데이터 은닉을 하는 등... 좋은 역할을 하는데요

 

Vue에서 활용되는 것 뿐만 아니라

어디서든 JS기본 엔진 원리는 동일하게 적용되므로

이런 Closure라는 핵심 기능을 꼭!!! 알아두시는게 좋을 것 같습니다

 

---

 

2. MVVM

 

1. MVVM 이란?

 

MVVM은 Vue에서 사용하는 소프트웨어 아키텍처 패턴의 하나로,

MVC 모델에 지식이 있다면 어느정도 이해하실 거라 생각합니다!

MVVM은 Model - View - ViewModel의 약자입니다

 

복잡한 프론트엔드 로직에서 화면에 보여지는 것(View)과

데이터 로직(Model)을 완전히 분리하기 위해 탄생했습니다

 

쉽게 말해, 개발자가 일일이 "이 데이터 바뀌었으니까 저 글자 바꿔라!"

라고 명령하지 않아도, 중간에서 누군가 자동으로 처리해 주는 방식입니다.

 

2. MVVM이 필요한 이유

 

또 한번 비교를 해보겠습니다

 

 

[과거: jQuery 방식]

데이터가 바뀌면 개발자가 직접 DOM(HTML 요소)을 찾아서 수정해야 했습니다

프로젝트가 커지면 관리해야 할 연결고리가 수천 개가 되어

스파게티 코드가 되기 일쑤였습니다.

 

따라서 효율적인 아키텍쳐, MVVM을 설계했습니다

 

[현재: MVVM 방식 (Vue)]

데이터와 화면을 바인딩(Binding) 해둡니다

개발자는 데이터(Model)만 수정하면 됩니다!

 

그러면 중간에 있는 ViewModel이 알아서 화면(View)을 갱신합니다

반대로 사용자가 화면에 글자를 입력하면 데이터가 자동으로 바뀝니다

 

 

3. 구성 요소 파헤치기

 

 

[ Model (모델) ]

실제 상태 데이터입니다

Vue에서는 ref, reactive로 선언한 데이터들이 여기에 해당합니다

 

[ View (뷰) ]

사용자가 보는 HTML 화면입니다

우리가 작성하는 <template> 영역이죠

 

[ ViewModel (뷰모델) ]

Vue 그 자체라고 보시면 됩니다

View와 Model 사이에서 중개자 역할을 수행하며,

데이터의 변화를 감지하고 화면을 업데이트하는

반응성(Reactivity) 엔진이 돌아가는 곳입니다

 

4. 활용

 

Vue는 이 MVVM 패턴을 v-model, v-bind 같은

Vue 디렉티브를 통해 완벽하게 구현합니다

 

개발자가 직접 DOM을 조작할 필요가 없으니

생산성 폭발, 유지보수 용이 등의 이점이 생깁니다

 

마지막으로, 리액트는 단방향 흐름을 강조해서 명시적으로 상태를 관리한다면,

Vue는 MVVM 패턴을 통해 선언적이고 자동화된 편리함을 제공한다는 장점이 있습니다

 

---

 

진짜 4주차 후기

 

이제 진짜 4주차 "후기" 입니다

 

사실 3월 커리큘럼은 알고 있는 내용이 대부분이라서

복습하면서 학습 내용을 빨리 읽힐 수 있었습니다

 

4월이 되면 모듈평가가 시행되는데

그때 되면 좀 더 심화 단계에서 구체적으로 학습하지 않을까 싶습니다

 

 

 

 

모듈평가는 오픈북으로 시행되기 때문에

사진에 첨부한 책을 아마 샅샅히 살펴야하지 않을까...

ㅎㅎㅎㅎ

 

 

 

 

매주 화~ 목은 야간개방을 해주는데요

공부하고 나가면 이런 귀여운 야간 조명도 볼 수 있씁니다...

 

아무튼, 9-18이 루틴화 되면서

좀 더 취준생다운 생활을 할 수 있게 된 것 같습니다

 

커리큘럼은 4월을 더 기대하면서..

수료까지 파이팅!!!!

 

 

---