고슴도치의 IT여행

MVVM 패턴 / 디자인패턴 / MVVM 동작과정 / MVC / MVP / Vuejs 디자인패턴 MVC는 들어봤는데 MVVM은 무엇일까? 기회가 된다면 다음에 MVC, MVP, MVVM 을 공부하여 포스팅하겠다. 디자인 패턴이 뭐지? 프로그램 개발시 자주 나타나는 문제를 해결하기 위한 방법이나 규약을 묶어 이름을 붙인것. 특정 디자인 패턴의 규칙대로 개발을하면 협업하기 수월하며 유지보수하기 좋다. Vue.js로 웹을 개발하는 방식이 MVVM 디자인 패턴이다! MVVM 패턴 세가지로 역할을 구분하여 웹 개발을 수행한다. Model : 데이터 처리 코드 View : 화면상 보여지는 UI 코드 ViewModel : View 와 Model을 잇는 코드 여기서 Vue.js는 ViewModel 부분을 담당한다. M..

Vuejs / Virtual Dom / 가상돔 / Vuejs DOM 방식 / 가상돔 개념 / 가상돔 필요성 / 가상돔 동작방식 / 렌더링 최소화 Virtual DOM의 필요성 일반적인 DOM에서 변경 발생시에 Render Tree 생성 > Layout 계산 > Painting 과정이 이루어져 브라우저에 보여진다. 이 일련의 과정들이 DOM을 제어할때마다 일어난다면, 클라이언트에게 부담이 될것이고, 속도 저하가 일어날 것이다. 예를 들어, 10개의 DOM을 순차적으로 변경할 경우, 총 10번의 렌더링을 해야만 한다. Virtual DOM 동작 방식 모든 DOM 제어가 끝난 이후 최종적으로 한번의 렌더링을 수행하도록 하여 속도 저하를 예방할 수 있다. 1. 진짜 DOM 트리를 기반으로, Virtual DOM..

Vuejs / 데이터바인딩 / 단방향 데이터바인딩 / 양방향 데이터바인딩 / 바인딩 / 데이터 상호작용 / Vue 데이터 전달 / Vue 실시간 데이터 전달 데이터 바인딩 (Data Binding) 데이터 바인딩은 사용자와 데이터를 간편하게 상호작용 할 수 있도록 하는 것이다. UI로 보여지는 데이터와 실제 데이터가 직접 연결되어있는 것이다. 예시 코드와 실행 결과를 통해 더 자세히 알아보자. 코드 {{ message }} 클릭해서 데이터 바인딩하기 실행결과 Vue Instance의 값을 수정하면 즉시 {{message}} 위치에 값이 반영된다. 이런 방법을 '선언적 렌더링' 이라고도 한다. 단방향 데이터 바인딩 (v-bind) HTML Form의 값을 바꾸면, Vue 변수에 값이 변경된다. v-bind..

서버사이드 렌더링과 클라이언트사이드 렌더링 비교 / SSR CSR 비교 / SEO / 검색엔진최적화 / SPA / 싱글페이지어플리케이션 / Single Page Application 서버사이드 렌더링 (SSR) - HTML을 만드는 곳이 서버다. - 서버에서 페이지를 구현 후 클라이언트로 넘긴다. 장점 1. 초기 로딩 속도가 빠르다. 2. SEO가 CSR보다 유리하다. 단점 1. 페이지 변화 발생시 서버로 다시 렌더링을 요청해야한다. 2. 새로고침이 발생하여 UX적으로 좋지 않다. 3. 서버에 부담이 될 수 있다. 클라이언트사이드 렌더링 (CSR) - HTML을 만드는 곳이 클라이언트이다. - 각 사용자 (클라이언트)에게 책임을 맡기는 방식이다. - 최초 접속시에 JS 코드가 포함된 전체 파일을 읽는다...

Vuejs / Vue 쓰는 이유 / Vue 장점 / Vue 개념 / SPA 프레임워크 / Progressive Javascript / 컴포넌트 / 가상돔 / 양방향 바인딩 왜 Vue.js 를 쓰는가? - SPA(Single Page Applicaton)이로 개발하여 새로고침 현상이 줄어든다. - Progressive JavaScript Framework로서, 점진적으로 수정해 나가면서 Vue.js를 적용시킬수 있다. - 컴포넌트를 이용하여 재사용성이 높아진다. - Virtual DOM 을 사용하여 일반적인 DOM 사용시보다 비교적 효율적이다. - 데이터 단방향 바인딩 뿐 아니라 양방향 바인딩도 가능하다. [Vue.js] 데이터 바인딩 : 단방향 & 양방향 개념과 사용방법 데이터 바인딩 (Data Bind..