Wanna be a thinker

개요

- SPA 제작 시 유용한 라우팅 라이브러리이다.

- NPM, CDN 방식의 설치를 지원한다.

- 기본 '루트 URL'/#/'라우터 이름'의 구조이다.

종류

- Nested Router

특정 URL에 지정된 1개의 컴포넌트가 여러 개의 하위 컴포넌트를 갖는 것이다.

- Named Views

특정 URL에 여러 개의 컴포넌트를 영역 별로 지정하여 렌더링 하는 것이다.

출처 : joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/#vuejs%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

개요

화면의 영역을 일젛안 단위로 쪼개어 재활용 가능한 형태로 관리하는 것이다.

컴포넌트의 등록과 사용

- 글로벌 컴포넌트 : 인스턴스 생성 후, 다른 페이지나 컴포넌트에서 사용하는 컴포넌트이다.

- 로컬 컴포넌트 : 사용될 곳에 바로 삽입하여 사용하는 컴포넌트이다.

컴포넌트간 데이터 교환

각 컴포넌트는 각자의 스코프를 가지고 있기 때문에, 타 컴포넌트의 값을 직접 참조할 수 없다.

1. 부모 - 자식 : 통상, '부모 - 자식' 관계로 만들고, 컴포넌트의 집합인 컴포넌트에도 '부모 - 자식'관계가 된다.

- 부모 -> 자식 : 데이터(props)를 내린다.

- 자식 -> 부모 : 이벤트를 올린다.(Emit Events)

부모는 자식에게 v-bind ( : )를 통해 데이터를 전달하고, v-on (@)을 통해 자식에 정의된 이벤트를 수신할 수 있다.

※ props 변수명을 카멜 기법으로 정의하면, html 태그에서 사용할 때는 케밥 기법(-)으로 선언해야 한다.

2. 상위-하위 관계가 아닌 컴포넌트

- 이벤트 버스를 활용할 수 있다.

이벤트 버스의 개요와 사용법

- 개요

개발자가 지정한 2개의 컴포넌트 간 데이터를 주고받을 수 있는 방법이다.

- 기본 문법

1) 애플리케이션 로직을 담는 인스턴스와는 별개의 새로운 인스턴스를 생성한다.

2) 이벤트를 보낼 컴포넌트를 정의한다.

3) 이벤트를 받을 컴포넌트를 정의한다.

출처 : 

joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/#vuejs%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

rwd337.tistory.com/134

kdydesign.github.io/2019/04/27/vue-component/

개요

vue.js로 화면을 개발하기 위해 생성해야 하는 필수 단위이다.

작성법

- 인스턴스 생성자

- 인스턴스 옵션 속성 : data, template, el, methods, life cycle hook 등 속성을 설정할 수 있다.

- 커스텀 로직 : created, mounted, updated, destroyed 등 인스턴스 라이프사이클마다 수행할 로직을 정의할 수 있다.

인스턴스 라이프사이클 초기화

인스턴스 초기화 시, 다음 작업을 수행한다.

- 데이터 관찰

- 템플릿 컴파일

- DOM에 객체 연결

- 데이터 변경시 DOM 업데이트

출처 : joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/#vuejs%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

개요

MVVM 패턴의 ViewModel 레이어에 해당하는 화면단 라이브러리이다.

특징

- '데이터 바인딩'과 '화면 단위'를 '컴포넌트' 형태로 만드는 관련 API를 제공한다.

- '양방향 데이터 바인딩'을 제공한다. (=AngularJS)

- 컴포넌트 간 통신의 기본 골격은 '단방향 데이터 흐름(부모 -> 자식)'을 사용한다. (=React)

- 타 프런트엔드 프레임워크에 비해 가볍고 빠르다.

- 문법이 단순, 간결하여 진입장벽이 낮다.

MVVM 패턴이란?

- Backend(DB 데이터 처리 & 서버의 비즈니스 로직)와 Frontend(마크업 & 데이터 표현단)을 분리하기 위한 구조이다.

- View와 ViewModel은 '양방향 데이터 바인딩'되어 ViewModel에서 데이터 갱신이 일어났을 경우 View도 갱신된다.

- ViewModel은 Backend에서 넘어온 데이터를 Model에 담아 View로 넘어가는 중간 지점이다.

