브랜디 기업협업 프로젝트에서 백엔드는 프론트의 화면 한페이지, 프론트엔드는 백의 api 하나를 만들어보라는 팀장님의 말씀이 있었고 다들 이번 기회에 해보자라는 생각이었다😁 어쩌다 보니 혼자 하게 된 나는 프론트엔드를 못할 수도 있었지만 그래도 다들 하는데 혼자 안하긴 싫고 새로운 것을 배우는 것을 워낙 좋아하기도 해서 하겠다고 했다ㅋㅋ(욕심쟁이 또 등장...😅) 오늘까지 총 3주동안 백엔드를 마무리했고 (셀러, 상품, 주문) 금요일인 오늘부터 프론트엔드를 시작한다! 자바스크립트는 정말 한글자도 모르는데....걱정도 되지만 역시나 너무 설렌다 ㅎㅎ 파이썬도 그렇고 장고, 플라스크도 그렇고 무언가를 새로 배울 때 책으로 먼저 시작하기 때문에 vue.js 책을 샀고 기초부터 차근차근(하지만 좀 빠르게) 할 생각이다. 4-5일 정도의 시간만 있기 때문에 집중해서 열심히 해보려 한다 :)
MVVM 패턴📌
vue.js는 MVVM 패턴의 뷰 모델(View Model)에 해당하는 화면단 라이브러리이다.
MVVM 패턴은 화면을 모델(Model)-뷰(View)-뷰 모델(View Model)로 구조화하여 개발하는 방식을 말한다.
뷰(View) : 사용자에게 보이는 화면
돔(DOM) : HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리
돔 리스너(DOM Listener) : 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치
모델(Model) : 데이터를 담는 용기. 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장
데이터 바인딩(Data Binding) : 뷰(View)에 표시되는 내용과 모델의 데이터를 동기화
뷰 모델(ViewModel) : 뷰와 모델의 중간 영역, 돔 리스너와 데이터 바인딩을 제공하는 영역
컴포넌트 기반 라이브러리📌
뷰가 가지는 특징 중 하나는 컴포넌트(Component) 기반 프레임워크라는 점이다. 레고 블럭을 잘 조합해서 쌓으면 원하는 모형을 만들 수 있듯이 컴포넌트를 조합하여 화면을 구성할 수 있다. 컴포넌트 방식으로 개발하는 이유는 코드를 재사용하기가 쉽기 때문이다. 뷰의 경우 컴포넌트를 썼을 때 HTML코드에서 화면의 구조를 직관적으로 파악할 수 있다. 프레임워크 자체에서 컴포넌트 방식을 추구하면 모두가 정해진 방식대로 컴포넌트를 활용하므로 빠르게 구현할 수 있을 뿐 아니라 다른 사람이 작성한 코드를 볼 때도 수월해진다.
리액트 & 앵귤러 장점을 가진 프레임워크📌
양방향 데이터 바인딩(Two-way Data Binding) : 화면에 표시되는 값과 프레임워크의 모델 데이터값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동을 변경되는 것
단방향 데이터 흐름(One-way Data Flow) : 컴포넌트의 단방향 통신. 컴포넌트 간에 데이터를 전달할 때 항상 상위 컴포넌트에서 하위 컴포넌트 한 방향으로만 전달하게끔 프레임워크가 구조화 되어 있는 것
렌더링(Rendering) : 빠른 화면 렌더링을 위해 리액트의 가상 돔(Virtual DOM) 렌더링 방식을 적용하여 사용자 인터랙션(user interaction)이 많은 요즘의 웹 화면에 적합한 동작 구조를 갖추고 있다. 가상 돔을 활용하면 특정 돔 요소를 추가하거나 삭제하는 변경이 일어날 때 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신한다.
