본문 바로가기

What would life be If we had no courage to attemp anything?

Development/Vue.js13

Vue.js - Vuex Core Concepts 🔔 Vuex Core Concepts |Vuex 핵심 컨셉 State Mutations Actions Getters |State “중앙에서 관리하는 모든 상태 정보 (data)” Vuex는 single state tree를 사용 즉, 이 단일 객체는 모든 애플리케이션 상태를 포함하는 “원본 소스(single source of truth)”의 역할을 함 이는 각 애플리케이션마다 하나의 저장소만 갖게 된다는 것을 의미함 여러 컴포넌트 내부에 있는 특정 state를 중앙에서 관리하게 됨 이전의 방식은 state를 찾기 위해 각 컴포넌트를 직접 확인해야 했음 Vuex를 활용하는 방식은 Vuex Store에서 각 컴포넌트에서 사용하는 state를 한 눈에 파악 가능 State가 변화하면 해당 state를 공유하는.. 2022. 5. 13.

Vue.js - Vuex Intro 🔔 Vuex Intro. |Vuex “Statement management pattern + Library” for vue.js 상태 관리 패턴 + 라이브러리 상태(state)를 전역 저장소로 관리할 수 있도록 지원하는 라이브러리 상태가 예측 가능한 방식으로만 변경될 수 있도록 보장하는 규칙 설정 애플리케이션의 모든 컴포넌트에 대한 중앙 집중식 저장소 역할 Vue의 공식 devtools와 통합되어 기타 고급 기능을 제공 |State state는 곧 data이며 해당 애플리케이션의 핵심이 되는 요소 중앙에서 관리하는 모든 상태 정보 |상태 관리 패턴 컴포넌트의 공유된 상태를 추출하고 이를 전역에서 관리 하도록 함 컴포넌트는 커다란 view가 되며 모든 컴포넌트는 트리에 상관없이 상태에 액세스 하거나 동작을.. 2022. 5. 13.