출처 : joshua1988.github.io/web-development/vuejs/vuejs-tutorial-for-beginner/#vuejs%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

1. JavaScript Framework

1.1. 목적

자바스크립트의 구현을 쉽고 빠르게 하는 것

1.2. 개요

설계의 바탕이 되는 기반코드와 이를 커스터마이징 할 수 있는 라이브러리의 통합체이다.

1.3. 대표격

- Angular

- React

2. Angular

2.1. 목적

Single Page Application의 쉬운 작성

2.2. 개요

- 구글 지원의 오픈소스 웹 App 프레임워크

- SPA 형태의 개발

- 큰 커뮤니티

- 데이터 중심적, 테스트 주도적, 선언적 HTML

2.3. 특징

1) Two Way Data-Binding

- model과 view를 양방향으로 연결

- 한 쪽의 데이터 변경 시 양쪽 다 갱신

2) Dependency Injection

- 컴포넌트간 서비스 사용 및 의존성 관리가 용이

- 코드상 밀접한 연관이 없는 컴포넌트의 테스트가 쉬움

3) Directives

- 필요에 따라 커스텀 HTML TAG 작성, 사용 가능

3. React

3.1. 목적

데이터가 지속적으로 변화하는 대규모 APP 구축을 위해 만들어짐

3.2. 개요

- 페이스북에서 만들고 있는 자바스크립트 라이브러리

- 기존 Angular, Ember의 서버 보조 역할 탈피로 HTML5 History API등을 통해 상태별 고유 주소 구현이 가능해짐

-> 클라이언트 라이브러리 페이지가 렌더링에 관여하게 되어 검색엔진 최적화 및 성능 문제가 발생

=> 대안으로서 React가 개발됨

3.3. 특징

1) JUST the UI

- 오직 UI 컴포넌트를 만들기 위한 라이브러리

2) Virtual DOM

- DOM Tree와 같은 구조체를 Virtual DOM으로 가지고 있다.

- V-DOM은 가상의 HTML Element를 가진 상태에서 렌더링을 통해 DOM 조작 등 필요한 부분만을 갱신한다.

- 일관성이 있어 브라우저에 의존적이지 않고 테스트가 쉽다.

- 메모리 상에 DOM을 구성, 구성한 대상을 비교하여 갱신된 부분만 갱신하기 때문에 속도가 빠르다.

3) DATA Flow

- 데이터의 단방향 흐름을 지향하기 때문에 Angular처럼 코드 양이 줄지는 않는다.

- 모델 컴포넌트가 데이터를 UI 컴포넌트로 전달하기 쉬운 관리 App을 만들 수 있다.

- 이벤트를 통해 하위 컴포넌트의 변화를 감지할 수 있다.

4. Framework와 Library의 차이

4.1. Framework

4.1.1. 목적

원하는 기능 구현에만 집중한 빠른 개발을 지원

4.1.2. 개요

개발에 필요한 기능들이 어느 정도 구성된 뼈대를 제공, 개발 효율을 향상시키지만, 정해진 구조에 맞게 개발해야함

4.2. Library

4.2.1. 목적

재사용이 필요한 기능의 반복적 코드 작성 제거

4.2.2. 개요

특정 기능에 대한 API(도구/함수)의 집합 기능을 사용하기 위해 호출하는 방식

4.3. 차이점

- Library를 사용하는 AppCode는 App흐름을 직접 제어한다.

  단지 동작하는 중에 필요한 기능이 있을 때 능동적으로 라이브러리를 사용할 뿐이다.

- 반면 프레임워크는 거꾸로 AppCode가 프레임워크에 의해 사용된다.(제어의 역전)

  AppCode는 프레임워크가 짜놓은 틀에서 수동적으로 동작해야 한다.

4.4. 그 외

- Backbone.js는 Javascript의 mvc 패턴을 구현하기 위한 라이브러리

- React는 단순히 UI를 렌더링 하기 위한 라이브러리

출처

www.incodom.kr/JavaScript_%ED%94%84%EB%A0%88%EC%9E%84_%EC%9B%8C%ED%81%AC_%EC%A0%95%EC%9D%98

web-front-end.tistory.com/63

blog.gaerae.com/2016/11/what-is-library-and-framework-and-architecture-and-platform.html