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

Ajax의 등장 배경 : teach9186.tistory.com/42

■개요

- 용어 : Ajax(Asynchronous Javascript And XML)

- 비동기적인 정보 교환 기법이다.

- XML이라고 명시되어 있지만, JSON이나 일반 텍스트 등 다른 데이터 오브젝트도 사용할 수 있다.

- 주로 JSON 형식이 많이 사용된다.

■원리

1. 브라우저가 사이트에 접속하면, 서버는 사이트의 기본 구조를 담은 '템플릿'을 전달한다.

2. 브라우저는 수신 받은 템플릿 HTML과 CSS를 해석해 화면의 기본 모양을 그린다.

3. 계속해서 서버는 데이터의 요청 방식과 가공 방식을 기술한 자바스크립트 파일을 전달한다.

4. 브라우저는 자바스크립트 파일을 해석하여 파일에 기술된 방식대로 서버에 추가 데이터를 요청한다.

5. 서버는 순수 데이터를 응답으로 되돌려 준다.

6. 브라우저는 수신한 데이터를 해석하여 데이터 가공 방식에 따라 템플릿의 적절한 위치에

  데이터의 삽입, 변경, 삭제를 수행한다.

■단점

- Ajax는 '동적 페이지 렌더링'을 하기 때문에 자바스크립트를 해석하지 못하는 검색엔진에서는 검색되지 않는다.

- 레이아웃이 복잡한 사이트는 웹 브라우저가 렌더링을 하는 데 힘겨워 할 수 있다.

- Ajax는 최소 2번의 데이터 요청(일반적으로 4회 이상, HTML, CSS, JS 로딩 후 Ajax call)을 해야 해서

  필연적으로 속도 저하가 발생한다.

   -> 이런 경우, '서버 사이드 렌더링'이라고 하여 의도적으로 옛방식 그대로 서버가 모든 페이지를 그려 전달함.

- 자바스크립트를 반드시 사용해야 한다. 자바스크립트를 끄면 Ajax 기반 사이트는 화면의 일부만 그려진다.

   -> 스크립팅 기능이 제한되는 특수 목적 기기나 자바스크립트 엔진을 돌릴 여건이 안되는

      초저성능 임베디드 기기에서는 문제가 발생할 수 있다.

출처 : namu.wiki/w/AJAX

Ajax란? : teach9186.tistory.com/43

■Ajax(Asynchronous Javascript And XML) 등장 배경

- 웹 브라우저의 정보 요청에 서버는 해당 정보를 포함한 전체 페이지를 전달했다.

- 브라우저와 서버는 매번 전체 페이지를 렌더링, 생성해야 했기에 부담이 되었다.

* Ajax를 사용하지 않는 사이트가 특유의 깜빡거림 현상을 보이는 이유는 매번 페이지를 싹 지우고

  처음부터 렌더링 하기 때문이다.

■Ajax(Asynchronous Javascript And XML) 역사

- 1999.3  개념이 정립되어 IE5에 등장하였지만, 윈도우에 탑재된 ActiveX를 거쳐 사용해야 했기에 성능 문제로

  잘 사용되지 않았다.

- 2004.4  구글이 발표한 GMail과 구글 지도가 플러그인 없이 Ajax로 구현된 Web App이라는 사실이 밝혀진 열흘 후,

  Jesse James Garret에 의해 Ajax라는 용어로 불려 고유 명사로 굳어졌다.

* axios나 oboe등 라이브러리는 비동기 HTTP 요청을 전문적으로 처리한다.

출처 : namu.wiki/w/AJAX