본문 바로가기

⭐ Personal_Study/Vue23

Article with Vue Articles with Vue 사전 준비 $ vue create articles $ cd articles $ vue add vuex $ vue add router // App.vue Index state 정의 // store/index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { article_id: 3, articles: [ { id: 1, title: 'title1', content: 'content1', createdAt: new Date().getTime() }, { id: 2, title: 'title2', content: 'content2', creat.. 2022. 11. 19.

Navigation Guard Navigation Guard 네비게이션 가드 ✔ Vue router를 통해 특정 URL에 접근할 때 다른 url로 redirect 하거나 해당 URL로의 접근을 막는 방법 네비게이션 가드의 종류 ✔ 전역 가드: 애플리케이션 전역에서 동작 ✔ 라우터 가드: 특정 url에서만 동작 ✔ 컴포넌트 가드: 라우터 컴포넌트 안에 정의 전역 가드 Global Before Guard ✔ 다른 url 주소로 이동할 때 항상 실행 ✔ router/index.js에 router.beforeEach()를 사용하여 설정 ✔ 콜백 함수의 값으로 다음 3개의 인자를 받는다 to: 이동할 url 정보가 담긴 Route 객체 from: 현재 url 정보가 담긴 route 객체 next: 지정한 url로 이동하기 위해 호출하는 함수 .. 2022. 11. 19.

Vue Router Vue Router Routing Routing ✔ 네트워크에서 경로를 선택하는 프로레스 ✔ 웹 서비스에서의 라우팅: 유저가 방문한 URL에 대한 적절한 결과를 응답하는 것 Routing in SSR ✔ Server가 모든 라우팅을 통제 ✔ URL로 요청이 들어오면 응답으로 완성된 HTML 제공 Django로 보낸 요청의 응답 HTML은 완성본인 상태 ✔ 결론적으로, Routing(URL)에 대한 결정권은 서버가 가진다. Routing in SPA / CSR ✔ 서버는 하나의 HTML(index.html)만을 제공 ✔ 이후에 모든 동작은 하나의 HTML 문서 위에서 JavaScript 코드 활용 DOM을 그리는데 필요한 추가적인 데이터가 있다면 axios와 같은 AJAX 요청을 보낼 수 있는 도구를 사용.. 2022. 11. 18.

UX & UI UX & UI UX (User Experience) ✔ 유저와 가장 가까이에 있는 분야, 데이터를 기반으로 유저를 조사하고 분석해서 개발자, 디자이너가 이해할 수 있도록 소통 ✔ 유저가 느끼는 느낌, 태도 그리고 행동을 디자인 좋은 UX를 설계하기 위해서는... ✔ 유저 리서치, 데이터 설게 및 정제, 유저 시나리오, 프로토 타입 설계 등이 필요 UI (User Interface) ✔ 유저에게 보여지는 화면을 디자인 ✔ UI를 고려한 디자인을 반영, 이 과정에서 기능 개선 혹은 추가가 필요한 경우 Front-end 개발자와 가장 많이 소통 Interface ✔ 서로 다른 두 개의 시스템, 장치 사이에서 정보나 신호를 주고 받는 경우의 접점 ✔ 사용자가 기기를 쉽게 동작 시키는데 도움을 주는 시스템 ✔ C.. 2022. 11. 18.

Todo: Local Storage Todo: Local Storage Local Storage 개요 ✔ 브라우저의 Local Storage에 todo 데이터를 저장하여 브라우저를 종료하고 다시 실행해도 데이터가 보존될 수 있도록 하기 Window.localStorage ✔ 브라우저에서 제공하는 저장공간 중 하나인 Local Storage에 관련된 속성 ✔ 만료되지 않은 브라우저를 종료하고 다시 실행해도 데이터가 보존된다. ✔ 데이터 문자열 형태로 저장 ✔ 관련 메서드 setItem(key, value): key, value 형태로 데이터 저장 getItem(key): key에 해당하는 데이터 조회 Local Storage 실습 실습 // index.js export default new Vuex.Store({ ... actions: { .. 2022. 11. 16.

Vuex 활용해 Todo SPA 앱 만들기 Todo 사전 준비 프로젝트 개시 프로젝트 생성 및 vuex 플러그인 추가 $ vue create todo-vuex-app $ cd todo-vuex-app $ vue add vuex HelloWorld 컴포넌트 및 관련 코드 삭제 컴포넌트 작성 // components/TodoListItem.vue Todo // components/TodoList.vue // components/TodoForm.vue Todo Form // App.vue Todo List 페이지 확인 Read Todo State 세팅 // index.js import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) export default new Vuex.Store({ state: { .. 2022. 11. 15.

이전 1 2 3 4 다음

티스토리툴바