Wanna be a thinker

개요

브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리

-> 백엔드, 프론트엔드가 쉽게 통신하기 위해 Ajax와 더불어 사용한다.

특징

- 운영환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 Http API를 사용한다.

- Promise(ES6) API를 사용한다.

- 요청과 응답 데이터를 변형할 수 있다.

- HTTP 요청을 취소할 수 있다.

- HTTP 요청과 응답을 JSON 형태로 자동으로 변경해준다.

사용법

GET, POST, DELETE, PUT과 같은 메소드가 존재한다.

1) GET : 입력한 url에 존재하는 자원을 요청할 때 사용한다.

2) POST : 새로운 리소스를 생성(create)할 때 사용한다.

3) DELETE : REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 삭제할 때 사용한다.

4) PUT : REST 기반 API 프로그램에서 데이터베이스에 저장되어 있는 내용을 갱신할 때 사용한다.

예제

출처 : 

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

lhbhb21c.tistory.com/86

velog.io/@zofqofhtltm8015/Axios-%EC%82%AC%EC%9A%A9%EB%B2%95-%EC%84%9C%EB%B2%84-%ED%86%B5%EC%8B%A0-%ED%95%B4%EB%B3%B4%EA%B8%B0

개요

- 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