Wanna be a thinker

개요

싱글 파일 컴포넌트를 브라우저에서 실행할 수 있게 자바스크립트 파일로 변환해주는 웹팩 로더이다.

장점

1) ES6을 지원한다.

2) <style>과 <template>에 대한 각각의 웹팩 로더를 지원한다. ex) sass, jade

3) 각 .vue 컴포넌트의 스코프로 좁힌 css 스타일링을 지원한다.

4) 웹팩의 모듈 번들링에 대한 지원과 의존성 관리가 제공된다.

5) 개발 시 Hot Module Replacement(HMR)을 지원한다.

※ Hot Module Replacement(HMR)이란?

- 브라우저를 새로 고치지 않아도 웹팩으로 빌드한 결과물이 웹App에 실시간으로 반영될 수 있게 도와주는 설정이다.

- 브라우저 새로 고침을 위한 LiveReload 대신에 사용할 수 있으며 웹팩 데브 서버와 함께 사용할 수도 있다.

- 리액트, 앵귤러, 뷰 등 대부분 프레임워크에서 HMR을 사용할 수 있는 로더를 지원하고 있다.

출처 : 

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

joshua1988.github.io/webpack-guide/devtools/hot-module-replacement.html

개요

- 특정 화면 영역의 HTML, CSS, JS 코드를 한 파일에서 관리하는 방법이다.

특징

- 파일 확장자는 vue이며 HTML 파일에서 뷰 개발을 진행할 때의 한계를 극복할 수 있다.

- 싱글 파일 컴포넌트로 개발하려면 Webpack과 같은 번들링 도구가 필요하다.

HTML 파일에서 뷰 개발을 진행할 때의 한계점

1) 모든 컴포넌트에 고유의 이름을 붙여야 한다.

2) js 파일에서 template 안의 HTML 문법 강조가 되지 않는다.

3) js 파일 상에서 css 스타일링 작업이 거의 불가능하다.

4) ES5를 이용하여 계속 앱을 작성할 경우 Babel 빌드가 지원되지 않는다.

싱글 파일 컴포넌트의 기본 골격

출처 : 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

개요

vue.js로 화면을 조작하기 위해 제공되는 문법이다.

종류

1) Data Binding

- 데이터와 화면을 연결하기 위한 방법으로, 간단한 표현식 {{ }} 으로 화면과 vue 인스턴스의

  data, computed, props 속성을 연결할 수 있다.

- 간단한 자바스크립트 표현식도 화면에 표시할 수 있다.

2) Directive

- 화면의 DOM 조작을 쉽게 할 수 있는 문법으로, v- 접두사가 붙은 태그를 제공한다.

ex)

- v-html

이중 중괄호는 HTML이 아닌 일반 텍스트로 데이터를 해석하기 때문에 실제 HTML을 출력하려면 v-html을 사용한다.

- v-bind

동적으로 하나 이상의 컴포넌트 속성 또는 표현식을 바인딩하여 반응적으로 HTML 속성을 갱신할 수 있다.

또한, 약어인 콜론( : )으로 대체하여 표기할 수 있다.

- v-on

DOM 이벤트를 수신한다. 또한, 약어인 at(@)으로 대체하여 표기할 수 있다.

3) Filters

- 화면에 표시되는 텍스트의 형식을 편하게 바꿀 수 있도록 고안된 기능으로 | (파이프)를 사용하여

  여러 개의 필터를 적용할 수 있다.

출처 : 

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

kr.vuejs.org/v2/guide/syntax.html

개요

브라우저, 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/