빠르게 성장하는 개발자

공식문서를 참고해 보자$npm install bootstrap$npm install vue bootstrap-vue: vue전용 bootstrap으로 기존의 bootstrap보다 제한적이다. Uploaded by N2T

❓ Navigation Guard?1. 전역가드 (Global Before Guard)2. 라우터 가드3. 컴포넌트 가드❓ Navigation Guard?Vue router를 통해 특정 URL에 접근 할 때 다른 url로 redirect를 하거나 해당 URL로의 접근을 막는 방법 1. 전역가드 (Global Before Guard)애플리케이션 전역에서 동작. index/js의 router 하단에서 작성한다.to : 이동할 URL 정보가 담긴 Route 객체from : 현재 URL 정보가 담긴 Route 객체next : 지정한 URL로 이동하기 위해 호출하는 함수URL이 변경되어 화면에 전환되기 전 router.beforeEach()가 호출된다.화면이 전환되지 않고 대기 상태가 됨변경된 URL로 라우팅 하..

1. Routing2. Vue Router1. Vue Router 시작하기2. router-link3. router-view4. src/Views 3. Vue Router 실습1. 선언적 방식2. 프로그래밍 방식3. Dynamic Route Matching4. lazy-loading1. Routing네트워크에서 경로를 선택하는 프로세스ex) django⇒ SSR방식! URL요청 → view 함수를 통해서 articles/index/에 접근하면 index에 대한 결과를 보내줌 📢그렇다면… SPA/CSR방식에서는?서버는 하나의 HTML(index.html) 만을 제공하고이후에는 하나의 HTML 문서 위에서 JS 코드를 활용!axios와 같은 AJAX 요청을 보낼 수 있는 도구를 사용해서 데이터를 가져오고 처..

1. UX2. UI3. Prototyping1. UX☝User Experience유저와 가장 가까이에 있는 분야, 데이터를 기반으로 유저를 조사하고 분석해서 개발자, 디자이너가 이해할 수 있게 소통유저가 느끼는 느낌, 태도, 행동을 디자인2. UI☝User Interface유저에게 보여지는 화면을 디자인UX를 고려한 디자인 반영 → FE 개발자와 소통interface : 서로 다른 두 개의 시스템, 장치 사이에서 정보나 신호를 주고 받는 경우의 점점. ⇒ 사용자가 기기를 쉽게 동작 시키는데 도움을 주는 system좋은 UI? ⇒ 심미적인 부분 & 편리하게 사용할 수 있는 부분디자인 시스템, 중간 산출물, 프로토타입 등이 필요하다 💡개발자는 개발만 하는 사람이 아니라, 제품에 대해 고민하고 소통하는 능력이..

npm ERR! code E404 npm ERR! 404 Not Found - GET https://registry.npmjs.org/veux-persistedstate - Not found npm ERR! 404 npm ERR! 404 'veux-persistedstate@*' is not in this registry. Uploaded by N2T

1. Local Storage1. Window.localStorage2. Local Storage 실습2. Vuex-persistedstate1. 설치2. 적용1. Local Storage: 브라우저를 종료하고 다시 실행해도 데이터가 보존될 수 있도록 하기1. Window.localStorage브라우저에서 제공하는 저장공간 중 하나인 Local Storage에 관련된 속성setItem(key, value)- key, value 형태로 저장getItem(key)- key에 해당하는 데이터 조회2. Local Storage 실습데이터가 문자열 형태로 저장되어야 하기 때문에 JSON.stringify 를 사용해 문자열로 변환해 주는 과정이 필요하다.todo 생성, 삭제, 수정 시에 모두 saveTodosToL..

1. Lifecycle Hooks1. created2. mounted3. updated4. Lifecycle Hooks의 특징1. Lifecycle Hooks각 Vue 인스턴스는 생성과 소멸의 과정 중 단계별 초기화 과정을 거친다.⇒ 각 단계가 트리거가 되어 특정로직을 실행할 수 있다.⇒ Lifecycle Hooks1. createdVue instance가 생성된 후 호출된다data, computed 등의 설정이 완료된 상태서버에서 받은 데이터를 vue instance의 data에 할당하는 로직을 구현하기 적합단, mount 되지 않아 요소에 접근할 수 없음.2. mountedVue instance가 요소에 mount된 후 호출됨mount 된 요소를 조작할 수 있음3. updated데이터가 변경되어 DO..

1. 상태관리 (State Management)1. State?2. Management3. Pass Props & Emit Event4. Centralized Store2. Vuex가 무엇이며, 왜 필요한가?1. VueX?3. Vuex 기본문법1. VueX 시작하기2. Vue vs VueX3. VueX 실습하기1. 상태관리 (State Management)1. State?: 현재에 대한 정보 (data)⇒ Web Application에서는 현재 App 이 가지고 있는 Data로 표현할 수 있다.2. Management여러개의 component를 조합해서 하나의 App을 만든다.각각의 component는 같은 상태(data)를 유지할 필요가 있다 ⇒ 상태 관리(State Management)가 필요하다3...