Vue.js - Vuex를 활용한 Todo App 구현하기 최상위 루트 - App.vue App.vue의 자식 Component : TodoList.vue, TodoForm.vue TodoList.vue의 자식 Component: TodoListItem.vue ❕index.js - Vuex core concepts를 작성 import Vue from 'vue' import Vuex from 'vuex' import createPersistedState from 'vuex-persistedstate' Vue.use(Vuex) export default new Vuex.Store({ plugins: [ createPersistedState() ], state: { //data todos:[], }, getters: { //computed //현재 끝난 일의 개수 /.. 2022. 5. 11.

Vue.js - Youtube API를 이용해 props와 emit 활용하기 ❕결과 - input태그에 원하는 검색어를 입력하고 엔터를 누르면 Video List아래에 유튜브 video 영상 목록이 뜬다! - Video List를 클릭 시 해당 비디오가 Video Detail에 나온다! ❕우리가 구현해야할 Props와 Emit 관계도 App.vue -- Youtube API를 통해 요청과 응답 주고받음, 그 외 다른 vue들과 emit & props App.vue TheSearchBar.vue -- App.vue에 emit 검색 VideoList.vue -- App.vue와 porps & emit, VideoListItem.vue와 props & emit Video List VideoListItem.vue -- VideoList.vue와 emit & props {{video.sn.. 2022. 5. 11.

Vue.js - Vue Router 🔔Vue Router |Vue Router “Vue.js 공식 라우터” 라우트(route)에 컴포넌트를 매핑한 후, 어떤 주소에서 렌더링할 지 알려줌 SPA 상에서 라우팅을 쉽게 개발할 수 있는 기능을 제공 |Vue Router Start! 프로젝트 생성 및 이동 vue create my-router-app cd my-router-app Vue Router plugin설치 (Vue CLI 환경) vue add router [주의] 기존 프로젝트를 진행하고 있던 도중에 추가하게 되면 App.vue를 덮어쓰므로, 프로젝트 내에서 다음 명령을 실행하기 전에 필요한 경우 파일을 백업(커밋)해야 함 commit 여부(Yes) Warn There are uncommitted changes in the current.. 2022. 5. 9.

Vue.js - Pass Props & Emit Events 🔔Pass Props & Emit Events |컴포넌트 작성 Vue app은 자연스럽게 중첩된 컴포넌트 트리로 구성 컴포넌트간 부모-자식 관계가 구성되며 이들 사이에 필연적으로 의사 소통이 필요함 부모는 자식에게 데이터를 전달**(Pass props)하며, 자식은 자신에게 일어난 일을 부모에게 알림(Emit event)** 부모와 자식이 명확하게 정의된 인터페이스를 통해 격리된 상태를 유지할 수 있음 “props는 아래로, events는 위로” 부모는 props를 통해 자식에게 ‘데이터’를 전달하고, 자식은 events를 통해 부모에게 ‘메시지’를 보냄 |컴포넌트 구조 템플릿 (HTML) 스크립트 (JavaScript) 스타일 (CSS) |템플릿(HTML) HTML의 body 부분 각 컴포넌트를 작성 .. 2022. 5. 9.

Vue.js - Babel & Webpack 🔔Babel & Webpack |Babel — 버전 다운그레이드 도구 “JavaScript compiler” ES6 이후 버전을 ES5 버전 이하로 다운그레이드! 자바스크립트의 ECMAScript 2015+ 코드를 이전 버전으로 번역/변환해 주는 도구 과거 자바스크립트의 파편화와 표준화의 영향으로 코드의 스펙트럼이 매우 다양 이 때문에 최신 문법을 사용해도 이전 브라우저 혹은 환경에서 동작하지 않는 상황이 발생 원시 코드(최신 버전)를 목적 코드(구 버전)로 옮기는 번역기가 등장하면서 개발자는 더 이상 내 코드가 특정 브라우저에서 동작하지 않는 상황에 대해 크게 고민하지 않을 수 있게 됨 |Webpack — “파일 번들링 도구”, 번들링 === 합친다! “static module bundler” 모듈 간.. 2022. 5. 9.

Vue.js - Vue CLI 🔔Vue CLI |Vue CLI Vue.js 개발을 위한 표준 도구 프로젝트의 구성을 도와주는 역할을 하며 Vue 개발 생태계에서 표준 tool 기준을 목표로 함 확장 플러그인, GUI, Babel등 다양한 tool 제공 |Node.js —Django와 비슷, JavaScript JS =⇒실행기, 프론트엔드/백엔드 둘 다 가능 자바스크립트를 브라우저가 아닌 환경에서도 구동할 수 있도록 하는 자바스크립트 런타임 환경 브라우저 밖을 벗어 날 수 없던 자바스크립트 언어의 태생적 한계를 해결 Chrome V8 엔진을 제공하여 여러 OS 환경에서 실행할 수 있는 환경을 제공 즉, 단순히 브라우저만 조작할 수 있던 자바스크립트를 SSR 아키텍처에서도 사용할 수 있도록 함 |NPM(Node Package Manage.. 2022. 5. 9.

Vue.js - SFC(Single File Component) 🔔SFC (Single File Component) |Component (컴포넌트) 생성자 함수 → 객체를 만들기 위함. 인스턴스 → 생성자 함수로 만들어진 객체 기본 HTML 엘리먼트를 확장하여 재사용 가능한 코드를 캡슐화 하는데 도움을 줌 CS에서는 다시 사용할 수 있는 범용성을 위해 개발된 소프트웨어 구성 요소를 의미 즉, 컴포넌트는 유지보수를 쉽게 만들어 줄 뿐만 아니라, 재사용성의 측면에서도 매우 강력한 기능을 제공 Vue 컴포넌트 === Vue 인스턴스 |SFC (Single File Component) Vue의 컴포넌트 기반 개발의 핵심 특징 하나의 컴포넌트는 .vue 확장자를 가진 하나의 파일 안에서 작성되는 코드의 결과물 화면의 특정 영역에 대한 HTML, CSS, JavaScript 코.. 2022. 5. 9.

Vue.js - Lifecycle Hooks 🔔Lifecycle Hooks 각 Vue 인스턴스는 생성될 때 일련의 초기화 단계를 거침 예를 들어 데이터 관찰 설정이 필요한 경우, 인스턴스를 DOM에 마운트하는 경우, 데이터가 변경되어 DOM를 업데이트하는 경우 등 그 과정에서 사용자 정의 로직을 실행할 수 있는 Lifecycle Hooks도 호출됨 공식문서를 통해 각 라이프사이클 훅의 상세 동작을 참고 |Lifecycle Hooks의 예시 GetDog created hook은 vue 인스턴스가 생성된 후에 호출 됨 created를 사용해 애플리케이션의 초기 데이터를 API 요청을 통해 불러올 수 있음 2022. 5. 7.

이전 1 2 다음

티스토리툴바