Wanna be a thinker

개요

자바스크립트 객체로 DOM의 모양을 잡아 놓고, 화면 렌더링 횟수를 최소화하여 브라우저의 부하를 줄이는 기술이다.

기존의 렌더링

화면의 DOM을 추가하거나 삭제하는 등의 변경이 일어날 때 마다 화면을 다시 그린다.

개요

뷰 프로젝트를 생성하기 위한 명령어 도구이다.

전제조건

- Node.js LTS 버전이 설치되어 있어야 한다.

CLI 설치 방법

프로젝트 생성 방법

웹 애플리케이션 실행 방법

개요

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

장점

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