Web/Vue.js10 Vue advanced Vue instance가 가진 options 1. computed : computed 객체에 정의한 함수를 페이지가 최초로 렌더링 될 때 호출하여 계산 -> 계산 결과가 변하기 전까지 함수를 재호출하는 것이 아닌 계산된 값을 반환 methods VS computed methods computed 호출 될 때마다 함수를 실행 같은 결과여도 매번 새롭게 계산 함수의 종속 대상의 변화에 따라 계산 여부가 결정됨 종속 대상이 변하지 않으면 항상 저장된 값을 반환 2. watch : 특정 데이터의 변화를 감지하는 기능 watch 객체 정의 감시할 대상 data 지정 data 변화 시 실행할 함수 정의 함수의 첫 번째 인자는 변동 전의 data, 두 번째 인자는 변동 후 data 실행 함수를 Vue method로 .. 2022. 11. 12. SSR & CSR Web App : 웹 브라우저에서 실행되는 어플리케이션 소프트웨어 웹 페이지가 디바이스에 설치된 App처럼 보이는 것 웹 페이지가 디바이스에 맞는 적절한 UX/UI로 표현되는 형태 SPA 서버에서 최초 1장의 HTML만 전달받아 모든 요청에 대응하는 방식 어떻게 한 페이지로 모든 요청에 대응할까? => CSR(Client Side Rendering) 방식으로 요청을 처리하기 때문 SSR과 CRS SSR (Server Side Rendering) - Server가 사용자의 요청에 적합한 HTML을 렌더링하여 제공 - 전달 받은 새 문서를 보여주기 위해 브라우저는 새로고침을 진행 CSR (Client Side Rendering) - 최초 한 장의 HTML을 받아오는 것은 동일. 단, server로부터 최초로.. 2022. 11. 12. Pass Props & Emit Event Data in component 컴포넌트는 부모- 자식 관계만 데이터를 주고받게 하자! -> 데이터 흐름을 파악하기 용이 -> 유지보수가 쉬워짐 pass props 부모 => 자식으로의 데이터 전달 방식 요소의 속성을 사용하여 데이터 전달 props는 부모 컴포넌트의 정보를 전달하기 위한 사용자 지정 특성 자식 컴포넌트는 props 옵션을 사용하여 수신하는 props를 명시적으로 선언 -> msg는 전달하려는 부모 컴포넌트의 데이터 (String 타입으로 선언) -> template에서 {{ msg }} 형태로 사용한 것 -> 부모 컴포넌트인 App.vue의 요소에 msg='~' 라는 property 설정 정적인 데이터를 전달하는 경우 static props라고 명시하기도 함 요소에 속성을 작성하듯이 사.. 2022. 11. 11. Vuex State management 상태란 ? => "현재에 대한 정보" web Application에서의 상태는 어떻게 표현할 수 있을까? => 현재 App이 가지고 있는 Data로 표현할 수 있음! 우리는 여러 개의 component를 조합해서 하나의 App을 만드는데, 각 component는 독립적이기 때문에 각각의 상태를 가짐 즉, 여러 개의 component가 같은 상태를 유지할 필요가 있음 (상태 관리의 필요성) Component의 중첩이 깊어지면 데이터 전달이 쉽지 X -> 중앙 저장소를 두자!! Centralized Store : 중앙 저장소에 데이터를 모아서 상태 관리 각 component는 중앙 저장소의 데이터를 사용 계층에 상관없이 중앙 저장소의 데이터에 접근 가능 중앙 저장소의 데이터가 .. 2022. 11. 10. Navigation Guard 네비게이션 가드 : Vue router를 통해 특정 URL에 접근할 때 다른 url로 redirect를 하거나 해당 URL로의 접근을 막는 방법 [공식문서] Navigation Guards | Vue Router Navigation Guards As the name suggests, the navigation guards provided by vue-router are primarily used to guard navigations either by redirecting it or canceling it. There are a number of ways to hook into the route navigation process: globally, per-route v3.router.vuejs.org 네비.. 2022. 11. 9. Vue Router Routing : 네트워크에서 경로를 선택하는 프로세스 웹 서비스에서의 라우팅 ? => 유저가 방문한 URL에 대해 적절한 결과를 응답하는 것 Routing in SSR - Server가 모든 라우팅을 통제 - URL로 요청이 들어오면 응답으로 완성된 HTML 제공 => 결론적으로, Routing에 대한 결정권을 서버가 가짐 Routing in SPA/CSR - 서버는 하나의 HTML만을 제공 - 이후에 모든 동작은 하나의 HTML 문서 위에서 Javascript 코드를 활용 => 즉, 하나의 URL만 가질 수 있음 Routing 이 없다면, 유저가 URL을 통한 페이지의 변화를 감지할 수 X 페이지가 무엇을 렌더링 중인지에 대한 상태를 알 수 X (새로고침하면 처음 페이지로, 링크를 공유하면 처음페이지.. 2022. 11. 9. Vue Component Component : UI를 독립적이고 재사용 가능한 조각들로 나눈 것, 기능별로 분화한 코드 조각 하나의 app을 구성할 때 중첩된 컴포넌트들의 tree로 구성하는 것이 보편적 유지보수가 편해지고 재사용성 커짐 하나의 컴포넌트를 만들어서 반복되는 UI를 쉽게 처리 Component Based architexture 특징 관리가 용이 재사용성 확장 가능 캡슐화 독립적 SFC (Single File Component) 그렇다면, Vue에서 말하는 Component는?? " 이름이 있는 재사용 가능한 Vue instance ( new Vue()로 만든 인스턴스 ) " SFC : 확장자가 .vue인 파일 template + script + style = .vue 이 파일을 Vue instance 또는 Vue .. 2022. 11. 2. Vue CLI NPM (자바스크립트 패키지 관리자) => python에 pip가 있다면 Node.js에는 npm pip와 마찬가지로 다양한 의존성 패키지 관리 Node.js 설치 시 함께 설치됨 Vue CLI Vue 개발을 위한 표준 도구 프로젝트의 구성을 도와주는 역할 확장 플러그인, GUI, Bable등 다양한 tool 제공 Vue CLI Quick Start 설치 $ npm install -g @vue/cli 프로젝트 생성 폴더 생성 후 vscode terminal에서 진행 $ vue create vue-cli $ vue create (프로젝트명) Vue 버전 선택 (vue 2) 프로젝트 생성 성공 프로젝트 디렉토리로 이동 $ cd vue-cli/ 프로젝트 실행 $ npm run serve 서버 켜기 - ctrl.. 2022. 11. 2. Template Syntax Template Syntax 렌더링 된 DOM을 기본 Vue instance의 data에 선언적으로 바인딩 할 수 있는 HTML 기반 template syntax를 사용 렌더링 된 DOM - 브라우저에 의해 보기좋게 그려질 HTML 코드 HTML 기반 template syntax - HTML 코드에 직접 작성할 수 있는 문법 제공 선언적으로 바인딩 - Vue instance와 DOM을 연결 1. 보간법 (Interpolation) 2. 디렉티브 (Directive) Interpolation (보간법) - 문자열 메시지 : {{ msg }} // 일회성 보간 다시는 변경하지 않아 : {{ msg }} 데이터 바인딩의 가장 기본 형태 "Mustache" 구문(이중 중괄호)을 사용한 텍스트 보간 Mustach.. 2022. 11. 1. Vue instance MVVM Pattern : 마크업 언어로 구현하는 GUI의 개발을 Back-end 로부터 분리시켜 view가 어느 특정한 모델 플랫폼에 종속되지 않도록 함 View : 우리 눈에 보이는 부분 = DOM Model : 실제 데이터 = JSON View Model (Vue) "서로가 서로를 모름 == 독립성 증가, 적은 의존성" View Model - View를 위한 Model - View와 연결되어 Action을 주고받음 - Model이 변경되면 View Model도 변경되고 바인딩된 View도 변경됨 - View에서 사용자가 데이터를 변경하면 View Model의 데이터가 변경되고 바인딩된 다른 View도 변경됨 View Instance === 1개의 객체 -> 아주 많은 속성과 메서드를 이미 가지고 있.. 2022. 11. 1. 이전 1 다음
