본문 바로가기

전체 글

 (109)
SPA(Single Page Application) SPA란 Single Page Application의 약자 기존 웹 서비스(서버사이드렌더링 방식 사용)는 요청시마다 서버로부터 리소스들과 데이터를 해석하고 화면에 렌더링하는 방식. ink tag를 사용하는 전통적인 웹 방식은 새로운 페이지 요청 시마다 정적 리소스가 다운로드되고 전체 페이지를 다시 렌더링하는 방식을 사용하므로 새로고침이 발생되어 사용성이 좋지 않다. 그리고 변경이 필요없는 부분를 포함하여 전체 페이지를 갱신하므로 비효율적. SPA(클라이언트사이드렌더링 방식 사용)는 처음에 하나의 빈 페이지만 서버측에서 제공하고, View에 대해서는 클라이언트에서 자바스크립트를 통해 렌더링 하는 방식이다. 즉, 브라우저에 웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번 다운로드하고 이후에는 특정 ..
템플릿 문법 Vue.js는 렌더링 된 DOM을 기본 Vue 인스턴스의 데이터에 선언적으로 바인딩 할 수있는 HTML 기반 템플릿 구문을 사용.모든 Vue.js 템플릿은 스펙을 호환하는 브라우저 및 HTML 파서로 구문 분석 할 수있는 유효한 HTML.내부적으로 Vue는 템플릿을 가상 DOM 렌더링 함수로 컴파일 합니다. 반응형 시스템과 결합된 Vue는 앱 상태가 변경 될 때 최소한으로 DOM을 조작하고 다시 적용할 수 있는 최소한의 컴포넌트를 지능적으로 파악할 수 있다.가상 DOM 개념에 익숙하고 JavaScript의 기본 기능을 선호하는 경우 템플릿 대신 렌더링 함수를 직접 작성할 수 있으며 선택사항으로 JSX를 지원. 보간법(Interpolation)# 문자열 데이터 바인딩의 가장 기본 형태는 “Mustache”..
Vue 인스턴스 Vue 인스턴스 모든 Vue 앱은 Vue 함수로 새 Vue 인스턴스를 만드는 것부터 시작 인스턴스에서 사용할 수 있는 속성과 API들 // 객체의 key, value 형태 new Vue({ el:, // 인스턴스가 그려지는 화면의 시점 (특정 HTML 태그) data:, // 뷰의 반응성이 반영된 데이터 속성 template:, // 화면에 표시할 요소 (HTML, CSS) methods:, // 화면의 동작과 이벤트 로직을 제어하는 메소드 created:, // 뷰의 라이프사이클과 관련된 속성 watch:, // data에서 정의한 속성이 변화했을 때 추가 동작을 수행할 수 있게 정의하는 속성 }) 각 Vue 인스턴스는 data 객체에 있는 모든 속성을 프록시 처리한다. 여기서 프록시 처리는 간단히 말..
Vue.js 시작하기 Vue.js의 핵심은 간단한 템플릿 구문을 사용해 선언적으로 DOM에 데이터를 렌더링하는 것데이터와 DOM이 연결되어 이제 모든 것이 반응형이다. DOM : 브라우저의 JavaScript 콘솔에서 보여주는 것들예) HTML 작성시 안에 없이 ,를 사용한 경우, 개발자 도구에는 가 존재는 DOM에 있다. 선언적 렌더링 v-bind : 렌더링 된 DOM에 특수한 반응형 동작 조건문과 반복문v-if : 조건v-for : 반복 사용자 입력 핸들링v-on 디렉티브 : 상호 작용, 특히 DOM을 직접 건드리지 않고 Vue에 의해 처리되고 업데이트v-model 디렉티브 : 양식에 대한 입력과 앱 상태를 양방향으로 바인딩 컴포넌트를 사용한 작성방법Vue에서, 컴포넌트는 본질적으로 미리 정의된 옵션을 가진 Vue 인스턴..
Vue CLI 로 Webpack Simple 프로젝트 생성 필자는 Visual Studio Code를 사용합니다. 1. Node.js 설치하기 https://nodejs.org/ko/ cmd 창에서 node -v로 node 버전 확인. 2. Vue CLI 설치 cli (command line interface) => 명령 프롬프트에서 프로젝트를 생성하고 빌드하는 도구. 3. 프로젝트 생성webpack 템플릿 => webpack + vue-loader, hot-reload, linting(ESLint), unit testing(karma+mocha), e2e test(Nightwatch) 4. npm install 5. npm run dev 컴파일, ESLint 작업을 거치고 node.js 서버에서 프로젝트가 실행된다. 소스 코드를 수정하고 저장하면, 수정된 부분..

티스토리툴바