본문 바로가기

⭐ Personal_Study97

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.

Lifecycle Hooks Lifecycle Hooks 개요 ✔ 각 Vue 인스턴스는 생성과 소멸의 과정 중 단계별 초기화 과정을 거침 Vue 인스턴스가 생성된 경우, 인스턴스 DOM에 마운트하는 경우, 데이터가 변경되어 DOM을 업데이트 하는 경우 등 ✔ 각 단계가 트리거가 되어 특정 로직을 실행할 수 있음 ✔ 이를 lifecycle hook이라 한다 Lifecycle Hooks created ✔ Vue instance가 생성된 후 호출됨 ✔ data, computed등의 설정이 완료된 상태 ✔ 서버에서 받은 데이터를 vue instance의 data에 할당하는 로직을 구현하기에 적합 ✔ 단, mount되지 않아 요소에 접근할 수 없음 export default { ... created() { this.getDogImage() .. 2022. 11. 14.

Vuex Vuex State Management State Management(상태 관리) 개요 ✔ 상태(state): 현재에 대한 정보(data) ✔ Web Application의 상태: 현재 App이 가지고 있는 data ✔ 각 component는 독립적이기 때문에 각각의 상태(data를 가진다) ✔ 하지만 결국 component들이 모여 하나의 App을 구성하므로 여러 개의 component가 같은 상태(data)를 유지해야 한다! Pass Props & Emit Event ✔ 데이터의 흐름을 직관적으로 파악 가능하다 ✔ 그러나 component의 중첩이 깊어지면 데이터의 전달이 어려워진다는 단점 Centralized Store ✔ 중앙 저장소(store)에 데이터를 모아서 상태 관리 ✔ component의.. 2022. 11. 14.

이전 1 ··· 6 7 8 9 10 11 12 ··· 17 다음

티스토리툴바