본문 바로가기

⭐ Personal_Study/Vue23

Vue_CLI Vue CLI Node.js ✔ 자바스크립트는 브라우저를 조작하는 유일한 언어 -> 브라우저 밖에서는 구동할 수 없었다! ✔ 브라우저가 아닌 환경에서도 구동할 수 있도록 하는 런타임 환경 NPM (Node Package Manage) ✔ 자바스크립트 패키지 관리자 Vue CLI 개요 ✔ Vue 개발을 위한 표준 도구 ✔ 프로젝트의 구성을 도와주는 역할 ✔ 확장 플러그인, GUI, Bable 등 다양한 툴 제공 Vue CLI 시작하기 설치 $npm install -g @vue/cli 프로젝트 생성 $vue create 프리셋 설정 디렉토리 이동 cd 서버 가동 npm run serve Vue CLI 프로젝트 구조 node_modules ✔ node.js 환경의 여러 의존성 모듈 ✔ python의 venv와.. 2022. 11. 9.

Vue: advanced attributes Vue Advanced Computed ✔ Vue instance 가 가진 option 중 하나 ✔ computed 객체에 정의된 함수를 페이지가 최초로 렌더링 될 때 호출하여 계산 계산 결과가 변하기 전까지 함수를 재호출 하는 것이 아닌 계산된 값을 반환 method vs computed data_01 : {{ number1 }} data_02 : {{ number2 }} add_method : {{ add_method() }} add_method : {{ add_method() }} add_method : {{ add_method() }} add_computed : {{ add_computed }} add_computed : {{ add_computed }} add_computed : {{ add_c.. 2022. 11. 7.

Vue: Basic Syntax Basic Syntax Template Interpolation 메시지: {{ msg }} HTML 메시지 : {{ rawHTML }} HTML 메시지 : {{ msg.split('').reverse().join('') }} ✔ 가장 기본적인 바인딩(연결) 방법 ✔ 중괄호 2개로 표기 Directives 기본 구성 ✔ v-접두사가 있는 특수 속성에는 값을 할당할 수 있다. 값에는 JS표현식을 작성할 수 있음 ✔ directive의 역할은 표현식의 값이 변결될 때 반응적으로 DOM에 연결하는 것 ✔ :을 통해 전달인자를 받을 수 있음 ✔ .으로 표시되는 특수 접미사 directive을 특별한 방법으로 바인딩 v-text & v-html {{ message }} const app2 = new Vue({ el.. 2022. 11. 7.

Vue Instance Vue Instance MVVM Pattern ✔ 소프트웨어 아키텍처 패턴의 일종 ✔ 마크업 언어로 구현하는 그래픽 사용자 인터페이스(view)의 개발을 Back-end(model)로부터 분리시켜 view가 어느 특정한 모델 플랫폼에 종속되지 않도록 한다. ✔ View: 우리 눈에 보이는 부분(DOM) ✔ Model : 실제 데이터 (JSON) ✔ View Model (Vue) View를 위한 Model View와 연결(binding)되어 Action을 주고 받음 Model이 변경되면 View Model도 변경되고 바인딩된 View도 변경 View Model 데이터가 변경되고 바인딩된 다른 View도 변경 MVVM Pattern 정리 ✔ MVC 패턴에서 Controller를 제외하고 View model을.. 2022. 11. 6.

Vue Intro Vue Intro Front-end Framework ✔ Front-end(FE) 개발이란? 사용자에게 보여주는 화면 만들기 ✔ Web App(SPA)을 만들 때 사용하는 도구 SPA: Single Page Application Web App이란? ✔ 웹 브라우저에서 실행되는 어플리케이션 소프트웨어 ✔ 웹 페이지가 그대로 보이는 것이 아닌 디바이스에 설치된 App처럼 보이는 것 SPA (Single Page Application) ✔ 서버에서 최초 1장의 HTML만 전달 받아 모든 요청에 대응하는 방식 ✔ CSR(Client Side Rendering) 방식으로 요청 처리 [참고] SSR (Server Side Rendering) ✔ Server가 사용자의 요청에 적합한 HTML을 렌더링하여 제공하는 방.. 2022. 11. 6.

이전 1 2 3 4 다음

티스토리툴바