빠르게 성장하는 개발자

공식문서를 참고해 보자$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...

1. Prop 내려줄 때 주의 할 점1. 부모(보내주는 쪽)에서예를 들어, TimeTable은 자식쪽 (내려받는 쪽) 컴포넌트 이다.data에서 times 를 찾아서 반드시 바인딩 해 주어야 한다.또한 오른쪽에도, “” 따옴표로 묶어야지만, data에서 찾아서 보내준다. 2. 자식(받는쪽)에서반드시 props 에 추가해주어야 한다.v-for을 사용할 때는 반드시 :key 를 추가하여야 한다.2. Class 바인딩 할 때 주의할 점:class=”{}” 형태로 사용할 텐데,왼쪽에서 class 명에 “” 를 붙여줘야, 클래스에서 찾는다. 그렇지 않으면 data에서 찾게된다. 3. Click 할 때 data 넘겨주기1. @click = “함수명” Uploaded by N2T

Why??Vue에서는 Component의 이름이 Muti-word (즉 1단어이상) 이어야 한다고 한다 ⇒ 에러가 발생했다!!이름바꾸기를 통해서 이름을 수정하고, 컴포넌트가 쓰인곳에서 이름을 다 바꿨음에도 불구하고 에러가 나타났다. How?? 우선 다른 서버가 켜져있는 지 확인하고, 서버를 다 멈춘다(Ctrl+C)정 안될 경우 삭제후 다시 만든다. Uploaded by N2T