[basics] vuejs란? router와 nuxtjs는 덤

vuejs, nuxtjs 에 대해서 좀 더 자세히 알아보자.

vuejs 란?

내가 알고있던 vuejs

1. 웹, SPA (Single Page Application) 개발을 위한 javascript framework
   • SPA : 단일 페이지, 즉 하나의 페이지에서 동작하는 어플리케이션
   • SPA 처음 웹 페이지 접속 시, 모든 웹 자원 서버로부터 가져와 로딩
   • CSR (Client Side Rendering) 방식 사용
2. 화면 이동을 위한 router 기능 제공
3. 양방향 바인딩을 통한 웹 개발 편의성 제공
   • jquery의 경우, html 영역에 데이터를 직접 설정하거나 가져와야 했음.
4. 컴포넌트 분리를 통한 재사용 용이

더 알아본 vuejs

1. UI 개발을 위한 Progressive Framework
   • Progressive : native 앱의 장점 (빠르고, 뛰어난 UI 제공) 을 모두 수용하고, 표준 패턴을 사용해 개발한 것
2. MVVM 패턴의 ViewModel에 해당
   • Model : 데이터 저장 공간 (javascript)
   • View : 화면 (HTML DOM)
   • ViewModel : Model - View 중간영역. DOM Listener (DOM 변경에 반응하여 특정 로직 수행)와 Data Binding(View 화면과 Model 데이터 동기화) 제공.
3. 가상 DOM
   • 데이터 바인딩으로 인한 DOM 복잡도 증가 및 성능 저하 방지
   • javascript로 이루어진 가상의 DOM에 한번 렌더링하여 기존 DOM과 비교 후, 변화가 필요한 곳에만 update & 동기화!
   • 변화가 많은 화면에서 실시간으로 DOM을 직접 갱신하는 방식이 아니기 때문에, 렌더링 성능 GOOD! 👍

router 란?

• vuejs 에서 페이지 간 이동을 위한 라이브러리
• vue 프로젝트 내부에서 미리 url 주소 정의, 각 주소마다 vue 화면 연결
• $router 객체를 통해 화면 이동 가능. (push, replace, go)
• url 이동 시 히스토리 스택에 추가.
  ※ replace의 경우, 히스토리 스택에 쌓지 않고 화면만 전환.

nuxtjs 란?

• vuejs application을 쉽고, 효율적으로 개발하기 위한 강력한 framework
• SSR (Server Side Rendering) 지원
• 설치만으로 프로젝트 구조화 (scaffolding)
• nuxtjs 파일 생성만으로 라우팅 자동 생성
• webpack을 통한 빌드 시스템 구현 (npm run)
• nuxtjs Lifecycle hooks 의 asyncData() 를 활용하여 페이지 컴포넌트가 로딩되기 전에, vue instance가 생성 되는 created() 전에, 서버 통신을 통해 조회성 데이터를 Model에 초기화, 값 할당 할 수 있다.

참고

• DOM (Document Object Model) : HTML을 구성하는 요소의 정보. 트리 구조.
  ex) tag, class, attribute
• MVVM (Modle-View-ViewModel) : 화면 UI (View) 와 데이터 제어 로직 (Modle) 을 분리해서 개발하기 위해 설계된 패턴
• Vue.js란 무엇인가?
• Vue.js 프로젝트 투입 일주일 전
• nuxtjs Lifecycle hooks
• nuxtjs 참고